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?
Related
When submitting a form, what inputs are submitted?
As an example:
disabled inputs are not submitted...
inputs wihtout a name attribute are not submitted...
I am looking for a more comprehensive/official document which explains what inputs are submitted?
There's a range of conditions.
The control's form owner must be the form being submitted and none of the following are true:
The field element has a datalist element ancestor.
The field element is disabled.
The field element is a button but it is not submitter.
The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
The field element is an object element that is not using a plugin.
and a name must be established.
Details are in the HTML5 spec at 4.10.21.4 Constructing the entry list
As W3 document (https://www.w3.org/TR/html401/interact/forms.html#successful-controls) said:
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.
More details in the document.
I am currently using two forms on a single page with a generated function to submit the invisible recaptcha with its token.
One of the problems is that the html5 form validation is not working anymore, it ignores the "required" tags on the input fields.
#sFormId# holds the form ID of the current form in an array.
<button id="#sFormId#submit-button" class="button small expand g-recaptcha" data-sitekey="xyz" data-callback="Submit#sFormId#" value="">submit</button>
function Submit#sFormId#(token){
document.getElementById("#sFormId#").submit();
}
Another problem i am having is that the two forms are in seperate divs that toggle each other. The captcha badge is visible if the first form is open but once i toggle the other div to open the badge disappears with the first badge.
I'm currently displaying three gravity forms on a page, "display:none;", and setting them to "block" when one of the three corresponding buttons are clicked.
You can view the example on http://b2bsauce.com/
The problem is that on validation, the AJAX part reloads, with the error messages and again displays the form as hidden, which obviously, in this case, does not make sense.
Is there any way I can hook into the validation process and set the form to display or should I have gone about this in another way?
JS
var form = jQuery(this).attr('href');
jQuery('.gform_wrapper').not(form).css('display','none');
jQuery(form).slideDown();
HTML
Each form is contained in this wrapper, which is set to "display:none".
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1" style="display: block;">
</div>
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_2" style="display: block;">
</div>
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_3" style="display: block;">
</div>
Submit buttons don't have the href attribute (assuming that's what is being clicked), are you trying to get the action of the form or just save the form instance itself to a variable?
I think you are trying to save the form element to a variable so I would change your code to:
var $form = jQuery(this).parents('form'); // use $ prefix to show it's a jQuery object
jQuery('.gform_wrapper').not($form).css('display','none');
jQuery($form).slideDown(); // not sure if you need this line if the form is already showing
but I'm not sure if that's all you need or not without some sort of self contained example that can be edited.
Gravity forms can be a bit tricky at time and I eventually found the error.
I used a "click" eventListener on the ".button" class to switch between hidden/block of the forms. However, the submit button in Gravity Forms also has a button class attached, hence it was hiding the form every time the submit button was clicked.
I thus made sure that the click listener is only attached to the three buttons at the top.
I am learning JavaScript to make a large form that stays completely local( no web server involved what-so-ever ). I am very familiar with PHP, but JavaScript is new to me. I have a form that has 100+ checkboxes and text fields. Some of the fields show as "[X] Other: [/text field/]" so when you select the "other" selection, you have to enter an input. I am making a validation to make sure you, A: enter text if you selected "other." B: make sure you selected the check box if you have entered text. When the validation function finds something wrong, it shows an alert box. Then, the page reloads( Not sure why ) and all of the data put into the form is wiped. So, I need to find a way to store this form data to load it upon page reload. I started with cookies, but then it came upon me that there is limits to the number of cookies and their sizes. What else can I do??? Please help!
Your submit button is reloading the page.
For example, if your form is set up like this:
<form name="main" method="post">
<!-- Lots of input fields -->
<button type="submit" id="subbutton">Submit!</button>
</form>
This is doing a POST to an undefined server because your form has no action
If you're sure that you don't need any server interaction at all, it's not necessary to use a form element
This means you can remove the form and submit elements from your page and use a button element instead
<!-- Lots of input fields -->
<button id="clientaction" type="button">Click me</button>
From MDN:
The HTML element represents a document section that contains
interactive controls to submit information to a web server.
I'm using JavaScript to hide and show div contents within a simple web form I made.
However, I noticed that the submitted form (it sends the form as a dictionary to Python CGI) may still contain nonempty submitted values for hidden items. Usually, this happens because you enter some values into field X, click a link that hides the div containing field X, and then submit.
I know that I can manually clear all of the input fields (i.e. field X, etc.) in a div when the div is hidden, but is there a more elegant way to accomplish this?
With jQuery, you can make DOM manipulation both easy and elegant.
For your needs, you can remove hidden input elements before submitting: http://jsfiddle.net/tTzn2/.
$("form").submit(function() {
$(this).find(":hidden").remove(); // hide hidden elements before submitting
});