I have multiple html forms on a page with pre-filled value. For each form, the user has the option to modify the form and submit. But there is also a cancel button. If the user clicks the cancel button (after some modification), the original value will be retained in the form. What is the best way to do it using javascript?
I could retrieve the original value from the server. But really want to do it on the client side.
From MDN
type: reset: The button resets all the controls to their initial values.
So:
<button type="reset">Cancel</button>
Related
I have a basic script which sets the value of a html input field after a form has been submitted
<button id='submitbutton' name="Submit" class="btn btn-primary" onclick="Refresh()">Submit</button>
<script>
function Refresh() {
document.getElementById("mrent").value = "20";
}
</script>
and I have a basic error animation which makes the invalid fields I have go red
If the user inputs a correct input the box will not go red signifying it has passed the error check, however every time I submit a form and a value inputted is incorrect every value is reset. My original function tries to set the previous values back to their old state with the stored variables they were given, however every time I click my submit button and submit my form the red circle around the input box does not come up meaning the value is correct and has been passed in but the value disappears.
I can see the set value come in for a split second before it is cleared, however when I manually set the html input boxes value the value stays but when I use a function and a button it instantly clears. How do I make it so the value stays and does not automatically clear? and is there another way I can keep the previous values of my form after I have submitted my form when some values in my form are wrong?
Every time you click the button the form is submitted and inputs value are reset. If you want to prevent form submit, inside your form tag you can add onsubmit="return false". You now can check the input value and if they are correct you can submit the form with javascript.
I would like to present a user with the form that they just filled out in a modal that pops up after they click "submit" for verification. I see this as a carbon copy of the form, but with each field disabled or grayed out so they can look it over and confirm that everything is right. To make changes to the form at this stage would require that they cancel out of the modal and would be taken back to their form.
I am having trouble getting the data that is contained within the form. Is there an easy way to do this with jQuery or JavaScript?
Or is there another strategy for allowing the user to look over what they just changed that I am missing/forgetting?
You can display a clone version of the form in the modal:
var $clonedForm = $('#myformid').clone();
$('input, select, textarea', $clonedForm).attr('disabled', 'disabled');
$clonedForm.appendTo('#modalid');
For a basic HTML form, I would like to seperate the form into three tabs, each tab will contain certain fields, and when submit the form I wish all data in the three forms will be able to submit.
So I have a menu created by <ul> and <li>
<ul class="subnav">
<li class="subnav0 current">Tab1</li>
<li class="subnav1">Tab2</li>
<li class="lastItem subnav2">Tab3</li>
</ul>
and below this menu, I have three divs that represent each of the tab:
<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>
The input controls elements will be put into each of the tab divs. And the javascript in the menu nav bar will control which tab to display by call show() & hide() method of each div. (Using jQuery).
Now my problem is:
1) I want to be able to submit the whole form (all controls within three divs). However, html forms won't submit input controls within a displayNone div, which means I will only be able to submit the data within the tab which I am currently viewing but not the other two tabs.
2) I also want to do some javascript functions on hide elements when initialize the form in tab2 or tab3. However, since they are display:none, the javascript will not have any effect.
So is there any way that I can somehow hide the div, but also be able to submit the form and do any javascript operation on it?
According to the W3C display:none controls may still be sent to the server, as they are considered successsful controls
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated
submit button is successful. All "on" checkboxes may be
successful. For radio buttons that share the same value of
the name attribute, only the "on" radio button may be
successful. For menus, the control name is provided by a
SELECT element and values are provided by OPTION elements. Only
selected options may be successful. When no options are
selected, the control is not successful and neither the name nor
any values are submitted to the server when the form is
submitted.The current value of a file select is a list of
one or more file names. Upon submission of the form, the contents
of each file are submitted with the rest of the form data. The file
contents are packaged according to the form's content
type. The current value of an object control is determined by
the object's implementation.
If a control doesn't have a current value
when the form is submitted, user agents are not required to treat it
as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons. OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
For example:
<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
</FORM>
will still cause a value to be paired with the name
"invisible-password" and submitted with the form.
In any case if that doesnt seem to be working why not try jQuery serialize() or serializeArray() on each form and concatenate the values and ajax them back to the server.
On your first point, just because an input is display none, doesn't mean that it will not submit those fields.
On your second point, I don't quite follow. Are you saying that when you open one of the tabs, you want to do some action on the content? If so, then JQuery UI allows you to do this:-
http://jqueryui.com/demos/tabs/#event-show
Can you give a more complete example, including the form tag and some inputs?
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.