Fatal编程技术网
  • javascript/
  • Javascript 使用Wordpress循环的多个Ajax表单

Javascript 使用Wordpress循环的多个Ajax表单

javascript ajax wordpress loops

Javascript 使用Wordpress循环的多个Ajax表单,javascript,ajax,wordpress,loops,ajax-forms,Javascript,Ajax,Wordpress,Loops,Ajax Forms,我试图让多个Ajax表单在Wordpress循环中工作。我给每个表单中的表单和字段指定了一个唯一的ID。我试图在javascript中引用每个表单，以便提交AJAX表单，但是页面会刷新，就像它试图使用php提交表单一样。我不是专家，也不知道这是怎么回事。该脚本适用于单个表单，因为我可以直接在javascript中引用实际的表单id。我希望能够在循环中的每个帖子上提交表单，而无需刷新页面。提前感谢你的帮助 包含循环的模板中的Javascript。 <script> var form_i

我试图让多个Ajax表单在Wordpress循环中工作。我给每个表单中的表单和字段指定了一个唯一的ID。我试图在javascript中引用每个表单，以便提交AJAX表单，但是页面会刷新，就像它试图使用php提交表单一样。我不是专家，也不知道这是怎么回事。该脚本适用于单个表单，因为我可以直接在javascript中引用实际的表单id。我希望能够在循环中的每个帖子上提交表单，而无需刷新页面。提前感谢你的帮助

包含循环的模板中的Javascript。

<script>
var form_id = $(this).closest("form").attr('id');
form_id.validate({
    highlight: function(element, errorClass, validClass) {
        $(element).parent('label').addClass('errors');
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('label').removeClass('errors');
    },
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: '<?php echo admin_url(); ?>admin-ajax.php',
            data: form_id.serialize(),
            beforeSend: function() {
                $("input[name=submit],button", form).attr('disabled', 'disabled');
                $("div.loading", form).show();
                $("div.status", form).hide();
            },
            success: function(result) {
                if (result == 1 || result == '1') {
                    $("div.loading", form).hide();
                    $("div.thanks").slideDown();
                    document.forms["leadForm"].reset();
                } else {
                    $("div.loading", form).hide();
                    $("input[name=submit],button", form).removeAttr('disabled');
                    $("div.status", form).html(result).show();
                }
            }
        });
    }
});
</script>

<?php $pid = get_the_ID(); ?>
<form name="leadForm" method="post" id="leadForm-<?php echo $pid; ?>" action="#">
<div class="grid-x grid-padding-x">
    <div class="medium-12 cell">
        <textarea tabindex="2" rows="6" cols="30" maxlength="350" title="Please enter a message" name="message" id="message-<?php echo $pid; ?>" placeholder="Your message" ></textarea>
    </div>
    <div class="medium-6 cell">
        <label>Full Name
        <input type="text" placeholder="Full Name" class="required" autocomplete="off" name="fullname" id="fullname-<?php echo $pid; ?>"  >
        </label>
    </div>
    <div class="medium-6 cell">
        <label>Email Address
        <input type="email" placeholder="Email Address" class="required" autocomplete="off" name="email" id="email-<?php echo $pid; ?>" >
        </label>
    </div>
    <div class="medium-12 cell">
        <label>Phone Number
        <input type="tel" placeholder="Phone Number" class="required" autocomplete="off" name="phone" id="phone-<?php echo $pid; ?>" >
        </label>
    </div>
    <div class="medium-12 cell">
        <button class="button submit radius expanded" type="submit" >Send</button>
        <div class="loading" style="display:none;" >
            <img src="<?php echo get_template_directory_uri(); ?>/images/progress.gif" alt="Loading..." />
        </div>
        <div class="status callout radius alert small" style="display:none; text-align:center;">There was an error sending your message.
        </div>
        <div class="thanks callout radius success small" style="display:none; text-align:center;">Thank you.
        </div>
        <input type="hidden" name="current_url" value="<?php echo the_permalink(); ?>" class="button" />
        <input type="hidden" name="current_title" value="<?php echo the_title(); ?>"     class="button" />
    </div>
</div>
</form>


