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

Question

I have a form that "sits" inside a table

                <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>

What I want is to select all input values and send an Ajax request to a php end. The problem is that in my jquery function (code following) i cannot gather all the inputs. Also altough i have a preventDefault page still get refreshed.

    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

Try this code

For a form element's value to be included in the serialized string, the element must have a name attribute.

$(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

Try using this code:

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

Just change url: 'yourpage.php' with your php page where you want to send form values