I need to show green radio buttons as checked based on model value. HTML has two input elements of type radio:
<input name="color" type="radio" id="red" value="red"></label>
<input name="color" type="radio" id="green" value="green" checked>
Dart code has a variable colorValue='green'. How can the checked attribute of input element be set based on dart variable? Can this be done in HTML or this must be done in dart code?
<input ... checked?="{{colorValue=='green'}}">
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I have this:
<input id="fileupload" type="file" name="files[]" data-url="rest/controller/upload" multiple>
and I need to make it work in a Thymeleaf template. I have the data-url part figured out but I keep getting an error on the word "multiple". This is needed to allow multiple selection in the file selection window.
I have looked everywhere and have not come across an answer.
EDIT:
If you are not familiar, here is the "multiple" attribute.
http://www.w3schools.com/tags/att_input_multiple.asp
The Standard Dialect of Thymeleaf includes attributes that allow you to set these attributes by evaluating a condition, so that if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set:
e.g for checkedattribute:
<input type="checkbox" name="active" th:checked="${user.active}" />
you have to use:
th:multiple
e.g
<input id="fileupload" type="file" name="files[]" th:multiple="{condition}">
see a tutorial here.
I have multiple buttons submitting a form. I check to see which button was clicked by the input value that gets passed into my controller.
public async Task<ActionResult> MyAction(MyModel model, string command)
The html below works. In my controller command equals myValue
<input type="submit" name="command" value="myValue" />
The html below doesn't work. In my controller command is null
<input type="image" name="command" src="..." value="myValue"/>
W3C says the type 'image' is a submit button
So why are these two input elements behaving differently?
An image submit button indeed behaves differently, by definition, both according to the expired working draft linked to in the question and the current HTML5 CR draft and the HTML 4.01 recommendation. According to HTML5 CR, construction of the form data set does not add a name=value pair for an image submit button but name.x=... and name.y=... with the coordinates of the clicked location as values. This corresponds to old definitions and browser practice, except that Chrome additionally adds a name=value pair.
Thus, in your case, the form data will contain the fields command.x and command.y, with values that you are probably not interested in. This is what you need to take as starting point when coding the form handler. This means that if you need to recognize which of several image buttons was used, you need to give them different name attributes.
You can have one hidden field and set the command name in that hidden field which ever button is click and get the name of the button that submited the form on server side.
Javascript
$(".submit").click(function(){
var commandName = $(this).attr("val");
$("input[type=hidden]").val(commandName);
});
HTML
<form>
<input type="hidden" name="command">
<input type="submit" value="submitbtn" class="submit" />
<input type="image" src="..." value="imagebtn" class="submit"/>
</form>
The simplest (and maybe not safe) way to accomplish this task is with inline JQuery, here's how :
VIEW :
<input type="image" src="..." onclick="$('#hidImgValue').val('Image1');" />
<input type="hidden" id="hidImgValue" name="command" value="none" />
CONTROLLER :
public async Task<ActionResult> MyAction(MyModel model, string command)
Command var will have "Image1" as value.
I'm writing a web application for iPad.
I know it's possible to change the type of keyboard displayed when an html input field is selected using:
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
the problem is that I have to use textarea instead of input. Is it possible to obtain the same result?
If not : is there any way to change the keyboard label for the ENTER key. At the moment the default label is "Return" and I would like to have "Send" (since it's a chat app).
thanks a lot!
If it is plain html/css/javascript. This is not possible
if you use <input title="Search"> the "enter" key is replaced by a "search" button, I haven't been able to find a listing of all the different combinations, but I'm sure there is one to you liking.
Note: The input must be inside a form element for this to work.
I have a section of Razor code in one of my views that isn't behaving the way I expect. The code in question contains multiple locations where I need to append the value of a variable from the Model onto an html attribute. The code below is a slightly simplified version of the markup on my page (I've removed some of the markup 'noise' that wasn't important to this example and just made the code harder to read).
There are three instances where I use #topic.StandardTopicId. The 1st and 2nd instances get replaced as I expected, but the 3rd instance name="IsCovered_#topic.StandardTopicId" renders without replacing the variable.
Code in question:
#foreach(var topic in Model.Group) {
<div id="frame-#topic.StandardTopicId" class="topic-frame">
<label>
<input type="radio" name="IsCovered_#(topic.StandardTopicId)" />
No
</label>
<label>
<input type="radio" name="IsCovered_#topic.StandardTopicId" />
Yes
</label>
</div>
}
Sample of the output from the above code block:
...
<div id="frame-42" class="topic-frame">
<label>
<input type="radio" name="IsCovered_42" />
No
</label>
<label>
<input type="radio" name="IsCovered_#topic.StandardTopicId" value="No" />
Yes
</label>
</div>
...
Can anyone explain why the last instance of the variable is not being replaced and is instead being rendered as is?
Razor will not parse the "#" in the middle of a word. The underscore is treated as part of a word as opposed to the dash. Use #() to place Razor code within words. #(topic.StandardTopicId)
Here's a reference to Razor syntax: C# Razor Syntax Quick Reference
Most likely, Razor considers IsCovered_#topic.StandardTopicId a valid e-mail address format, and therefore leaves it as-is.