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
Given a form:
console.log(document.getElementById('f').elements['a']);
console.log(document.getElementById('f').elements['b']);
<form id='f'>
<input name='b' list='list' type='text'/>
<datalist name='a' id='list' />
<input name='btn' type='button' value='go'/>
</form>
Why does my attempt to get the datalist by name a return undefined? However, when I search by name b, it succeeds?
According to https://www.w3.org/TR/html5/infrastructure.html#htmlformcontrolscollection-0 elements that can be in elements property are:
button, fieldset, input, keygen, object, output, select, textarea
So, if you want <datalist> to be considered as element - you can refer to W3C)
You can use .children. The control for the element would be <input> element having attribute list="list", at <form> submission the key, value pair would be name b, value selected <option> child element of <datalist> element, select an <option> submit <form> and see Network tab for resulting query string parameters
b:123
btn:go
or
b:456
btn:go
Note <datalist> element is not self closing, closing </datalist> tag is required for valid HTML.
onload = () => {
console.log(document.getElementById('f').children["a"]);
console.log(document.getElementById('f').elements['b']);
}
<form id='f'>
<input name='b' list='list' type='text' />
<datalist name='a' id='list'>
<option value="123">123</option>
<option value="456">456</option>
</datalist>
<input name='btn' type='submit' value='go' />
</form>
The elementsproperty only contains form controls. Since datalist is not a form control, it is not included. For more information see MDN docs on HTMLFormElement and the associated collection.
I am attempting to build a week calendar. Currently the calendar has forward and backward links that work by building a new URL with ?date= appended to the end. Example:
Next week
Prev week
I would also like to add a filter the calendar, allowing only certain event types to be displayed on the calendar. I have come up with the following using the GET method:
<form method="GET" action="">
<select name="type">
<option selected disabled value=''>Type</option>
// event option stuff
</select>
<input type="submit" value="submit">
</form>
When submitted, this form simply rebuilds a new URL with ?type=<something> added to the end. If the URL already has a date parameter, my form ignores it. For example:
http://www.example.com/?date=2014-07-16
Becomes:
http://www.example.com/?type=dinner-date
Likewise, the week navigation ignores the filter.
Is there a simple way to get the filter and the navigation links to work together?
For example, if ?date= already exists, then &type= is appended to the URL. And if one or both parameters already exist then the values are simply updated.
I make the assumption that you could use jQuery:
<form method="GET" action="http://www.example.com">
<input type="hidden" name="date" id="date" value="<?php echo date;?>" />
<select name="type">
<option selected disabled value=''>Type</option>
<!-- event option stuff -->
</select>
<input type="submit" value="submit" onclick="buildLink($('#date').val());">
<br>
<input type=button onclick="buildLink('2014-07-23');" value="Next week" />
<input type=button onclick="buildLink('2014-07-09');" value="Prev week" />
</form>
And then this is a simple Javascript function that submits the form, and depending on what you choose, the date is changed in the form before it is submitted:
function buildLink(date) {
$('#date').val(date);
$('form').submit();
}
I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)
You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.
i have the first select options
<form id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" >
<option value="0" >Please Select your article</option>
<option value="3" selected='selected' > value 1</option>
<option value="2" > value 2</option>
<option value="18" > value 3</option>
<option value="16" > value 4</option>
</select>
<input type="hidden" name="hiddenselect" value="3" />
</form>
and the second is
<form action="" method="POST" id="form0">
<input type="text" name="date0" class="tcal" value="" readonly="readonly" /><br />
<input type="image" src="../submit.png"/>
<input type="hidden" name="submit0" />
</form>
this my javascript
function displayv() {
var singleValues = $("select option:selected").text();
$("#hiddenselect").val(singleValues);
$("select > option:first").prop("disabled", "disabled")
}
$(document).ready(function(){
$("select").change(function() {
displayv();
});
displayv();
$("select#infmenu").change(function() {
$("#infform").submit();
});
});
now when i select the first option the page refresh and i get the value selected.
and when i submit the second submit the page refreshes and the first select option returns empty Please Select your article.
so how should this be fixed please .
EDIT :
this the php how i handle between them.
if (isset($_POST['infmenu'])){
$infmenu = $_POST['infmenu'];
// some sql of updating here
}
if (isset($_POST['submit0'])){
//some updating sql here
}
It's not really clear to me what your question really is.
If you're saying you're not seeing your select item value when you submit the second form, then that is normal and expected. You have two independent forms so when you submit the second form, the data from the first form will not be sent to the server.
The submit button /image only sends data for the inputs within it's own form, not data from any other forms within your html body tag.
Edited to add: you could:
have a single form tag instead of two
modify your jquery so that it puts the select value into the hidden field of the second form s well as the hidden field of the first. Then when second form is submitted, have your PHP script read the hidden field value and use that when rendering the HTML to decide which option has the selected attribute.
use cookies with some JavaScript to set the cookie when the value of select changesuse Ajax to do a partial submit - assuming server doesn't need to know value of select item when dealing with second form
There is no action="" assigned to the first button.
You have two forms.
When you click the submit in the second form, of course the data of the first form is not submitted.
Also, the submit button in the second form has no name, so you perhaps cannot evaluate in PHP if the button is clicked. But that's a different story
You should make the two forms one.
If they are too far apart on your page. You should save the value of the select box in the hidden field in the second form with php