jQuery, submit() with multiple forms using .each()

Question

First off, I realize this is not an optimal solution, but the actual production environment is a product of a drunken orgy involving Magento and a lot of cheap plugins, so don't judge me too harshly. I can't be held responsible for other peoples' messes.

I'm trying to submit multiple forms from one page using jQuery. It works fine in IE and FF. Page has four forms, which I loop through them in JS to see if their checkbox is checked and then submit them one by one, using .each() and .submit() . In Chrome, jQuery(this).submit() does not fire until after you have completely exited the function, and then it only actually submits the last form.

Uses jQuery 1.8.1. The working mockup is here

The code follows:

<!DOCTYPE html>
<html>
    <head>
        <title>asdfad</title>
        <script type="text/javascript" src=http://code.jquery.com/jquery-1.8.1.min.js"></script>
    </head>
    <body class=" listraknewsletter-index-index">

        <form id="form4" method="post" class="signup-form" 

action="http://www.example.com/action1" 
target="_blank">
            <input type="hidden" name="crvs" value="hiddenValue1"/>
<label for="checkbox">newsletter 1</label>            
<input name="checkbox" type="checkbox" 
class="signup-checkbox"  
name="sos-checkbox" />
        </form>
        <form id="form2" method="post" class="signup-form" 

action="http://www.example.com/action2" 
target="_blank">
            <input type="hidden" name="crvs" value="hiddenValue2"/>
<label for="checkbox">newsletter 2</label>            
            <input name="checkbox" type="checkbox" 
class="signup-checkbox"  
name="sos-checkbox" />
        </form>
        <form id="form3" method="post" class="signup-form" 

action="http://www.example.com/action3" 
target="_blank">
            <input type="hidden" name="crvs" value="hiddenValue3"/>
<label for="checkbox">newsletter 3</label>            
            <input name="checkbox" type="checkbox" 
class="signup-checkbox"  name="sos-checkbox" />
        </form>
        <form id="form1" method="post" class="signup-form" 

action="http://www.example.com/action4" 
target="_blank">
            <input type="hidden" name="crvs" value="hiddenValue4"/>
<label for="checkbox">newsletter 4</label>            
            <input name="checkbox" type="checkbox" 
class="signup-checkbox"  name="sos-checkbox" />
        </form>     

        <!-- Area for entering in information -->   

        <form method="post" action="/">         
        <label for="email">email</label>
                <input type="text" id = "nl_email" name="email" 
size="40" maxlength="100" value = ""/>
<label for="name">name</label>
            <input type="text" name="name" id = "nl_name" maxlength="50" size="40" value=""/>

            <input type="button" value="Subscribe" onclick="processSignups();" />
            <script type="text/javascript">
                // requires jQuery
                jQuery.noConflict();
                function processSignups() {
                    // make sure you have a valid email and name

                    // make sure email is at least not null
                    // this is not a pretty regex for sure lol,
                    // but tis' RFC 2822 valid                                  
                    var nl_email = jQuery('input#nl_email').val();
                    var re = new RegExp(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/);

                    if (re.test(nl_email) == false) {
                        alert('Please enter a valid email');
                        return false;
                    }

                    // name is not null
                    if (jQuery('input#nl_name').val() == '') {
                        alert('Please enter your name');
                        return false;
                    }

                    // make sure at least one checkbox is selected
                    var checkboxes = jQuery('input.signup-checkbox');
                    var atLeastOne = false;
                    jQuery(checkboxes).each(function() {
                        if (jQuery(this).is(':checked')) {
                            atLeastOne = true;
                        }
                    });
                    if (atLeastOne == false) {
                        alert('Please select at least one newsletter checkbox');
                        return false;
                    }

                    // select your forms by class
                    // var forms = jQuery('form.signup-form');
                    // for each form

                    var formIds = new Array();

                    jQuery('form.signup-form').each(function(index) {
                        // get the checkbox
                        var checkbox;
                        checkbox = jQuery(this).children('input.signup-checkbox');
                        // if it is checked
                        if (jQuery(checkbox).is(':checked')) {
                            // add a hidden field to the form to hold the email
                            jQuery(this).append('<input type="hidden" name="email" value="' + nl_email + '" />');
                            // and submit form
                            jQuery(this).submit();

                        }

                    });

                    // might as well clear the email and name inputs
                    jQuery('input#nl_name').val('');
                    jQuery('input#nl_email').val('');
                    // return false;
                }

            </script>

        </form>

    </body>
</html>

Answer 1

Chrome doesn't treat target="_blank" like the other browsers. Try _tab, or dynamically changing them $(this).attr('target', '_'+$(this).attr('id'));

jQuery, submit() with multiple forms using .each()

Question

1 answers

solution1
1 2013-06-11 20:31:57

jQuery, submit() with multiple forms using .each()

Question

1 answers

solution1 1 2013-06-11 20:31:57

solution1
1 2013-06-11 20:31:57