var form_id=$（this）.closest（“form”）.attr（“id”）；
表单_id.validate({
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parent（'label'）.addClass（'errors'）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parent（'label'）.removeClass（'errors'）；
},
submitHandler:函数（表单）{
$.ajax({
类型：“POST”，
url:'admin ajax.php'，
数据：form_id.serialize（），
beforeSend:function（）{
$（“输入[name=submit]，按钮”，表单）.attr（'disabled'，'disabled'）；
$（“div.loading”，form.show（）；
$（“div.status”，form.hide（）；
},
成功：功能（结果）{
如果（结果==1 | |结果=='1'）{
$（“div.loading”，form.hide（）；
$（“谢谢”）.slideDown（）；
document.forms[“leadForm”].reset（）；
}否则{
$（“div.loading”，form.hide（）；
$（“输入[name=submit]，按钮”，表单）.removeAttr（'disabled'）；
$（“div.status”，form）.html（result.show（）；
}
}
});
}
});
循环中的表单。

<script>
var form_id = $(this).closest("form").attr('id');
form_id.validate({
    highlight: function(element, errorClass, validClass) {
        $(element).parent('label').addClass('errors');
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('label').removeClass('errors');
    },
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: '<?php echo admin_url(); ?>admin-ajax.php',
            data: form_id.serialize(),
            beforeSend: function() {
                $("input[name=submit],button", form).attr('disabled', 'disabled');
                $("div.loading", form).show();
                $("div.status", form).hide();
            },
            success: function(result) {
                if (result == 1 || result == '1') {
                    $("div.loading", form).hide();
                    $("div.thanks").slideDown();
                    document.forms["leadForm"].reset();
                } else {
                    $("div.loading", form).hide();
                    $("input[name=submit],button", form).removeAttr('disabled');
                    $("div.status", form).html(result).show();
                }
            }
        });
    }
});
</script>

<?php $pid = get_the_ID(); ?>
<form name="leadForm" method="post" id="leadForm-<?php echo $pid; ?>" action="#">
<div class="grid-x grid-padding-x">
    <div class="medium-12 cell">
        <textarea tabindex="2" rows="6" cols="30" maxlength="350" title="Please enter a message" name="message" id="message-<?php echo $pid; ?>" placeholder="Your message" ></textarea>
    </div>
    <div class="medium-6 cell">
        <label>Full Name
        <input type="text" placeholder="Full Name" class="required" autocomplete="off" name="fullname" id="fullname-<?php echo $pid; ?>"  >
        </label>
    </div>
    <div class="medium-6 cell">
        <label>Email Address
        <input type="email" placeholder="Email Address" class="required" autocomplete="off" name="email" id="email-<?php echo $pid; ?>" >
        </label>
    </div>
    <div class="medium-12 cell">
        <label>Phone Number
        <input type="tel" placeholder="Phone Number" class="required" autocomplete="off" name="phone" id="phone-<?php echo $pid; ?>" >
        </label>
    </div>
    <div class="medium-12 cell">
        <button class="button submit radius expanded" type="submit" >Send</button>
        <div class="loading" style="display:none;" >
            <img src="<?php echo get_template_directory_uri(); ?>/images/progress.gif" alt="Loading..." />
        </div>
        <div class="status callout radius alert small" style="display:none; text-align:center;">There was an error sending your message.
        </div>
        <div class="thanks callout radius success small" style="display:none; text-align:center;">Thank you.
        </div>
        <input type="hidden" name="current_url" value="<?php echo the_permalink(); ?>" class="button" />
        <input type="hidden" name="current_title" value="<?php echo the_title(); ?>"     class="button" />
    </div>
</div>
</form>



很难复制WP在代码中可能存在的所有问题。但这将是其中之一：


  • 此
    在html对象引用之外使用时，指的是
    窗口
    .closest
    在dom树中向上移动，而不是向下移动，因此它不会在窗口对象中找到表单。通过
    $（'form'）.attr（'id'）
    可以实现与您想要实现的效果相同的效果，即返回找到的第一个表单的id

  • 在使用之前，您需要确保定义了
    $
    ，这是使用附带版本的jquery的一个难题，您可以用
    jquery
    替换
    $
    • 

  • 我看不到任何证据表明jQuery在您使用它时已加载，您也在使用另一个库，
    .validate
    ，使用
    $（document.ready（）
    • 

    另一方面，学习如何使用控制台（例如在chrome中），您可以在此处输出js以测试变量，代码中的任何错误也将在此处输出
     @cale_b我道歉！我希望代码更容易阅读。因此，我与您分享这段代码是为了帮助您进行编程，而不是抱怨：但您确实明白这不是正确的缩进，对吗？我已经编辑了初始javascript块，向您展示了它应该是什么样子（或多或少）。如果您没有在自己的代码中这样做，我强烈建议您这样做-这有助于更快地识别问题。谢谢@cale_b我感谢您的反馈。我会确保我的缩进工作。对上述问题的解决方案有何意见？