簡體   English   中英

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

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

首先,我意識到這不是一個最佳解決方案,但實際的生產環境是醉酒狂歡的產物,涉及Magento和許多廉價插件,因此不要對我太苛刻。 我對別人的混亂不負責任。

我正在嘗試使用jQuery從一頁提交多種表單。 在IE和FF中工作正常。 Page有四種形式,我在JS中循環瀏覽它們以查看是否選中了它們的復選框,然后使用.each().submit() .each()提交。 在Chrome中,直到完全退出該函數后, jQuery(this).submit()才會啟動,然后它僅實際提交最后一個表單。

使用jQuery 1.8.1。 工作樣機在這里

代碼如下:

<!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瀏覽器不像其他瀏覽器那樣對待target =“ _ blank”。 嘗試_tab,或動態更改它們$(this).attr('target', '_'+$(this).attr('id'));

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM