使用jQuery在沒有頁面重新加載的情況下提交表單-不起作用-有解無憂

我正在使用 jQuery 提交表單，因為我不想重新加載頁面。只有驗證有效，但表單提交無效。頁面仍然重新加載，沒有成功函式，它像 GET 方法一樣向 URL 添加資料。我就是想不通 jQuery 表單提交代碼有什么問題。

// Form Validation - WORKS

$(document).ready(function() {

  $("form").validate({

    errorPlacement: function(error, element) {
      $(element)
        .closest("form")
        .find("label[for='"   element.attr("id")   "'] > span")
        .append(error);
    },

    errorElement: "span",

    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      subject: "required",
      msg: "required",
      checkbox: "required",
    },

    messages: {
      firstname: "*required",
      lastname: "*required",
      email: {
        required: "*required",
        email: "*invalid email address"
      },
      subject: "*required",
      msg: "*required",
      checkbox: "*required",
    },

    submitHandler: function(form) {
      form.submit();
    }
  });

});


// Form Submit - DOESN'T WORK

$('form').on('submit', function(e) {

  e.preventDefault();

  $.ajax({
    type: 'post',
    url: 'http://127.0.0.1:5500/php/base.php',
    data: $('form').serialize(),
    success: function() {
      alert('Form was submitted.');
      $('.send').addClass('send-up');
      $('.sent').addClass('sent-up');

      setTimeout(function() {
        $('.send').removeClass('send-up');
        $('.sent').removeClass('sent-up');
      }, 2000);
    }
  });

  return false;

});

.form {
  text-align: right;
  font-family: sans-serif;
  background: #000;
  color: #FFF;
  padding: 50px;
}

form {
  text-align: left;
}

form li {
  position: relative;
  margin-bottom: 55px;
  list-style-type: none;
}

.li-firstname,
.li-lastname {
  width: 44%;
  display: inline-block;
}

.li-firstname {
  margin-right: 68px;
}

input,
textarea {
  background: transparent;
  border: 0;
  outline: 0;
  border-bottom: 2px solid #FFF;
  display: block;
  color: #FFF;
  width: 100%;
  padding: 15px 0 15px 30px;
  box-sizing: border-box;
  transition: border-bottom 0.3s ease-in-out;
  resize: none;
}

.label {
  position: absolute;
  right: 0;
  margin-top: 10px;
}

form i {
  position: absolute;
  bottom: 16.5px;
  transition: color 0.3s ease-in-out;
}

.submit {
  outline: 0;
  border: 0;
  color: #FFF;
  padding: 0;
  width: 243px;
  height: 60px;
  cursor: pointer;
  position: relative;
  background: #704DFA;
  border-radius: 50px;
  text-transform: uppercase;
}

.submit span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.7s ease-out;
}

.send-up {
  margin-top: -30px;
  opacity: 0;
}

.sent {
  margin-top: 30px;
  opacity: 0;
}

.sent-up {
  margin-top: 0;
  opacity: 1;
}

input:focus,
textarea:focus {
  border-bottom: 2px solid #704DFA;
}

input:focus i,
textarea:focus i {
  color: #704DFA;
}

span.error {
  font-family: sans-serif;
  font-style: italic;
  font-size: 13px;
  color: #704DFA;
  margin-right: 10px;
}

span.error:not(#checkbox-error) {
  float: left;
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>

<div class="form">
  <form id="form">
    <ul>
      <li class="li-firstname">
        <input type="text" name="firstname" id="firstname" required>
        <i class="far fa-user"></i>
        <label for="firstname" class="label"><span>First Name</span></label>
      </li>
      <li class="li-lastname">
        <input type="text" name="lastname" id="lastname" required>
        <label for="lastname" class="label"><span>Last Name</span></label>
      </li>
      <li class="li-email">
        <input type="email" name="email" id="email" required>
        <i class="far fa-envelope"></i>
        <label for="email" class="label"><span>Email Address</span></label>
      </li>
      <li class="li-subject">
        <input type="text" name="subject" id="subject" required>
        <i class="far fa-question-circle"></i>
        <label for="subject" class="label"><span>Subject</span></label>
      </li>
      <li class="li-message">
        <textarea name="msg" id="msg" wrap="hard" rows="5" maxlength="2000" required></textarea>
        <i class="far fa-comment-dots"></i>
        <label for="msg" class="label"><span>Job Proposal</span></label>
      </li>
      <li class="li-checkbox">
        <input type="checkbox" name="checkbox" id="checkbox" required>
        <label for="checkbox">
You want to work with me specifically because you feel my style fits perfectly to your business.
       </label>
      </li>
    </ul>
  </form>

  <button class="button submit" type="submit" form="form">
     <span class="send">Submit</span>
     <span class="sent">Sent</span>
  </button>
</div>

uj5u.com熱心網友回復：

我已經設法自己解決了這個問題。作為一個完整的 JS 初學者，我有點失望沒有人指出這么簡單的解決方案。我只需要將提交功能移動到驗證功能中。現在一切正常。

// Form Validation & Submission

$(document).ready(function () {

  $("form").validate({

    errorPlacement: function (error, element) {
      $(element)
        .closest("form")
        .find("label[for='"   element.attr("id")   "'] > span")
        .append(error);
    },

    errorElement: "span",

    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      subject: "required",
      msg: "required",
      checkbox: "required",
    },

    messages: {
      firstname: "*required",
      lastname: "*required",
      email: {
        required: "*required",
        email: "*invalid email address"
      },
      subject: "*required",
      msg: "*required",
      checkbox: "*required",
    },

    submitHandler: function () {

      var that = $('form'),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

      that.find('[name]').each(function (index, value) {
        var that = $(this),
          name = that.attr('name'),
          value = that.val();

        data[name] = value;
      });

      $.ajax({

        url: url,
        type: type,
        data: data,
        success: function (response) {

          console.log(response);
         
          function resetForm () {
            $('form')[0].reset();
          };

          resetForm();

          $('.send').addClass('send-up');
          $('.sent').addClass('sent-up');

          setTimeout(function () {
            $('.send').removeClass('send-up');
            $('.sent').removeClass('sent-up');
          }, 3000);

        }
      });

      return false;

    }
  });

});

