我的ajax电话不会工作？

enter image description here

$("select#pieces").change(function() {
  $('div#pop').html('');
  for (var c=0, t = $("select#pieces").val();c<t;c++) {
    $('div#pop').append("<input type='Text'  name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");
  }
});

my ajax call wont work can anyone help me please. Im trying to post my form data to my php script that will run my query's. I have tried a few methods of gathering the data ready to be posted but nothing happens when i press submit.

$("#submit").click(function(){

// Tried this previously
//var data = {}; $('form').find('input').forEach(function(input){ data[$(input).attr('name')] = $(input).val(); });

 var $inputs = $('#Form :input');

    var data = {};
    $inputs.each(function() {
        data[this.name] = $(this).val();
    });


      $.ajax({
            type: "POST",
            url: 'checkBeforePrint.php',
            data: { data
            },
            success: function(e) {
                  if (e.r === true) {
                  } else if (e.r === false) {
                  }
            },
            dataType: "json"
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "form" class = "form">
<table>
<tr>
    <td>Reference *</td>
    <td>
  <input type='number' id='a' name='reference_end1' required size='7' maxlength='1'  style='width:90px;font-family:Century Gothic; text-transform:uppercase; '>
  
  <input type='Text' id='b'  name='reference_end2' required size='7' maxlength='3'  style='width:140px;font-family:Century Gothic; text-transform:uppercase;'>
  
  <input type='number' id='c'  name='reference_end3' required size='7' maxlength='6'  style='width:190px;font-family:Century Gothic; text-transform:uppercase;'>
  
  <!-- inputs combined above -->
  
 <input type='hidden' id='reference_end'  name='reference_end'> 
</td>
</tr>

</table>
</div>

</br>
<div class ="bookinform">


<table>
<tr>
    <td>Name of Driver *</td>
    <td>
        <input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'>
    </td>
</tr>
<tr><td></td></tr>
<tr>
    <td>Vehicle Reg *</td>
    <td>
        <input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'>
    </td>
</tr>
<tr><td></td></tr>
<tr><td valign='top'>Haulier *</td><td valign='top'><input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'>

<tr><td></td></tr>
<!--
# Blank out the auto-complete haulier as per Richard Walkers request
onKeyUp="GetResults(document.getElementById('query').value)" 
        <div id="results" class="box">
        </div>
-->


</td></tr>


<tr><td>Destination *</td><td><input type='Text' id="query2"  name='destination' required style='width:250px; text-transform:uppercase;'></td></tr>
<tr><td></td></tr>
</table>
</div>
</br>
<div class ="bookinform">
<table>
<tr><td>Pieces *</td>
<td><select id = "pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'>
<option> Select Number Of Pieces </option>
<?php
    $count = 1;
    while ($count<=100) {
        echo "<option value='".$count."'>".$count."</option>";
        $count++;
    };
?>
</select></td></tr>

<!--<tr><td>Labels</td><td>-->
<select name='labels' style="display:none">
<option value='0'>SAME AS PIECES</option>
<?php
    $count = 1;
    while ($count<=100) {
        echo "<option value='".$count."'>".$count."</option>";
        $count++;
    };
?>
</select>

<!--</td></tr>-->

       
</table>

</br>

<!-- JQUERY POPULATES IN POP pieces fields-->
<div id = "pop"></div>

</div>



<div class ="bookinformbtn">
<div class ="bookinform">


<input id="submit" type="button" value="Submit">
</form>
<!--</br></br>
<button class="resetref" style="width:100%;font-family:Century Gothic; color:#FFC200 ; font-weight: bold;">Next REF</button>-->
</br></br>
<form action="http://cmlgrn:8629/index.php?BookInA">
  <input type='submit' value="EXIT" style='width:100%;font-family:Century Gothic; color:red; font-weight: bold;'>
</form>

</div>

Attach to the forms submit event, call preventDefault on the event to stop a normal submit (page refresh), and use serialize() to generate the post data from the form:

$('#form').submit(function(ev){
    ev.preventDefault();
    $.post('checkBeforePrint.php', $(this).serialize(), function(response){
        console.log(response);
    });
});

EDIT as pointed out in comments, you will need to change your submit button to type submit

<input id="submit" type="submit" value="Submit">

Try this;

$("#submit").click(function(e){

var $inputs = $('#Form :input');

var data = {};
$inputs.each(function() {
    data[this.name] = $(this).val();
});

        $.ajax({
            cache: false,
            dataType: "json",
            type: "POST",
        url: 'checkBeforePrint.php',
            data: { data
            }
        }).done(function (e) {
              if (e.r === true) {
              } else if (e.r === false) {
              }
        });

   });