Cro-Magnon Cro-Magnon - 4 months ago 12
SQL Question

HTML form won't carry out correct actions, interference

I have written the following website which uses a very simple form and sends that data into a mysql database. My problem is that the javascript/ajax form id="contactForm" script seems to interfere with the form action="insert.php"

Here is my basic html:

<form action="insert.php" method="post" id="contactForm" role="form" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group down col-sm-6">
<label for="name" class="h4">Voor en achternaam.</label>
<input name="naam" type="text" class="form-control" id="name" placeholder="Voornaam Achternaam" required data-error="Vergeet deze niet!">
<div class="help-block with-errors"></div>
</div>
</div>
<button value="Submit" style="background-color: #75963c;" type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>


here is my insert.php to put the data into the mysql database:

<?php
$con = mysql_connect("mydatabaseip","mydbuser","mydbpassword");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("mydbname", $con);

$sql="INSERT INTO nametable (naam) VALUES('$_POST[naam]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}


echo "1 record added";

mysql_close($con)
?>


Here is my ajax/javascript for sending the email:

$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill out everything correctly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});


function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();

$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}

function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message received!")
}

function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}

function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}


Somehow these two files seem to interfere with each other. Probably because they both perform an action on the same element - the form element. I've been working along time to get this running but can't figure out how to do so. If I let the id="contactForm" be in there it will execute but the action="insert.php" won't.

All help is appreciated.

Answer

This is happening because you're trying to use the same form for two separate submissions. It's a bit of a strange design if you ask me...why not just post back all the data and then call whatever is in form-process.php directly from the insert.php postback script? That way you'll only have one post to the server and not two.

Anyway, if you want to stick with it, it's "interfering" because of this line in your submit handler:

event.preventDefault();

This prevents the "default" behaviour of the submit button, which would be to submit the form using a full postback according to the settings in the <form> tag.

If you still want to have both actions working, you'll need to wait for the ajax call to complete successfully before you can safely have the main postback occur. To do this you can add another line in to manually trigger the main submission. Within the success function of your ajax post to form-process.php, change

if (text == "success"){
  formSuccess();
}

to

if (text == "success"){
  submitMSG(true, "Message received!");

  $("#contactForm").submit(); //this will submit the form to insert.php as per the form tag using a full page postback
}