由于按钮的利益冲突,表单不会提交

Form won't submit due to button's conflicting interests

本文关键字:表单 提交 利益冲突 于按钮 按钮      更新时间:2023-09-26

我的网站有一个简单的表单,与MailChimp链接。问题是表单的提交按钮具有冲突的利益,具体来说,有javascript电子邮件字段验证代码要求按钮在按钮代码中写入type="submit"。但是如果我包含type=submit,它会阻止我的表单提交给MailChimp。

这是 2 种形式的按钮代码。第一个是允许javascript错误验证工作但提交到MailChimp不起作用的形式(注意类型)

<button class='buttonmain' type="submit" >Submit Form</button>

第二个表单没有type="submit",所以js验证不起作用,但它会提交给MailChimp:

<button class='buttonmain'>Submit Form</button>

这是完整表格

<form id="form-signup_v1"
      name="form-signup_v1"
      method="POST"
      action="http://mysite.us10.list-manage.com/subscribe/post"
    >
    <!-- MailChimp Code -->
<input type="hidden" name="u" value="g02362223cdaf329adf5">
<input type="hidden" name="id" value="32da65235dba0">
      <div class="errorstyle">
    <div class="field">
        <div class="ui left labeled input">
            <input id="MERGE0"
                   name="MERGE0"
                   placeholder="My Email Address"
                   type="text"
                   data-validation="[EMAIL]">
            <div class="ui corner label">
                <i class="asterisk icon">*</i>
            </div>
        </div>
    </div>
</div>

<button class='buttonmain' type="submit" >Submit</button>

</form>

下面是用于验证电子邮件字段的脚本。注意它是如何调用"提交"的。

<script>
    $('#form-signup_v1').validate({
        submit: {
            settings: {
                inputContainer: '.field'
            },
            callback: {
                onBeforeSubmit: function (node) {
                    myBeforeSubmitFunction(':D', ':)', node);
                },
                onSubmit: function (node) {
                    console.log('#' + node.id + ' has a submit override.');
                    //node.submit();
                }
            }
        },
        debug: true
    });
    function myBeforeSubmitFunction(a, b, node) {
        console.log(a, b);
        $(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
        $(node).append('<div class="ui active loader"></div>');
    }
    $('#prefill-signup_v1').on('click', function () {
        var form = $(this).closest('form');
        form.find('#signup_v1-name').val('John Doe');
        form.find('#signup_v1-username').val('RocketJoe');
        form.find('#signup_v1-password').val('test123');
        form.find('#signup_v1-password-confirm').val('test123');
        form.find('#signup_v1-email').val('test@test.test');
        form.find('#signup_v1-email-confirm').val('test@test.test');
    });
</script> 

如何组合我在开头发布的 2 个按钮代码表单,以便表单使用 js 验证并提交给 MC?

非常感谢!

我自己做了以下事情解决了它:

更改脚本以包括:

 function myBeforeSubmitFunction(a, b, node) {
   document.getElementById("form-signup_v1").submit();