Ajax回调后表单提交

时间:2016-04-04 15:49:43

标签: jquery ajax

我试图在ajax成功函数之后提交表单#mc-embedded-subscribe-form但似乎没有工作。当我提醒" OK"功能成功后它工作正常,但当我尝试触发de submit功能时它没有。谢谢!

<form action="//google.us12.mailchimp.com/subscribe/" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<input type="email" id="mce-EMAIL" name="EMAIL" value="" placeholder="Email..."/>

</form>
<div class="email_submit" id="btn_email" style="">Subscribe</div>

AJAX

$("#btn_email").click(function() {

$('#btn_email').hide();
$('#btn_email_load').show();

var email = $('#mce-EMAIL').val();

$.ajax({

        type: "POST",
        url: "classes/_mailchimp.php",
        data:{ email: email, },

        cache: false,

        success:function(data){

        if(data == 'ok'){ 

        $("form#mc-embedded-subscribe-form").submit();
        //alert("OK")

        return false;
        }

        alert(data);
        return false;
}
});

2 个答案:

答案 0 :(得分:1)

我终于使用&#39; async:false,&#39;找到了这个问题的解决方案。进入AJAX调用。感谢。

$.ajax({

        type: "POST",
        url: "classes/_mailchimp.php",
        data:{ email: email, },
        async: false, //solution
        cache: false,

        success:function(data){

        if(data == 'ok'){ 

        $("form#mc-embedded-subscribe-form").submit();
        //alert("OK")

        return false;
        }

        alert(data);
        return false;
}
});

答案 1 :(得分:0)

Well. First try to remove your method and action attributtes in the form because are not neccesary if you are using ajax already.

  1. Rewrite the form attributes and put a real input button like:

    <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
    <!--We remove too the value attribute because is innecessary-->
    <input type="email" id="mce-EMAIL" name="EMAIL" placeholder="Email..."/>
    
    <input type="button" class="email_submit" id="btn_email" value="Suscribe"> </form>
    
        <!--We are creating another div that it will show when #btn_email has been listened-->  <div id="#btn_email_load" style="display:none">
    
  2. Please watch that I'm putting the button within the form and not out there. So, the next is your ajax code. Changes and erros are commented

    $("#btn_email").click(function() {
    
        $('#btn_email').hide();
        $('#btn_email_load').show();
    
        var email = $('#mce-EMAIL').val();
        $values = 'mail='+email;
            $.ajax({
                    type: "POST",
                    url: "classes/_mailchimp.php",
                    //Save all the data in a variable and not an object, if you want to save it with an object, use the short .post() ajax method to do it. In this case, we gonna save the data in a variable before declared as $values
                    data:$values,
                    cache: false,
    
                    success:function(data){
    
                    if (data == 'ok'){ 
                        alert('ok')
                    }
            }); //close your ajax petition
    });