Categories
button forms mysql php

Submitting a form using

I’m having a little trouble with this and can’t see what I’m doing wrong. I have this form:

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

So when the user clicks the button it should submit the form then have this PHP to act upon the form (I know that the sql isn’t a prepared statement and is vulnerable to injections but this will be done later):

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

However when I check my tables, no information is inserted into the database. Bearing in mind this code is all in the same document hence why I have not used action=”file.type” within the form declaration. This is because I’m unsure whether ajax is appropriate here.

Any help is much appreciated, thank you.

EDIT

What I could do is use ajax with jQuery to listen for the button click event:

$(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);
}
});
});
});

The idea here is to use this ajax for when the button is clicked and call the ajax function but i’m unsure what to put as the ID in the variable ‘userData’ and what to add in the ‘dataToSend’ variable to make it work with my form.