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 have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.
I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.
Here's what I tried so far
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>
The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.
You May try the below code
onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"
If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.
If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.
$(function() {
$("form").submit(function(event) {
$(this).find('input[type="submit"]').prop("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" value="Submit" />
</form>
Note that you should use .prop() rather than .attr() to set properties such as "disabled"
(see http://api.jquery.com/attr/).
I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>
I've got a simple form in html:
<form action="" method="post">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I also have a file upload on the page, which handles uploads using ajax and adds the files to a mongoDB. The file upload returns the mongoDB id of the file (for example 12345) and I want to add that id to the form as a hidden field so that the id is POSTed to the server upon submitting the form. Since the user can add multiple files though, I want to add a list of id's to the form.
I found how I can add one hidden field to a form from javascript, but this always handles a single field, not a field with multiple values. So I thought of adding a checkbox field to the form so that I can submit multiple values in one element, but it kinda feels like a hack.
Can anybody hint me in the right direction on how I can add a hidden list of values to a form using Javascript? All tips are welcome!
[EDIT]
In the end I would like the form to look something like this:
<form action="" method="post">
<input type="hidden" name="ids" value="[123, 534, 634, 938, 283, 293]">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I am not sure if I understand your question correctly, so I may just be guessing here.
Try adding multiple hidden inputs with a name such as ids[] so that they will be posted to the server as an array.
Example:
<form action="" method="post">
<input type="hidden" name="ids[]" value="123">
<input type="hidden" name="ids[]" value="534">
<input type="hidden" name="ids[]" value="634">
<input type="hidden" name="ids[]" value="938">
<input type="hidden" name="ids[]" value="283">
<input type="hidden" name="ids[]" value="293">
<input type="submit" value="Save this stuff">
</form>
Why not simply concatenating all the ids into a string like so "123,456,890,..etc" and then adding them as a value to ids inupt. When you need them, simply split by ',' which would give you an array with ids?
Todo so only with javascript something like this should work
var elem = document.getElementById("ids");
elem.value = elem.value + "," + newId;
Do you mean that for each time the user clicks the 'upload' button you need to add a hidden field to the form?
Can you post the entire form, that should clear things up...
[Edit]
you could store the id's in an Array, everytime an id should be added to the hidden field's value you could do somthing like:
$('#ids').attr('value', idArray.join());
I'm just typing this out of the box so excuse any little errors
I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.
I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/