javascript - 提交ajax表单

Question

我需要提交此表格才能使用。这是我的代码，但它不想工作。必须使用此链接发送请求，例如https://www.eymedic.form.php。我怎样才能让它正常工作？

<form method="POST" id="form" action="#" class="form">     
      <div class="field">
        <label for="input-kitId" class="label is-size-7 has-text-weight-light has-text-left">Order ID</label>
        <div class="field"><div class="control is-expanded">
          <input type="number" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID">
          </div>
        </div>
      </div>
      
      <div class="field">
        <label for="input-firstName" class="label is-size-7 has-text-weight-light has-text-left">Email</label>
        <div class="field"><div class="control is-expanded">
          <input type="email" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email">
          </div>
        </div>
      </div>
      
      <button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
    </form>
    
    
  </div>
</div>
    
   
<script>
  
$( "submit" ).click(function() {
      if(form.val()) {
            var msg = $("#form").serialize();
            $.ajax({
              type: 'POST',
              url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
              data: msg,
              success: function(data) {
                console.log(data);
                if (data.status === 'OK') {window.location.href='second_page.html'}
                else {alert(data.message)};
              }
            });
        };
    });
  
</script>

标签： javascriptajaxliquid

Answer 1

您没有提交元素，请改用表单元素，并且应该阻止提交操作。

$( "form" ).click(function(e) {
  e.preventDefault()
  var msg = $("#form").serialize();
  $.ajax({
    type: 'POST',
    url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
    data: msg,
    success: function(data) {
      console.log(data);
      if (data.status === 'OK') {window.location.href='second_page.html'}
      else {alert(data.message)};
    }
  });
});