OOPS, Since the "name" field was at the top it was the one I was testing with, and it turned out that was the only one with an issue. Must have something to do with using "name" as the name...
For some reason the input tags in my form are not updating the value attribute when they are changed view the actual element (not JavaScript). The data posted to the server is the original value of the "value" attribute, not the text in the textbox.
The textareas in the form work fine, and I have checked javascript fired "onchange" and I can't find any... Help please!
Here is the HTML:
<form action="" method="post">
<div id="group-1" class="group case">
<a class="heading open">heading</a>
<input name="editform[0][class]" value="case" type="hidden">
<input name="editform[0][id]" value="2" type="hidden">
<div class="field">
<label>Name</label>
<input class="text" name="editform[0][name]" value="Mike Escarcaga" type="text" >
</div>
<div class="field">
<label>Title</label>
<input class="text" name="editform[0][title]" value="General Manager" type="text" >
</div>
<!-- repeated for each field -->
<div class="field" >
<label >Text</label>
<textarea class="ltext" name="editform[0][text]" >
Blah HTML, and more blah...
</textarea>
</div>
</div>
<!-- repeated for each group in the form (editform[1], editform[2], etc.) -->
</form>
The value attribute contains the default value for an input, not the live value.
The DOM value property contains a live value.
I agree with #Quentin. The DOM contains the live value and the HMTL input contains the default value for an input. To change the default value of the input, set an element's defaultValue property:
document.getElementById("myText").defaultValue = "Goofy";
Note that the browser parses the HTML tag element and creates a corresponding DOM node object.
"Initial/starting/default value" of input:
ONLY the initial value of value attribute of input's HTML tag element.
defaultValue property of input's DOM node object.
"Current value" of input:
value attribute of input's HTML tag element
value property of input's DOM node object.
See also: What is the difference between properties and attributes in HTML?
Related
Sometimes input elements are visually presenting their values however these values are not presented in the element HTML. Not as "text" and not as "value" attributes. Like here
Actually, it's a value attribute, but it is hidden.
I mean even existence of value attribute itself is hidden.
I'd like to understand why those value attributes are hidden ?
From the frontend development side, I believe there are a few ways to ensure value stays empty while the element still displays the user's input from the DOMString. For example, From this HTML documentation
input and textarea elements have a dirty value flag. This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.
So, if the default value is empty, and this dirty value flag is set, value attribute will remain empty regardless of user input.
<button> , <input> and <option> elements, the value attribute specifies the initial value of the element. that's why input elements “value” attributes are not presented in the HTML?
In case of text type input elements (and some others as well), in native HTML value attribute of the element presents its default value.
The text value inserted by the user is not presented there, so only the default value will always presented in value attribute.
In case no default value is set for that element, the value attribute will not be presented in the element HTML.
Similarly to the presented in the attached screenshot.
We need to understand what is value attribute ?
In general, The value attribute specifies the value of an <input> element.
Let's say for button - it defines the text on the button.
for password input field it must be hidden.
So for any sensitive field a value attribute should be hidden.
Update 1 :
To answer your question in more details, I have created 2 html files.
HTML File 1 :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" value="My excellent blog post">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
here value is
value="My excellent blog post"
and in UI it looks like this :
Now let's assume if it was a username input field just as you have described, we don't want to pass value attribute in that case, instead it should be placeholder attribute.
Let me remove value attribute and put placeholder instead.
HTML :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" placeholder="Enter your title here">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
and in UI it looks like this :
Now, having said all these, a placeholder attribute is not a mandatory field it depends on UI developer and Business unit.
I have the following code...
{%for row in odata%}
<div class="options">
<label for="option-text">{{row}}</label>
<input type="radio" id="option-text" name="option-text">
</div>
{%endfor%}
But for some reason even with the for loop, for each options available, clicking a label by default selects the first option (radio box). Why is that and how can I get past it?
You are re-using the same id value, over and over. Which one should be activated when you click the label? Your browser will pick the first element with the id named in the for attribute here, and if you give all input elements the same id and all label elements the same for attribute value, then you can't ever expect anything but the first input to be toggled.
Generate unique id values; you can use the for loop special variables such as loop.index0 to add a number to each id:
{%for row in odata%}
<div class="options">
<label for="option-text-{{loop.index0}}">{{row}}</label>
<input type="radio" id="option-text-{{loop.index0}}" name="option-text">
</div>
{%endfor%}
Note that the name attribute stays the same! This is intentional. You may want to give those input elements a value attribute, however, for the browser to send back to the server on submit.
Another option is to forgo for altogether and nest the <input> inside the <label>..</label> tag:
{%for row in odata%}
<div class="options">
<label>
{{row}} <input type="radio" name="option-text">
</label>
</div>
{%endfor%}
See the MDN documentation on <label> for more details.
The HTML5 input element includes a 'form' attribute, which can contain one or more space delimited form id's. See below for a simplified example, where both form1 and form2 share an input element.
<form id="form1" method="post">
<input type="submit">
</form>
<form id="form2" method="post">
<input type="submit">
</form>
<input type="text" form="form1 form2">
At least, that's how it's supposed to work:
http://swatelier.info/at/forms/HTML5attrib.asp
http://www.w3schools.com/tags/att_input_form.asp
In Chrome 28, I see that adding a second form id hides an input element from both forms. What modern browsers, if any, support this functionality?
Nowhere in the spec says that the value of the form attribute is a space-separated list of IDs of form elements in the document:
If a reassociateable form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Source: WHATWG HTML5 specification
I'm encountering a problem in Chrome where form submission results in the following error:
An invalid form control with name='ctl00$cphMain$ctl01$groupControl$website' is not focusable.
This is an <input type="url" ...> rendered in Chrome inside a <div> that has display:none set (until the neighbouring checkbox is checked). There is no required attribute, nor is there a maxlength attribute set, so I'm unsure as to why the submission fails. Here is the relevant section of markup (the control in question is inside the 2nd <fieldset>):
<label class="checkbox">
<input id="ctl00_cphMain_ctl01_groupControl_ctl13" type="checkbox" name="ctl00$cphMain$ctl01$groupControl$ctl13" onclick="$(this).parent().siblings('div.expandableContainer').slideToggle();"/>
Include contact...
</label>
<div class="expandableContainer form-expanded js-initial-hide " style="display: none;">
<fieldset>
<label>
Name:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$name" type="text" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_name"/>
</fieldset>
<fieldset>
<label>
Website:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$website" type="url" id="ctl00_cphMain_ctl01_groupControl_website" value="http://" onblur="if (this.value == 'http://') this.style.color = '#666';" onfocus="this.style.color = '#000';" style="color:#666;"/>
</fieldset>
<fieldset>
<label>
Email:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$email" type="email" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_email"/>
</fieldset>
</div>
According to W3.org (http://www.w3.org/TR/html401/interact/forms.html#successful-controls), this is supposedly a 'successful' control. Even adding a MaxLength of 2000 (the DB field width) doesn't work. No errors are received for the surrounding controls.
Is there any idea why this form submission is failing? Checking the box (to cause the surrounding <div> to be displayed (with display:block) allows the form to be submitted without any problems.
Many thanks.
Well I discovered the problem: The invisible URL fields (<input type="url" ... />) had a non-empty value set (basically part of a legacy JavaScript solution to implement placeholder text). For some reason, this value in an invisible field trips up Chrome (possibly from their built-in validation, that other people discussing similar issues have alluded to). Perhaps Chrome misses the lack of visibility specified in the ancestor <div>.
How I fixed this:
Removed the onblur, onfocus and style attributes as they are redundant;
Changed the value attribute to the new HTML5 placeholder attribute, keeping the same attribute value.
The only drawback is that site visitors must manually enter the "http://" in the field rather than append to it; our project team will discuss strategies to improve the UX of this.
I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.
Is there some way we can assign a "form id" to the inputs?
In HTML5, you can use the form attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" /> worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.
<input class="checkbox" id="staff_recruiting" name="company_type"
value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">
$('#search-keyword').keyup(function() {
$('#search-keyword-input').val($(this).val());
});
Your problem will be solved bro:
Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.