Best way to have multiple submit buttons in a form?

Question

Say I have a simple form (but it is quite long).

This form sends user data to the database, and after the first submission it is rare (99.99%) to ever be fully edited, only one section at a time.

I don’t want the user to have to scroll halfway to the desired section, then you need to scroll the same distance to send it.

<form> <div> <input type="text" /> </div> <div> <input type="text" /> </div> <div> <input type="text" /> </div> <div> <input type="text" /> </div> <input type="submit" /> </form> 

This is a "VERY" basic structure. It will be considered a good practice to do something like this.

 <form> <div> <input type="text" /> </div> <input type="submit" /> <div> <input type="text" /> </div> <input type="submit" /> <div> <input type="text" /> </div> <input type="submit" /> <div> <input type="text" /> </div> <input type="submit" class="afterFormSubmit"/> </form> 

I'm not sure if there is a “best” way to do this, or if this is one of the best ways to achieve this?

Answer 1

If you do not do this with AJAX, the best way is two forms. You can send two different things with the same ajax request in the same form.

Or if you want to have the same form with submit buttons in each section, just send a link, for example,

 <a href="JavaScript:submit_form();">Submit</a> 

this way, no matter in which section they are on the submission, for the form in which you want.

another option might be to split it into tabs, i.e. http://jqueryui.com/demos/tabs/

You can send your 1 outside the tabs area. more information here: http://www.jankoatwarpspeed.com/post/2009/02/18/How-to-deal-with-large-webforms.aspx

Answer 2

place the submit button on the scrollable view.

 <form> <input type='text'/> ... ... <input type='submit' style="display:fixed; top:100px; left:200px;" /> </form> 

Answer 3

In your case, instead of having only a <form> , I think you should have a different form for each submit button you want.

Answer 4

Yes, I did it once for one client who needs a simple calendar with Xs

I put a submit button on each calendar and they were all embedded in 1 form, which php_self

I am a large procedural file, although I prefer OOP