Отправка формы с помощью <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, чтобы заставить ее работать с моей формой.

Фактически, чтобы отправить форму, которую должен input ваш тип input , а не button .

Использование тега button также будет работать.

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

Если у вас нет кода javascript, который запускает форму submit.

Атрибут action также требуется согласно спецификации, но даже без него большинство браузеров предполагают, что URL-адрес действия является текущей страницей.

Изменить . Если вы хотите отправить данные формы без перезагрузки страницы, вы должны использовать либо ajax, либо поместить всю форму в iframe . (Пожалуйста, сделайте это с ajax).

В противном случае щелчок по input[type=button] самом деле ничего не сделает.

Пользовательские данные являются фактическими данными из вашей формы, вы можете захватить его, используя:

 $(document).ready(function() { $(".submitDetails").click(function(e) { e.preventDefault(); // See Teez answer, I wasn't aware of this. var dataToSend = $("#userDetails").serializeArray(); $.ajax({ url: "userDetailTest.php", type: "POST", data: dataToSend, cache: false, success: function(php_output) { $(".overallSummary").html(php_output); } }); }); }); 

Существует множество способов:

Просто используйте ниже, если вы не хотите обновлять страницу:

  var dataToSend = $('userDetails').serializeArray(); 

Или попробуйте использовать ниже код для отправки формы с помощью jquery:

 $("userDetails").submit(function(){ // do your stuff $.post( "post.php", // add all stuff for inserting data ); }); 

Ниже ссылки вам помогут:

http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

Добавьте действие в форму и используйте submit.

 <form action="pass_data_here.php" method="post"> <input type="submit" value="Submit"/> 

Кроме того, чтобы облегчить отладку, вы можете просто эхо сначала перенести поля, прежде чем сохранять их в db. Таким образом, вы можете поиграть с данными без необходимости перехода к таблице администрирования базы данных.

Изменить: поскольку вам действительно нужна кнопка, этот аякс может быть полезен

 $('.submitDetails').click(function(e) { e.preventDefault(); var dataString = ""; //this will get all the data of your form separated by & $("form input:text").each(function(index, element) { dataString += $(this).attr("id")+"="+$(this).val()+"&"; }); dataString = '?' + dataString; //added the needed ? $.ajax({ url: "userDetailTest.php", type: "POST", data: dataString, cache: false, success: function(php_output) { $(".overallSummary").html(php_output); } }); });//end submitDetails 

Вы в основном ответили на свой вопрос. Вам нужно поместить действие в форму, указывающую на скрипт, обрабатывающий форму. Начните с этого, и если вы решите использовать AJAX позже, вы всегда можете немного изменить код, чтобы сделать это.

Вам все еще нужно действие. Если PHP находится на одной странице, вы можете использовать что-то вроде:

 action="<?php echo $_SERVER['PHP_SELF']" 

Три предыдущих ответа должны быть объединены, чтобы дать один ответ, поскольку у вас есть две вещи, отсутствующие в работоспособной форме HTML, действии и отправке:

 <form action="mytarget.php" method="post"/> ....add input fields... <input type="submit" value="Submit"/> </form>