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'm working on making client side validation for inputs.
I had had been using PHP to do it all.
Needless to say things got cluttered very quickly.
So I looked in to JS and HTML5 and want to move in to that system for validation.
The messages I want to show are like this:
I know that these are done with the the <input type="email"> tag.
After some help, I was pointed to this page html5rocks.
However I cant seem to get anything to popup.
I copied code straight from there site and nothing.
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
What am I missing to make the notification appear?
That popup is a new implementation in HTML5. Just create an input field like this:
<input type="email">
The popup appears automatically when the form is submitted if the input isn't an email-address.
More about the new input fields in HTML5 is at W3Schools.
Form must be submitted before validation kicks in.
So you have to add a button with the type of submit so like so:
<input type="submit" value="blah">
And then you have to enclose all the fields/inputs in a <form> and </form> tag.
here is the working code:
<form>
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<input type="submit" value="blah">
</form>
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
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
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.
For example, would like 5 checks boxes to have their own submit button and the other 5 to have their own submit. Should be independednt of each other but they are not grouped together in the html page.
Do I nest the other form? Do I put them under the same name and if so how do I distinct the submit? Submit seems to submit the form name element, not the elements names within the form. (Using HTML and JS)
Thanks.
Your clarification doesn't make too much sense from a user standpoint. Perhaps you want something like this:
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form1">
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit1" name="Submit1" />
</form>
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form2">
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit2" name="Submit2" />
</form>
I'd use the button element. Try this link: http://particletree.com/features/rediscovering-the-button-element/
Basically you use them as your submits. Firefox correctly sends the value attribute but IE sends the innerHTML. But they all come across as name=value/innerHTML.
So for example, using PHP, you could use
if (isset($_POST['nameOfButtonElement'])) {
echo 'user clicked this button';
}
EDIT: IE6 (surprise surprise) doesn't handle this correctly at all. See this question: IE 6 and the multiple button elements all sending their name & values
Maybe something like that (this way you can control it):
function ava_aken_hp()
{
// I use blank form with hidden fields to populate it with values from POST.
document.blank.action="https://www.mypage.com";
document.blank.elements["CHECK"].value=....;
...
document.blank.submit();
}
// In your form:
<input type="submit" value="Submit1" onclick="ava_aken_hp();">