我是编码方面的新手,但我尝试通过使用jquery向div容器中添加一个类来提交表单后向您显示订阅消息表示感谢,该类保存该表单以使用display:none将其隐藏谢谢你的信息。我正在使用以下代码:

$('#mc-embedded-subscribe-form').submit(function(){
    var element = document.getElementById("newsletterform");
    element.classList.add("success");
    element.innerHTML += '<div class="thanks">Thanks for Subscribing!</div>';
    $('#mc-embedded-subscribe-form').submit();
});


这是HTML

<html>
<head>
<style>
    .success{
        group_input{
            display:none;
        }
    }
</style>
</head>
<body>

    <iframe name="votar" style="display:none;"></iframe>
    <div id="newsletterform">
    <form action="{{ settings.mailchimp_form_action }}" method="post" name="mc-embedded-subscribe-form" target="votar">

    <div class="group_input">
      <input type="text" value="" name="COMPANY" class="" id="mce-COMPANY">
      <input type="email" name="EMAIL" placeholder="{{ settings.news_input }}" /><button  class="btn" type="submit">{{settings.news_actiontext}}</button>
    </div>
    </form>
    </div>

</body>


这将隐藏表单并显示“谢谢”消息,但不会提交电子邮件地址。就像电子邮件在发布到操作网址之前被剥离了一样。

我还尝试将$('#mc-embedded-subscribe-form').submit();移动到var声明上方,并使用电子邮件地址提交表单,但不显示“谢谢”消息。

我究竟做错了什么?

谢谢!

最佳答案

尝试通过ajax提交表单:

$("form#mc-embedded-subscribe-form").submit(function(e){
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: $(this).serialize(), // serializes the form's elements.
        success: function(data)
        {
            var element = document.getElementById("newsletterform");
            element.classList.add("success");
            element.innerHTML += '<div class="thanks">Thanks for Subscribing!</div>';
        }
    });
});

关于jquery - jQuery事件附加到提交按钮时,表单未发布,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56591765/

10-12 12:56
查看更多