javascript - 为什么我的 javascript 表单没有提交？

Question

我正在创建一个表单，它通过 POST 方法将文本字段中包含的数据直接注入(inject)到 firebase。

这是 html 表单的代码:

<form>
  <h5>From:</h5>
      <div class="row">
        <div class="six columns">
          <label for="fromName">Name</label>
          <input class="u-full-width" placeholder="Full Name" id="fromName">
        </div>
        <div class="six columns">
          <label for="fromContactNo">Contact No.</label>
          <input class="u-full-width" placeholder="08xxx" id="fromContactNo">
        </div>
      </div>
      <label for="fromAddress">Address</label>
      <textarea class="u-full-width" placeholder="Full Address" id="fromAddress"></textarea>

      <!-- break -->

      <h5>To:</h5>
      <div class="row">
        <div class="six columns">
          <label for="toName">Name</label>
          <input class="u-full-width" placeholder="Full Name" id="toName">
        </div>
        <div class="six columns">
          <label for="toContactNo">Contact No.</label>
          <input class="u-full-width" placeholder="08xxx" id="toContactNo">
        </div>
      </div>
      <label for="toAddress">Address</label>
      <textarea class="u-full-width" placeholder="Full Address" id="toAddress"></textarea>

      <!-- break -->
      <h5>Delivery Details:</h5>
      <div class="row">
          <div class="u-full-width">
              <label for="itemDesc">Item description</label>
              <textarea class="u-full-width" placeholder="Item Description here" id="itemDesc"></textarea>
            </div>
        </div>

        <!-- break -->
        </br>
      <button class="button-primary" id="add-order">Send</button>
    </form>

而javascript函数如下:

$(document).ready(function(){
var $fromName = $('#fromName');
var $fromContactNo = $('#fromContactNo');
var $fromAddress = $('#fromAddress');
var $toName = $('#toName');
var $toContactNo = $('#toContactNo');
var $toAddress = $('#toAddress');
var $itemDesc = $('#itemDesc');
var $addOrder = $('#add-order');

$addOrder.on('click', function(){

    var newOrder = {
        "from": {
            "name": $fromName.val(),
            "phone_no": $fromContactNo.val(),
            "address": $fromAddress.val(),
        },
        "to": {
            "name": $toName.val(),
            "phone_no": $toContactNo.val(),
            "address": $toAddress.val(),
        },
        "item": $itemDesc.val(),
    };

    $.ajax({
      type: 'POST',
      url: 'https://myUrl.firebaseio.com/order.json',
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify(newOrder),
      success: function(data) {
        console.log("Order added!", data);
      }
    });
});
});

我试图弄乱表格，但找不到任何破坏它的东西。控制台也没有显示错误。

Answer 1

这里有两个问题。第一个是 Hook 到 button 的点击事件。这意味着 form 提交仍在进行。当发生这种情况时，页面将有效地重新加载，因为您没有为 form 提供任何 action 属性，这反过来会阻止 AJAX 调用完成。要解决此问题，您应该始终 Hook form 的 submit 事件，并使用 preventDefault() 来阻止默认提交的发生。

其次，您只检索页面加载时输入元素的 val() 属性。那时用户还没有与他们互动。相反，您应该在将它们发送到 AJAX 请求之前获取它们的值。

试试这个:

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

    var $fromName = $('#fromName');
    var $fromContactNo = $('#fromContactNo');
    var $fromAddress = $('#fromAddress');
    var $toName = $('#toName');
    var $toContactNo = $('#toContactNo');
    var $toAddress = $('#toAddress');
    var $itemDesc = $('#itemDesc');

    var newOrder = {
        "from": {
            "name": $fromName.val(),
            "phone_no": $fromContactNo.val(),
            "address": $fromAddress.val(),
        },
        "to": {
            "name": $toName.val(),
            "phone_no": $toContactNo.val(),
            "address": $toAddress.val(),
        },
        "item": $itemDesc.val(),
    };

    $.ajax({
        type: 'POST',
        url: 'https://myUrl.firebaseio.com/order.json',
        contentType: "application/json; charset=utf-8",
        data: newOrder, // no need for JSON.stringify here
        success: function(data) {
            console.log("Order added!", data);
        }
    });
});