Question

I have two forms in my html file. They both submitted by one button. Can I connect both forms with this button? Something like
<button form="firstFormId secondFormId"> Save </button>.
Will it make any sense?

Answer 1

You have multiple solutions to do that, I’d go with javascript, or even better, jQuery, if you’re using it.

If you are not using jquery, with javascript you could do something like this:

Place somewhere in the page a “submit” link:

<a href="javascript: submitform()">Submit</a>

Assign to each form an unique name, let’s say “myform1” and “myform2”.
Then include in your page the following:

<script type="text/javascript">
    function submitform(){
          document.myform1.submit(); // submit form 1
          document.myform2.submit(); // submit form 2
    }
</script>

Instead of calling an external function, to keep things as simple as possible, after assigning the names to the forms, you could even simply place the following link:

<a href="javascript: document.myform1.submit();document.myform2.submit();">Submit</a>

If you are using jQuery, and I suggest this way, you could simply assign a given class to both forms, let’s say “submit-me” and then add to your code:

$('.submit-me').submit()

Of all the above I would definitely suggest the last one, that relies on jQuery. It’s easy to maintain, reusable (meaning that it can be applied to any form having the class submit-me, and all the job is done by jQuery.
Note that in all the examples you don’t need anymore the “classic” submit button of forms.

Not tested, but I hope it’ll do what required! 🙂