Question

Let’s say I’ve got a simple form (but it’s fairly long).

This form submits user data into a database, and after the first submission, it is rarely (99.99%) ever edited in full again, only one section at a time.

I don’t want a user to have to scroll halfway down to the section they need, then have to scroll the same distance again to submit 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>

That’s the “VERY” basic structure of it. Would is be considered a decent 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 ‘better’ way to do this, or if this is one of the better ways to get it accomplished?

Answer 1

Unless you do this with AJAX the best way is with two forms. You can submit using an ajax request two different things within the same form.

Or if you want to have the same form with submit buttons on each section the just a submit link like so

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

this way no matter what section they are on the submit works for the form you want it to.

another option could be to split it up using tabs i.e. http://jqueryui.com/demos/tabs/

you could have your 1 submit outside the tab area. more information here: http://www.jankoatwarpspeed.com/post/2009/02/18/How-to-deal-with-large-webforms.aspx