I have a HTML form which allows a radio button selection of two products. After the product is selected, the user has the option of digital download or delivery of which there is a separate form for each asking different questions.
I need to ensure that the product selection is passed to either of the two form for when the user makes the decision on which delivery option to opt for. Only one of the forms is submitted.
Basically I have:
Form1: Product Selection Radio Button (2 Options)
// Choice of delivery options hidden by a javascript reveal of the relevant form
Form2a: Digital download form fields with actions for validation and submission to Paypal
Form2b: Regualar delivery form fields with actions for validation and submission to Paypal
I look forward to a solution from the excellent minds on this site!
Assuming this is all on a single page, it sounds like you don't really need multiple forms. I would suggest just including everything in a single form, wrapping the applicable questions for each selection in separate <div> tags and using some JavaScript to present the applicable <div> when either radio button is selected. When the form is submitted, check the radio button selection on the server side to determine which other form fields to utilise.
Related
Team,
I have a html form with multiple tabs. I have only one submit button which submit all data .Whats the best way to do this?. Also if i switch between tabs values maintained but not submitted and saved will they be retained?
When researching how to write forms in HTML I see mention of the term "form control".
In particular using Twitter Bootstrap which has classes like form-control and control-label.
What exactly is a "form control"?
A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g., returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.
A form control is a user interface control that serves as the point of connection between the user and the server. Interactions vary by control type: buttons: button file handling: input type="file" menus: select, etc. And are also grouped into categories
Controls are essentially an API of key-value pairs for pinging back and forth to the server.
W3C's Form Section is incredibly informative in its walk through of forms, form elements, form controls, form owners, and more insight to the inner workings of the Internet's workhorse: the humble HTML form.
References:
Forms
HTMLFormElement
Association of Controls and Forms
XForms Glossary
Form Controls Infrastructure
For Bootstrap it seems to be a styling thing: From bootstrap's page:
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
But more broadly it seems to be more, as per #the_velour_fog 's comment:
it seems to be more than just a styling thing: it seems form control just refers to the individual HTML elements in a HTML form e.g. from https://html.spec.whatwg.org/multipage/forms.html; A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or colour pickers.
The term has very little to do with styling, though styling forms is a special art.
'Form elements' are the (usually interactive) controls whose values are submitted automatically with the http request that is initiated by clicking the "submit" button - even without javaScript. Most commonly this would be button, input, textarea and similar element types. MDN has this entry with hyperlinks to documentation of each type.
Anything where a value attribute is meaningful or expected can be a form element. The name attribute is also important, since this is used (e.g. on the server side) as a 'key' for the value in the form data.
The supporting elements such as label, fieldset and legend are commonly regarded as form elements, since they exist to name and group the other form elements from the user's point of view, although they contribute nothing to the submitted form data.
There may be elements in the form which have no 'value' attribute (e.g. headings, hyperlinks or images), but strictly speaking, these are not 'form elements'. They may however contribute to the form data via client-side javaScript.
And you can use form elements in something which is not a form, or which makes parameterised http requests without an explicit form element. This is very common.
I have multiple submit buttons in a form. How do I send all the information from the form to a MySQL backend just once? I know how to do it with just one submit button.
Additional information is that I have multiple submits to create a multiple step form and I want to go ahead with the multiple submit solution.
You would need to have multiple forms if creating this without using Javascript
I have two forms, a login form and a register form on the same page and each has its own submit button. If I fill in bad data and click on submit button on register form, I get the form back with errors ( expected). If I now enter sign in details on signin form and click on signin form's submit button, the register form gets submitted.
This is strange behaviour. I am not sure where to start search for this. I am using firefox to test this.
Thanks
Well, you will need to debug it step by step.
Check your form nesting and follow good structure, make sure both form are not overlapping with each other or not being closed properly.
Give you form a proper ID and NAME. Be careful when two forms have the same name From Name Attr.
Based on your structure and your question, make sure you have a different submit buttons for each form and that button is placed within the form nesting.
Same as for the forms, give your submit button a proper unique ID and NAME .
Choose whether you want to submit by your using submit in html, or having JS to submit the form for you JS submit form.
If you are using HTML5, you can separate the button from the FORM. They can run separately. Means dynamic association between the form and it's submit button by having submit button placed anywhere and can submit a form located in different place. Check Association of Controls and Forms & HTML5′s New “form” Attribute.
Please post some code in order for us to have a better understanding of your issue.
Good luck.
I have an application where in a signed in user searches a database and is displayed a table of results. These results are basically listings of events. I give the user then, the privilege to "keep" or "discard" any event (using radio buttons beside each event).
Now however, I wish to implement a functionality whereby, the user at the end can click just one "update" button and all changes are affected (since keeping one button for each record will be very user unfriendly). That is, I am looking equivalently to submit multiple forms with just one submit/update button.
Is this possible ?
You need to use javascript, I suggest you using JQuery. Using AJAX you need to submit each form - this way page will not be redirected once you submit a form!
Then, within each forms assign individual IDs for each form. Then, assign your submit button an id for example mySubmit. Up next, add following code:
$('#mySubmit').click(function(){
// submit form1 by ajax...
// submit form2 by ajax...
});
You may see jQuery's http://api.jquery.com/jQuery.post/ for further information on how to submit a form using ajax.
As long as all of the radio buttons and submit button are part of the same form, you don't need to worry about submitting multiple forms because there won't be any. You can have multiple submit buttons in a single form, you can give them different values to know which button was clicked.
If you don't want to use jQuery then use javascript to form a list of data separated by say ~ character and set this string to some hidden field and submit using document.formx.submit()
You will need to parse the string on server side to get the data in correct format.