为什么我的JavaScript表单无法提交？

Brian Mulyadi 发表于 Dev

布赖恩·穆利亚迪（Brian Mulyadi）

我正在创建一种通过POST方法将文本字段中包含的数据直接注入到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);
      }
    });
});
});

我试图弄乱表格，找不到任何破坏表格的内容。控制台也未显示任何错误。

罗里·麦克罗森（Rory McCrossan）

您在这里有两个问题。首先是您要钩住click事件button。这意味着form提交仍在进行中。发生这种情况时，将有效地重新加载页面，因为您没有提供form任何action属性，这反过来又阻止了AJAX调用的完成。要解决此问题，您应该始终挂接到的submit事件，form并使用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);
        }
    });
});