Question

我有一个“坐”在表格内的表格

                <form id="form">
            <input type="submit" value="send" class="btn btn-w-m btn-primary" style="float: left;">Add transaction</input>
            <table class="table table-striped table-bordered table-hover " id="editable" >
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Name<br>(Last name, Firstname,<br>
                        or Business name)
                    </th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th>Price with VAT</th>
                    <th>VAT</th>
                    <th>Transaction type</th>
                    <th>Currency</th>
                    <th>Installments</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input type="date" name="date"/></td>
                    <td><input type="text" name="name"/></td>
                    <td><input type="text" name="address"/></td>
                    <td><input type="text" name="phone"/></td>
                    <td><input type="text" name="price_with_vat"/></td>
                    <td>25%(from database)</td>
                    <td class="exclude"><select name="transaction_type">
                            <option>value1</option>
                            <option>value2</option>
                            <option>value3</option>
                        </select></td>
                    <td class="exclude"><select name="currency">
                            <option>Euro</option>
                            <option>USD</option>
                            <option>Pound</option>
                        </select></td>
                    <td class="exclude"><select name="installments">
                            <option>Yes</option>
                            <option>No</option>
                        </select></td>
                </tr>
                </tbody>

我想要的是选择所有输入值并向php端发送Ajax请求。问题是在我的jquery函数（代码跟随）中我无法收集所有输入。另外，我有一个preventDefault页面仍然会刷新。

    var request;
$('#form').submit(function(event){

    if (request){
        request.abort();
    }

    var form = $(this)

    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    console.log(serializedData);
    event.preventDefault();
});

Answer 1

试试此代码

要使表单元素的值包含在序列化字符串中，元素必须具有name属性。

$(document).ready(function() {
  //Form submit event
  $('#form').on('submit', function(e){

    // validation code here
    if(!valid) {
      e.preventDefault();
    }

    //Serialized data 
    var datastring = $("#form").serialize();

    //Ajax request to send data to server
    $.ajax({
        type: "POST",
        url: "your url.php",
        data: datastring,
        success: function(data) {
            alert('Data send');
        }
    });
  });
});

Answer 2

尝试使用此代码：

$('#form').on('submit', function (e) {
e.preventDefault();
$.ajax({
  type: 'post',
  url: 'yourpage.php',
  data: $('#form').serialize(),
  success: function(){
          alert('success');
              },
});
 });
});
});

只需在您要发送表单值的php页面中更改url：'yourpage.php'

如何选择位于表中的所有输入字段

2 个答案: