[Resolved] Multiple form, one submit button

[Author]

Posts

[minanA]

We display multiple form in one page. How to just use one only submit button for all form displayed?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi there

You would need a JavaScript solution where clicking on one button simulated a click on each of the other buttons.

This solution would only work where the forms are submitted via ajax, it wouldn't be possible if the forms submit via a page refresh.

Also, the forms would each need to have the setting to continue displaying the form.

Any other setting would navigate away from the page as soon as one form submission had completed, but before the others had.

Before I suggest what code you might use, does those settings make sense for your scenario? That clicking one button would submit all forms, but without updating the page and still showing the forms?

[minanA]

Hi Nigel,

Its OK:
- submitted via ajax
- still showing the forms
because this multiple form is not intended for random visitor.

Please, i need your suggestion.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

In that case you should be able to use code such as the following, which you need to add only once to the page (so you could add it to the custom JS section of *one* of your forms).

( function( $ ) {
	$( document ).ready( function(){

		$('.btn-submit').on( "click.tssupp", function(e){

			var others = $('.btn-submit').not(this);

			$('.btn-submit').off( "click.tssupp");
			
			others.click();

		});

	});
})( jQuery );

You need a common class that can be used to target the submit buttons of these forms. The above code relies on you editing the forms and adding the class "btn-submit" to the submit button field.

[minanA]

Hi Nigel,

My issue is resolved now, with some modifications. Thank you!