javascript - 提交并打开成功消息弹框

Question

我是 Javascript 新手，所以我尝试提交并打开 Success Messege 弹出框，当前发送到 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>

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

Answer 1

移动

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

之前

return e.json()