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.
Related
I have initially created a form with a formid="blah" method="GET" action="blah.com". The form collects certain attributes and passes it on to blah.com on submit. Suppose i include a drop down/ radio buttons upon selection the form's action should be changed, i.e should submit to either of three separate forms. Could anyone explain how form action works? could i call function in the action attribute or any other attribute?
The action attribute does not allow any script code.
However you can change the action value in the onchange event of your select inputs or via onsubmit of your form. Both of them allow you to use javascript code, which you can use to change the outcome of your form, depending on the input.
In case you use jQuery, you can easily get those with $('input#yourdropdownsname').val(). The same holds for your form to change the action value.
See this javascript - change form action based on selection? for a full code example.
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.
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.
I'm building an HTML multiple-choice quiz and am aware of a technique which would let me use multiple submit buttons - one for each answer to an individual question. I could then process the form in PHP using submit button values and determine which answer the user has selected. The reason for using submit buttons is so that they can be styled appropriately.
However, I'm wondering if this is bad practice from an accessibility perspective? Would it be better to use an individual form for each answer to a question? There are plenty of questions on here about how to use multiple submit buttons but they don't seem to address this point.
It's absolutely fine, and in a lot of cases can improve the usability of a form. Be careful however, as there are a couple of gotchas:
If the enter key is used to submit the form, the submit behaviour is undefined. HTML5 does define this behaviour, and it specifies what most browsers already do in this situation: The first submit button in the form should have its name/value sent as part of the submission.
However IE<=8 don't send the name/value pair for any submit button when the enter key is used to submit the form.
So, you have to be aware that there needs to be a "default" action for the form, and that has to be the first submit element present.
You can't use this technique to submit to a different action based on which button was pressed. Javascript can theoretically solve this, but you shouldn't do that (a good mantra is, don't use Javascript to solve a non-Javascript problem)
What will you do if the form is submitted using the Enter key on the keyboard, and none of the submit buttons is in the data you receive server-side?
I have a form with two submit buttons - one for Cancel and the other is for Saving form values to the DB . When Enter key is pressed, the Cancel button submits the form instead of the Save button submitting the form. How can I make the Save button submit the form when Enter key is pressed?
Thanks,
Your form should not have two submit buttons. Have the Save button be of type submit, and the Cancel button be of type button.
EDIT: I'm going to update this answer to handle several issues that were brought up.
Nothing I've seen in the HTML specification (i.e. the DTD) disallows two submit buttons in one form, but the exact issue the OP mentioned can occur. In his or her case, the solution is to make the Cancel button of type button and add in the following JavaScript:
<input type="button" value="Cancel" onclick="window.location.href='nextpage.html';"/>
Here, one would replace nextpage.html with the appropriate URL. Or, this.form.action can be the new location if the redirection is to the action of the form.
If the OP wants to be safe and avoid JavaScript, this could only be a (perhaps styled) hyperlink.