I'm trying to submit values to a database using jquery. I'm new to ajax but I'm required to do it with ajax.
This is what I've done so far my php code is
function insertSeries()
{
$options = array(
'user' => $_POST['user'],
'email' => $_POST['email'],
'summary' => $_POST['summary'],
'due_date' => $_POST['due_date'],
'problem_type' => $_POST['problem_type'],
'status' => $_POST['status']
);
$sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') Values (?,?,?,?,?,?)";
$result = mysql_query($sql, $options) or die('Could not insert data');
}
My html code is
<?php
include 'eric_api.php';
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.js"></script>
<script src="js/api_calls.js"></script>
<link rel="stylesheet" href="css/normalizer.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<h1>Ticketing System</h1>
<div>
<div id="ticket_form_wrapper">
<form id="insert_ticket" method="post" action="">
<p>
<label for="user">User</label>
<br />
<input type="user" id="user" class="post_fields" />
</p>
<p>
<label for="email">Email</label>
<br />
<input type="email" id="email" class="post_fields" />
</p>
<p>
<label for="summary">Summary</label>
<br />
<input type="summary" id="summary" class="post_fields" />
</p>
<p>
<label for="due_date">Due Date</label>
<br />
<input type="due_date" id="due_date" class="post_fields" />
</p>
<p>
<label for="problem_type">Problem Type</label>
<br />
<input type="problem_type" id="problem_type" class="post_fields" />
</p>
<p>
<label for="status">Status</label>
<br />
<input type="status" id="status" class="post_fields" />
</p>
<p>
<input type="submit" id="submit" value="Submit" />
<input type="button" onclick="window.location='index.php'" value="Go to List"/>
<div class="form_result"> </div>
</p>
</form>
</div>
</div>
</body>
</html>
And here's my ajax using jquery
$('#insert_ticket').submit(function(e){
var postData = $(this).serialize();
alert(postData);
$.ajax({
type: 'POST',
url: 'http://localhost/api/eric_api.php?q=insertseries',
data: postData,
success: function(response){
$('#insert_ticket').find('.form_result').html(response);
},
error: function(){
alert('error');
}
});
e.preventDefault();
});
I don't know what I'm doing wrong. Any help would be greatly appreciated
Instead of interfering with the form's submit event, interfere with a click event instead. To make minimal changes to your existing setup, just add the click handler to the form submit button. First thing inside of the handler, call e.preventDefault(). You'll have to explicitly select the form inside the handler to serialize the data. Then, move your existing ajax call into that handler, and it should work fine. Also, make sure that you are actually calling insertSeries() somewhere in your PHP code.
Cheers
Please reply to some of the comments so we can help figure out what the issues is. This is how your function would look with proper mysqli syntax.
How to make the connection: $mysql = new mysqli(...)
How to prepare the statement: $stmt = $mysqi->prepare(....)
How to bind the parameters: $stmt->bind_param(...)
Execution: $stmt->execute()
Note: you were making your insert string like it was to be used for mysqli but your parameter binding was more similiar to pdo. I wasn't sure which one you were wanting to use so I chose mysqli. I personally prefer PDO, though... so I can re-write this using that if you want. Link to the PDO Prepare Function that also shows some binding.
// this is your database connection for mysqli
$mysqli = new mysqli('localhost', 'my_user', 'my_password', 'world');
function insertSeries($mysqli)
{
$options = array(
'user' => $_POST['user'],
'email' => $_POST['email'],
'summary' => $_POST['summary'],
'due_date' => $_POST['due_date'],
'problem_type' => $_POST['problem_type'],
'status' => $_POST['status']
);
$sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status')
Values (?, ?, ?, ?, ?, ?)";
if ( $stmt = $mysqli->prepare($sql) )
{
$stmt->bind_param("ssssss", $options['user'], $options['email'],
$options['summary'], $options['due_date'],
$options['problem_type'], $options['status']);
$success = $stmt->execute();
if ($success) { print "query worked"; }
else { print "query failed"; }
}
}