On my page there are a lot of buttons, and the forms that these buttons open. By clicking submit on the form - the button becomes inactive.

<div class="rows"> <!------------------------1 button------------------------> <div class="row"> <button class="open">btn1</button> <form id="myform" onsubmit="return false;"> <div class="form-group"> <label for="exampleInputEmail1">Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Phone</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button class="ave">close</button> <button id="submit" class="close">Submit</button> </form> </div> <!----------------------------------------------------> </div>

Jquery:

 $(function() { $('.row').on('click', '.open', function() { $(this).parent().children('form').show(); $(this).attr('disabled', true); } ); $('.row').on('click', '.close', function(e) { e.preventDefault(); $(this).closest('.row').find('.open').html('Куплено!'); $(this).parent('form').html('Мы вам перезвоним!!!').delay(2000).toggle(500); } ); $('.row').on('click', '.ave', function(e) { e.preventDefault(); $(this).parent('form').hide(); $(this).closest('.row').find('.open').prop('disabled', false); } ); } );

Is it possible to make the form only one, and not for each button? This approach makes the code very long. And to all forms open for each button, and I need to only for one - pressed at the moment. Thanks for reading.

Edit 1 enter image description here

Here's what it looks like. The buttons of the same type, each with its own form. It is necessary to keep the functionality, but so that it is impossible to open many forms at once.

  • Not quite clear. Need to have one form and several buttons? Or so that one button and several forms? If possible, please make an example on jsfiddle. - Skywave
  • Skywave, a lot of buttons. The form is desirable one, so as not to overload the code. If possible so do. The main problem is that you can open many forms - Ost
  • jsfiddle.net/ave6uvez/1 - Ost

2 answers 2

1 option. Hide all forms before opening.

 $('.row').on('click', '.open', function() { $('.row form').hide(); $(this).parent().children('form').show(); $(this).attr('disabled', true); }

https://jsfiddle.net/skywave/ave6uvez/2/

Option 2. Make one shape, take it out from under .rows and always open it. But the problem is that for each button the data in the form may differ. There is a mass of solutions, depending on how the data is different.

For example, if you need to change the product id in the form, then you can add the data-item-id attribute to the button and insert it into the input after opening

 $('form input[name=id]').val(btn.attr('data-item-id'));

Or to make a form template and through .replace() to replace some specific parts of the form.

  • There is always one form of data in the form - 2 fields, the same text is inserted by submit. In version 1, if you open three forms, and then close, the buttons become inactive, all but the last opened one. - Ost
  • And why do you do it inactive after clicking? - Skywave

And if you remove all <form> and just leave not submit , but ordinary button ? When you click on a button, the jQuery script itself can "submit" the data in the div where this button is located.