Отправка формы с использованием <input type = «button»>

У меня небольшая проблема с этим и я не вижу, что я делаю неправильно. У меня есть эта форма:

<div class="user">

    <form name="userDetails" id="userDetails" method="post" >
        <input type="text" name="firstName" id="firstName" class="firstName"  placeholder="first name " />
        <input type="text" name="lastName" id="lastName" class="lastName"  placeholder="last name " />
        <input type="text" name="address" id="address" class="address"  placeholder="First line of Address " />
        <input type="text" name="postcode" id="postcode" class="postcode"  placeholder="Postcode " />
        <input type="text" name="email" id="email" class="email"  placeholder="E-Mail " />
        <input type="text" name="phone" id="phone" class="phone"  placeholder="Phone " />

        <input type="button" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />

    </form>

</div>

Поэтому, когда пользователь нажимает кнопку, он должен отправить форму, а затем использовать этот PHP для работы с формой (я знаю, что sql не является подготовленным оператором и уязвим для инъекций, но это будет сделано позже):

 <div class="overallSummary">

  <?php
    $fName = $_POST['firstName'];
    $lName = $_POST['lastName'];
    $address = $_POST['address'];
    $pc = $_POST['postcode'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];

    $userSQL = "INSERT INTO user (forename, surname, address, postcode, email, phone) VALUES ('$fName', '$lName', '$address', '$pc', '$email', '$phone')";


    $result = mysql_query($userSQL) or die(mysql_error());

   ?>
  </div>

Однако, когда я проверяю свои таблицы, никакая информация не вставляется в базу данных. Принимая во внимание, что этот код находится в том же документе, поэтому я не использовал action = "file.type" в объявлении формы. Это потому, что я не уверен, уместен ли здесь Ajax.

Любая помощь очень ценится, спасибо.

РЕДАКТИРОВАТЬ

Что я мог сделать, это использовать ajax с jQuery для прослушивания события нажатия кнопки:

$(document).ready(function() {
  $(".submitDetails").click(function(e) {
      e.preventDefault();
       var userData = $("#?").val();
       var dataToSend = '?=' + eNameData;

    $.ajax({                
        url: "userDetailTest.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
        {
         $(".overallSummary").html(php_output);
           }    
    });
  });
});

Идея здесь состоит в том, чтобы использовать этот ajax для нажатия кнопки и вызова функции ajax, но я не уверен, что указать в качестве идентификатора в переменной 'userData' и что добавить в переменную dataToSend, чтобы она работала с моей формой.

Ответы на вопрос(6)

Ваш ответ на вопрос