本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

提交并打开成功信息弹出框

发布于2024-11-25 20:10     阅读(711)     评论(0)     点赞(20)     收藏(5)


我是 Javascript 新手,因此我尝试提交并打开成功消息弹出框,目前数据发布到 ajax 正在工作,然后我需要打开一个带有复选框值的成功消息。提交成功后,我该如何让模型弹出带有复选框值的消息?

document.addEventListener("DOMContentLoaded", function(e) {
  var a = document.getElementById("alecaddd-testimonial-form");
  a.addEventListener("submit", function(e) {
    e.preventDefault(), o();
    var r = {
      name: a.querySelector('[name="name"]').value,
      email: a.querySelector('[name="email"]').value,
      message: a.querySelector('[name="message"]').value,
      nonce: a.querySelector('[name="nonce"]').value
    };
    if (r.name)
      if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
        if (r.message) {
          var t = a.dataset.url,
            s = new URLSearchParams(new FormData(a));
          a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
            method: "POST",
            body: s

          }).then(function(e) {
            return e.json()
          }).catch(function(e) {
            o(), a.querySelector(".js-form-error").classList.add("show")
          }).then(function(e) {
            o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
          })
        } else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
    else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
    else a.querySelector('[data-error="invalidName"]').classList.add("show")
  })
})
<div class="package-container">
  <form id="alecaddd-testimonial-form" class="zon-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
    <div id="clmn3">

      <div class="cnt">
        <div class="row" style="background: url(<?php print $picture; ?>);">
          <h3>
            <?php echo esc_attr( $budget ); ?>
          </h3>
          <label class="zon-container"><p>2 Nights 3 Days: 3399</p>
      <input class="chb" type="checkbox" name="package[]" value="3000" checked="checked">
      <span class="checkmark"></span>
    </label>
          <label class="zon-container"><p>3 Nights 4 Days : 4399</p>
      <input  class="chb"  type="checkbox" name="package[]" value="4000">
      <span class="checkmark"></span>
    </label>
          <label class="zon-container"><p>4 Nights 5 Days : 5399</p>
      <input class="chb"  type="checkbox" name="package[]" value="5000">
      <span class="checkmark"></span>
    </label>
        </div>
      </div>



      <div class="zon-input-fields">
        <div class="field-container">
          <input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
          <small class="field-msg error" data-error="invalidName">Your Name is Required</small>
        </div>

        <div class="field-container">
          <input type="text" class="field-input" placeholder="Adult" id="adult" name="adult" required>
          <small class="field-msg error" data-error="invalidName">Your Name is Required</small>
        </div>

        <div class="field-container">
          <input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
          <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
        </div>

        <div class="field-container">
          <input type="text" class="field-input" placeholder="infant" id="infant" name="message" required>
          <small class="field-msg error" data-error="invalidName">Your Name is Required</small>
        </div>

        <div class="field-container">
          <input type="date" class="field-input" placeholder="date" id="date" name="date" required>
          <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
        </div>


        <div class="field-container">
          <input type="phone" class="field-input" placeholder="phone" id="phone" name="phone" required>
          <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
        </div>

        <div class="field-container">
          <input type="price" class="field-input" placeholder="price" id="price" name="price" required>
          <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
        </div>



        <div class="field-container">

          <input type="submit" name="submit" class='btn'>
        </div>

        <div class="field-container">
          <small class="field-msg js-form-submission">Submission in process, please wait&hellip;</small>
          <small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
          <small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
          <input type="hidden" name="action" value="submit_testimonial">
          <input type="hidden" name="nonce" value="<?php echo wp_create_nonce(" testimonial-nonce ") ?>"> </form>
  </div>
  </div>
  </div>

一如既往,我们非常感谢任何帮助。


解决方案


移动

a.querySelector(".js-form-submission").classList.add("show")

return e.json()



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/537208/a26940a79e707b704637/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

20 0
收藏该文
已收藏

评论内容:(最多支持255个字符)