简体   繁体   English

jQuery,使用.each()以多种形式提交()

[英]jQuery, submit() with multiple forms using .each()

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. 首先,我意识到这不是一个最佳解决方案,但实际的生产环境是醉酒狂欢的产物,涉及Magento和许多廉价插件,因此不要对我太苛刻。 I can't be held responsible for other peoples' messes. 我对别人的混乱不负责任。

I'm trying to submit multiple forms from one page using jQuery. 我正在尝试使用jQuery从一页提交多种表单。 It works fine in IE and FF. 在IE和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() . Page有四种形式,我在JS中循环浏览它们以查看是否选中了它们的复选框,然后使用.each().submit() .each()提交。 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. 在Chrome中,直到完全退出该函数后, jQuery(this).submit()才会启动,然后它仅实际提交最后一个表单。

Uses jQuery 1.8.1. 使用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>

Chrome doesn't treat target="_blank" like the other browsers. Chrome浏览器不像其他浏览器那样对待target =“ _ blank”。 Try _tab, or dynamically changing them $(this).attr('target', '_'+$(this).attr('id')); 尝试_tab,或动态更改它们$(this).attr('target', '_'+$(this).attr('id'));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM