I'm trying to implement a datalist element with a built-in fallback for older browsers, as demonstrated on the w3 datalist element spec:
<form action="http://example.com/" method="GET">
<label>
Sex:
<input name="sex" list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select name="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="submit" />
</form>
However, the combination of an <input type="text"> and the datalist both with the same name (required for the fallback) cause the "sex" parameter to appear twice in the query string.
Form submit didn't work in SO code snippet, so see this fiddle instead. When submitting "Male" the network tabs shows a request on submit that says http://www.example.com/?sex=male&sex=.
This causes some wonky behavior in the backend code (that I can't modify right now unfortunately). How can I prevent the double parameter while keeping a fallback?
I ended up solving it by setting a single <input type="hidden"> with the "sex" value instead of using the select and input type="text" as a source for the value. On change of either of the latter, I copy the value to the hidden input.
I happened to have jQuery already included so here's the solution I used:
$('#myForm input, #myForm select').change(function() {
$('#sex').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.example.com/" method="GET" id="myForm">
<label>
Sex:
<input list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select>
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="hidden" name="sex" id="sex" />
<input type="submit" />
</form>
I'm still open to better solutions.
I don't know if you're still looking for a solution or if my answer even supports older browser, but it was exactly what I was looking for.
I used selectize.
$('#sex').selectize({create: true});
<select id="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
Related
I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request.
Is there any workaround for this without adding a hidden field?
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
</form>
Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).
I.e.,
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
FYI, per 17.12.1 in the HTML 4 spec:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successfully posted.
You can use readonly attribute in your case, by doing this you will be able to post your field's data.
I.e.,
<input type="textbox" name="Percentage" value="100" readonly="readonly" />
FYI, per 17.12.2 in the HTML 4 spec:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements are successfully posted.
Using Jquery and sending the data with ajax, you can solve your problem:
<script>
$('#form_id').submit(function() {
$("#input_disabled_id").prop('disabled', false);
//Rest of code
})
</script>
To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.
<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
If you prefer jQuery:
<form onsubmit="$(this).find('input').prop('disabled', false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
For ASP.NET MVC C# Razor, you add the submit handler like this:
using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
// Re-enable all input elements on submit so they are all posted, even if currently disabled.
new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
<!-- form content with input elements -->
}
If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you'd be posting to another page.
I'm updating this answer since is very useful. Just add readonly to the input.
So the form will be:
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" name="Percentage" value="100" readonly/>
</form>
Semantically this feels like the correct behaviour
I'd be asking myself "Why do I need to submit this value?"
If you have a disabled input on a form, then presumably you do not want the user changing the value directly
Any value that is displayed in a disabled input should either be
output from a value on the server that produced the form, or
if the form is dynamic, be calculable from the other inputs on the form
Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing
In fact, to preserve data integrity - even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!
I'd almost argue that read-only inputs shouldn't be sent in the request either
Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise
I find this works easier. readonly the input field, then style it so the end user knows it's read only. inputs placed here (from AJAX for example) can still submit, without extra code.
<input readonly style="color: Grey; opacity: 1; ">
Simple workaround - just use hidden field as placeholder for select, checkbox and radio.
From this code to -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
that code -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" value="100" readonly />
<input type="hidden" name="gender" value="female" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
In addition to Tom Blodget's response, you may simply add #HtmlBeginForm as the form action, like this:
<form id="form" method="post" action="#Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"
Define Colors With RGBA Values
Add the Following code under style
<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>
Disabled Grey none tranparent
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input id="p7" type="textbox" name="Percentage" value="100" readonly="readonly"" />
</form>
result
I had exactly the same problem, but did not work for me, because I have select HTML element, and it's read-only state allowed to change its value.
So I used select in one condition and input in another:
<% If IsEditWizard Then %>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<% If item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")) Then %>
<input type="text" value="<%: item.CompanyName %>" tabindex="3" size="12" maxlength="12" readonly="readonly" />
<input type="hidden" id="LinkedCompany" name="LinkedCompany" value="<%:item.CompanyCode %>" tabindex="3" size="12" maxlength="12" />
<%End If %>
<%Next %>
<%Else %>
<select id="LinkedCompany" name="LinkedCompany" class="w-auto" <%= If(IsEditWizard, "disabled", "") %>>
<option value="">Please Select</option>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<option value="<%:item.CompanyCode %>" <%: IIf(item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")), "selected", String.Empty) %>><%: item.CompanyName %></option>
<%Next %>
</select>
<%End If %>
use
<input type="textbox" name="" value="100" disabled/>
or
<input type="textbox" name="" value="100" readonly/>
if your are using framework like PHP Laravel, element without name attribute will read as unset
<input type="textbox" value="100" disabled/>
You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label.
So you can instead put regular
<input text tag just before you have `/>
add this
readonly="readonly"
It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. Just remove border if you would like to make it more like <p> tag
I would like to keep my form fields filled after I press the "submit" button. I noticed that when the page loads, my fields are cleared, and I'd like them to keep the data I provided before. (I feel like browsers used to do this by default.) Is there an easy way to do this?
Right now, I'm using the GET action so I can see all my data, and my page is a plain HTML file, to keep it simple. I know I can read all the file using $_GET['whatever'] and place the values back in the form fields, but I feel there's an easier way which can keep all fields in the form complete.
I've also tried a couple of session tricks but they didn't work. I also tried removing excess, like my labels, and that didn't do anything.
My page is straighforward right now. I have a basic form:
<form name="filter" method="get" action="">
<input type="text" name="s" value="" /><br />
<select id="location">
<option value="school">School</option>
<option value="work">Work</option>
<option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go ➧" />
</form>
I'll provide some values, submit (which loads the page again), and they'll be blank. It passes my variables to the URL just fine, but I'd like the fields to remain populated.
First, you can use autocomplete="on" within the <form> tag to insure that text can be selected from a drop down menu that the browser creates
<form name="filter" method="get" action="" autocomplete="on">
<input type="text" name="s" value="" /><br />
<select id="location">
<option value="school">School</option>
<option value="work">Work</option>
<option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go ➧" />
</form>
While this work for the text information (Not a true auto filling, but good and easy to use), this will not work for the option and label options
If that inability is a deal breaker, you could try and store your data into a cookie using JavaScript when the user clicks submit. Then, when the page is re-loaded use JavaScript to set the value of your form if the cookie exists.
References/useful information:
Where you can learn more about the autocomplete:
https://www.w3schools.com/tags/att_form_autocomplete.asp
For checking the box when loading in:Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)?
For loading in the content after page load: JavaScript that executes after page load
For saving in the checkbox:
Get the value of checked checkbox?
Note: You another method... like your GET, It is just a cookie is the first thing that comes to mind.
I was learning some HTML and I got confused about use of the label element because I found it in many places, with inputs in a form, with optgroup tag for the sections in a select element, before the textarea elelemt, etc.
So, is there a rule when to use it and when to avoid using it in the wrong way? especially in HTML5?
The <label> element should be used with form fields: most types of <input>, <select> and <textarea>. If has a for attribute that holds the id of the related element. So, if you click the label, the related element is focused.
Example Usage at Jsbin
<label for="textinput">Enter data here</label>
<input id="textinput>"
<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>
<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>
<label for="select">Select an option</label>
<select id="select">
<option>Some option</option>
</select>
<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>
In <optgroup> elements, there is a label attribute, which is not the same as the label elements, although its function is similar: identifying a certain group of options:
<select>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
</select>
Label: This attribute explicitly associates the label being defined with another control.
So the label attribute should use when you want to show some text or label for another controls like textbox, checkbox etc.
And the important thing is
When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
Look at here for the documentation
No, it's not HTML5 exclusive:)
Label could be used in connection with form element such as <input>, <select>, <textarea>. Clicking on label would automatically change focus to connected element.
There are two ways connecting label with element:
Put element inside label
Add for attribute for label, where for value is id of element need to be connected
Example (taken from http://htmlbook.ru/html/label):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LABEL</title>
</head>
<body>
<form action="handler.php">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
<input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
<input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
</form>
</body>
</html>
It should be used in forms with other elements only. It can be before, after, or around existing form control.
Here's an example by W3Schools.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request.
Is there any workaround for this without adding a hidden field?
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
</form>
Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).
I.e.,
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
FYI, per 17.12.1 in the HTML 4 spec:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successfully posted.
You can use readonly attribute in your case, by doing this you will be able to post your field's data.
I.e.,
<input type="textbox" name="Percentage" value="100" readonly="readonly" />
FYI, per 17.12.2 in the HTML 4 spec:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements are successfully posted.
Using Jquery and sending the data with ajax, you can solve your problem:
<script>
$('#form_id').submit(function() {
$("#input_disabled_id").prop('disabled', false);
//Rest of code
})
</script>
To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.
<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
If you prefer jQuery:
<form onsubmit="$(this).find('input').prop('disabled', false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
For ASP.NET MVC C# Razor, you add the submit handler like this:
using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
// Re-enable all input elements on submit so they are all posted, even if currently disabled.
new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
<!-- form content with input elements -->
}
If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you'd be posting to another page.
I'm updating this answer since is very useful. Just add readonly to the input.
So the form will be:
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" name="Percentage" value="100" readonly/>
</form>
Semantically this feels like the correct behaviour
I'd be asking myself "Why do I need to submit this value?"
If you have a disabled input on a form, then presumably you do not want the user changing the value directly
Any value that is displayed in a disabled input should either be
output from a value on the server that produced the form, or
if the form is dynamic, be calculable from the other inputs on the form
Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing
In fact, to preserve data integrity - even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!
I'd almost argue that read-only inputs shouldn't be sent in the request either
Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise
I find this works easier. readonly the input field, then style it so the end user knows it's read only. inputs placed here (from AJAX for example) can still submit, without extra code.
<input readonly style="color: Grey; opacity: 1; ">
Simple workaround - just use hidden field as placeholder for select, checkbox and radio.
From this code to -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
that code -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" value="100" readonly />
<input type="hidden" name="gender" value="female" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
In addition to Tom Blodget's response, you may simply add #HtmlBeginForm as the form action, like this:
<form id="form" method="post" action="#Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"
Define Colors With RGBA Values
Add the Following code under style
<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>
Disabled Grey none tranparent
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input id="p7" type="textbox" name="Percentage" value="100" readonly="readonly"" />
</form>
result
I had exactly the same problem, but did not work for me, because I have select HTML element, and it's read-only state allowed to change its value.
So I used select in one condition and input in another:
<% If IsEditWizard Then %>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<% If item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")) Then %>
<input type="text" value="<%: item.CompanyName %>" tabindex="3" size="12" maxlength="12" readonly="readonly" />
<input type="hidden" id="LinkedCompany" name="LinkedCompany" value="<%:item.CompanyCode %>" tabindex="3" size="12" maxlength="12" />
<%End If %>
<%Next %>
<%Else %>
<select id="LinkedCompany" name="LinkedCompany" class="w-auto" <%= If(IsEditWizard, "disabled", "") %>>
<option value="">Please Select</option>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<option value="<%:item.CompanyCode %>" <%: IIf(item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")), "selected", String.Empty) %>><%: item.CompanyName %></option>
<%Next %>
</select>
<%End If %>
use
<input type="textbox" name="" value="100" disabled/>
or
<input type="textbox" name="" value="100" readonly/>
if your are using framework like PHP Laravel, element without name attribute will read as unset
<input type="textbox" value="100" disabled/>
You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label.
So you can instead put regular
<input text tag just before you have `/>
add this
readonly="readonly"
It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. Just remove border if you would like to make it more like <p> tag
I can't get my iPhone to remember my username and password for the login to my website. The controls I currently have are:
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<select>
<option value="1">option1</option>
<option value="2">option2</option>
</select
<input type="checkbox" name="rememberMe" id="rememberMe" />
<input type="button" value="Login" />
When the select is removed, it all works magically. Is there a way to declare / give safari extra hints that this is a logon page?
I've tested with my iPhone and some test page with the following content makes the iPhone ask whether it should save the password and remember it the next time I visit the page.
x.html
<form action="x.html" method="POST">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<select>
<option value="1">option1</option>
<option value="2">option2</option>
</select>
<input type="checkbox" name="rememberMe" id="rememberMe" />
<input type="submit" value="Login" />
</form>
So basically it's the same as yours except that the button is of type "submit" instead of "button" and that there are form tags around the whole code snippet.
You might also want to look at the new iOS 8 feature to share passwords between Safari and apps:
https://developer.apple.com/library/ios/documentation/Security/Reference/SharedWebCredentialsRef/
http://www.raywenderlich.com/90978/secure-passwords-with-safari-autofill-ios-8
I'm not sure if that's your actual HTML or what that is, but if that's the html I can see why it wouldn't work. First thing you probably want to add are closing tags.
<input type="text"></input>
<input type="password"></input>
<select></select>
<input type="checkbox"></input>
<input type="button"></input>
Another thing you can try is to to add an ID and/or a name to the <select> tag.