.form {
  text-align: right;
  font-family: sans-serif;
  background: #000;
  color: #FFF;
  padding: 50px;
}

form {
  text-align: left;
}

form li {
  position: relative;
  margin-bottom: 55px;
  list-style-type: none;
}

.li-firstname,
.li-lastname {
  width: 44%;
  display: inline-block;
}

.li-firstname {
  margin-right: 68px;
}

input,
textarea {
  background: transparent;
  border: 0;
  outline: 0;
  border-bottom: 2px solid #FFF;
  display: block;
  color: #FFF;
  width: 100%;
  padding: 15px 0 15px 30px;
  box-sizing: border-box;
  transition: border-bottom 0.3s ease-in-out;
  resize: none;
}

.label {
  position: absolute;
  right: 0;
  margin-top: 10px;
}

form i {
  position: absolute;
  bottom: 16.5px;
  transition: color 0.3s ease-in-out;
}

.submit {
  outline: 0;
  border: 0;
  color: #FFF;
  padding: 0;
  width: 243px;
  height: 60px;
  cursor: pointer;
  position: relative;
  background: #704DFA;
  border-radius: 50px;
  text-transform: uppercase;
}

.submit span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.7s ease-out;
}

.send-up {
  margin-top: -30px;
  opacity: 0;
}

.sent {
  margin-top: 30px;
  opacity: 0;
}

.sent-up {
  margin-top: 0;
  opacity: 1;
}

input:focus,
textarea:focus {
  border-bottom: 2px solid #704DFA;
}

input:focus i,
textarea:focus i {
  color: #704DFA;
}

span.error {
  font-family: sans-serif;
  font-style: italic;
  font-size: 13px;
  color: #704DFA;
  margin-right: 10px;
}

span.error:not(#checkbox-error) {
  float: left;
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>

<div class="form">
  <form id="form" action="php/base.php" method="post">
    <ul>
      <li class="li-firstname">
        <input type="text" name="firstname" id="firstname" required>
        <i class="far fa-user"></i>
        <label for="firstname" class="label"><span>First Name</span></label>
      </li>
      <li class="li-lastname">
        <input type="text" name="lastname" id="lastname" required>
        <label for="lastname" class="label"><span>Last Name</span></label>
      </li>
      <li class="li-email">
        <input type="email" name="email" id="email" required>
        <i class="far fa-envelope"></i>
        <label for="email" class="label"><span>Email Address</span></label>
      </li>
      <li class="li-subject">
        <input type="text" name="subject" id="subject" required>
        <i class="far fa-question-circle"></i>
        <label for="subject" class="label"><span>Subject</span></label>
      </li>
      <li class="li-message">
        <textarea name="msg" id="msg" wrap="hard" rows="5" maxlength="2000" required></textarea>
        <i class="far fa-comment-dots"></i>
        <label for="msg" class="label"><span>Job Proposal</span></label>
      </li>
      <li class="li-checkbox">
        <input type="checkbox" name="checkbox" id="checkbox" required>
        <label for="checkbox">
You want to work with me specifically because you feel my style fits perfectly to your business.
       </label>
      </li>
    </ul>
  </form>

  <button class="button submit" type="submit" form="form">
     <span class="send">Submit</span>
     <span class="sent">Sent</span>
  </button>
</div>

uj5u.com熱心網友回復：

你的ajax請求應該是這樣的

// try giving an id here
  $('#form').submit(function(){
     
        $.ajax({
            type: 'POST',
            url: 'submit.php', 
            data: $(this).serialize()
        })
        .done(function(data){
             
            // show the response
            $('#result').html('sent');
            document.getElementById("message").value = null;
             
        })
        .fail(function() {
         
            // just in case posting your form failed
            alert( "Posting failed." );
             
        });
 
        // to prevent refreshing the whole page page
        return false;
 
    });

我希望它會起作用。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/397096.html

標籤：javascript html 查询形式提交

上一篇：需要將輸入過濾到表<td>ContentEditable中只有兩位小數

下一篇：SimpleDateFormat上周錯誤的一年中的一周