CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Tim
Tim

Reputation: 13258

Handling of two forms in one webpage

I have a webpage with a div area. In this area, there can be two different forms. It looks like this:

Form 1:

<div id="data" ...>
    <form action="/action1" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Name</label>
        <input type="text" name="name" id="label2" value="" />
        <label for="label3">Description</label>
        <input type="text" name="desc" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
     </form>
</div>

Form 2:

<div id="data" ...>
    <form action="/action2" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Firstname</label>
        <input type="text" name="first" id="label2" value="" />
        <label for="label3">Lastname</label>
        <input type="text" name="last" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
        <label for="label5">eMail</label>
        <input type="text" name="mail" id="label5" value="" />
     </form>
</div>

So there are two different forms. The values will be set with jQuery (Ajax call to the backend).

What is the best way to handle these two forms? Should I create two files with only the form and the load the form when they are needed? (Form 1 is needed if some clicks on button 1, form 2 is needed if someoe clicks on button 2 - the events are handled on client-side). Or should I place both form into the single HTML file and enable or disable the form?

Upvotes: 1

Views: 1506

Answers (2)

Zain Shaikh
Zain Shaikh

Reputation: 6043

I think you should keep both the forms in the same page. And show/hide the required form as per the requirement.

Because if you keep the forms in separate HTML files, and user clicks on any button, then you'll have to make a XMLHttpRequest to get the HTML of form, whereas you can easily avoid this extra HTML request by including the HTML of the form in the same page.

I don't know if your website audience is so large or not. But saving a single HttpRequest should be very helpful.

See the article Minimize HTTP Requests by Yahoo developers. They clearly suggest to minimize HTTP requests.

Upvotes: 2

Jamiec
Jamiec

Reputation: 136094

There's nothing stopping you have both forms in the HTML and conditionally hiding/showing the one that you want active. You're best bet is to give each form (or its containing div) a unique ID, and using this to show/hide using jQuery.

Upvotes: 2

Related Questions