VBtutorials VBtutorials - 5 months ago 23
HTML Question

$.ajax Not Working Properly in my code

I've tried many different ways (this has taken 3 days) to use the Javascript ajax command to send form values to a php script but, my page still reloads and nothing gets inserted into my database. I get no errors, the scripts run but produce no results. To keep this post relatively short I put the HTML in this pastebin just in case anyone needs/wants to see it.

Here is my php script:

<?php
if($_POST) {
$link = mysqli_connect(localhost, <removed>, <removed>, <removed>);

function val_data($data){
$data = trim($data);
$data = strip_tags($data);
$data = mysqli_real_escape_string($link,$data);
return $data;
}

$type = val_data($_POST['type']);
$size = val_data($_POST['size']);
$date = val_data($_POST['datepicker']);
$message = val_data($_POST['message']);
$steam = val_data($_SESSION['steamid']);
//Query
$sql = "INSERT INTO requests (type, size, fdate, steam64id, message) VALUES ('$type', '$size', '$date', '$steam', '$message')";
$query = mysqli_query($link, $sql);
mysqli_close($link);
}
?>


Here's my Javascript:

function hideModal() {
$('#myModal').modal('hide');
}

$(document).ready(function() {
$(document).on('submit', '#myModal', function() {
var error = "";
var type = document.getElementById("type").val();
var size = document.getElementById("size").val();
var date = document.getElementById("datepicker").val();
var message = document.getElementById("message").val();

if(type == "") {
error = "A Job type is required";
document.getElementById("sparam").innerHTML = error;
$("type").focus();
return false;
}

if(size == "") {
error = "A Job size is required";
document.getElementById("sparam").innerHTML = error;
$("size").focus();
return false;
}

if(date == "") {
error = "A desired completion date is required";
document.getElementById("sparam").innerHTML = error;
$("date").focus();
return false;
}

if(message == "") {
error = "A description of the job is required";
document.getElementById("sparam").innerHTML = error;
$("message").focus();
return false;
}

$.ajax({
type: 'post',
url: 'ajaxsubmit.php',
data: {
type:type,
size:size,
date:date,
message:message
},
success: function(res) {
$('#sparam').html("Thanks! We'll be in touch soon");
setTimeout(hideModal, 5000);
}
});
return false;
});
});

Answer

This is good case to point out using event.preventDefault() is safer than using return false and also makes debugging easier.

$(document).on('submit', '#myModal', function(event) {
      event.preventDefault();
      // form won't submit if errors thrown after this

Any error that gets thrown prior to that return false will block remaining code within the function and since false isn't returned the browser will submit form and reload page...and the return has to be after everything else, at the end of the event handler

When you prevent the default first, then any errors in your code afterwords aren't good but the browser won't submit the form

You need to change the val() method which is for jQuery objects not DOM nodes to value or simplify the dom searches using jQuery

var type = document.getElementById("type").val();

Should be either:

var type = document.getElementById("type").value;

Or

var type = $("#type").val();