jQuery: Submit function for two identical forms on same page

Question

I have a page that in different sections contains the same form twice—a simple, single input field to enter an email address. I have the following submit function configured, and I'm wondering about the simplest route for allowing the two forms to behave independently of one another; for as I have it configured now, both forms are effectively treated by the script as a single entity. Is there a way to specify to submit the nearest or active form within the .form div? Or should I configure the submit function in an entirely different way? Thanks for any insight here.

$(document).ready(function() {
var infoForm = $('.form form');
var formSuccessMsg = $('p.success');
var formErrorMsg = $('p.error');

infoForm.submit(function() {
    // var url = $(this).attr('action');
    var url = $(this).attr('action') + '?showtemplate=false';
    var emailInput = $('.form input[type=text]').val();
    var data = $(this).serialize();

    if( emailInput.length === 0 || emailInput == '' || !isValidEmailAddress(emailInput) ) {
        formErrorMsg.show();
        return false;
    } else {
        $.post(url, data, function(data, textStatus, jqXHR) {
            // alert('post came back');
            infoForm.hide();
            formErrorMsg.hide();
            formSuccessMsg.show();
            console.log(emailInput);
        });
        return false;
    }
});
});

Update: And here is the markup (form code is generated by a CMS):

<div class="form">
   <div class="form-response">
      <p class="success">Thank you!</p>
      <p class="error">Please enter a valid email address</p>
   </div>
   <form id="mc2e7cmoduleform_1" method="post" action="post" enctype="multipart/form-data">
      <div class="info-packet-form">
         <div class="required"><input type="text" name="mc2e7cfbrp__35" value="" size="25" maxlength="80"   id="fbrp__35" /></div>
         <div class="submit"><input name="mc2e7cfbrp_submit" id="mc2e7cfbrp_submit" value="Submit" type="submit" class="fbsubmit"   /></div>
      </div>
   </form>
</div>

In addition, you should share your HTML as well. It's hard to guess your code structure... — MrUpsidown
– MrUpsidown, Commented Feb 15, 2018 at 17:39
The above will work. It will find your input value from $(this) form (not the other one). Alternatively $('input[type=text]', $(this)).val() should work too. — MrUpsidown
– MrUpsidown, Commented Feb 15, 2018 at 18:02
var emailInput = $(this).find('input[type=text]').val(); instead of var emailInput = $('.form input[type=text]').val(); will select the input in the current submitted form. If you want to select this specific form to hide, inside your submit callback, select the current form var currentInfoForm = $(this); before doing the $.post call. Then in your $.post callback do currentInfoForm.hide() — sfscs
– sfscs, Commented Feb 15, 2018 at 18:03

sfscs · Accepted Answer · 2019-05-30 21:18:36Z

2

$(document).ready(function() {
    var infoForm = $('.form form');

    infoForm.submit(function() {
        // create a var to reference this specific form
        var $thisForm = $(this);

        // assuming you want to only show the messages nearest to your form, 
        // you can select the parent div and find the response divs in there too.
        // create a reference to the specific parent div (div class="form") 
        var $parent = $thisForm.parent();

        // these will reference the specific fields specific to this form
        var formSuccessMsg = $parent.find('p.success');
        var formErrorMsg = $parent.find('p.error');

        var url = $thisForm.attr('action') + '?showtemplate=false';
        var emailInput = $thisForm.find('input[type=text]').val();

        if( emailInput.length === 0 || emailInput == '' || !isValidEmailAddress(emailInput) ) {
            formErrorMsg.show();
            return false;
        } else {
            $.post(url, $thisForm.serialize(), function(data, textStatus, jqXHR) {
                // alert('post came back');
                $thisForm.hide();
                formErrorMsg.hide();
                formSuccessMsg.show();
                console.log(emailInput);
            });
            return false;
        }
    });
});

edited May 30, 2019 at 21:18

answered Feb 15, 2018 at 18:16

sfscs

5354 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sfscs Over a year ago

glad it worked. I know the woes of two forms on one page.

Collectives™ on Stack Overflow

jQuery: Submit function for two identical forms on same page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related