Php works from action but not from onSubmit in html form
I have an HTML form that receives some text data from a user. I want to insert this into my database and stay in one form so that another row can be created in the database. My php is working fine if I call it from the form with action = 'includes / addUser.php' but then leaves the browser at the addUser.php page which displays nothing. I thought I could use ajax to not change the display, but php doesn't seem to be called. If I change the name of the php file in the ajax call, I see an error.
<div id="addUserFormDivID">
<!-- <form id='addUserFormID' method='post' action='includes/addUser.php'> -->
<form id='addUserFormID' method='post' onSubmit='javascript:addUser()'>
Add User<br /><br />
<table>
<tr>
<td align="right">Full name:</td>
<td align="left"><input type="text" name="fullName" /></td>
</tr>
<tr>
<td align="right">Nickname:</td>
<td align="left"><input type="text" name="nickName" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="text" name="email" /></td>
</tr>
<tr>
<td align="right">Phone:</td>
<td align="left"><input type="text" name="phone" /></td>
</tr>
<tr>
<td align="right">Postal Address:</td>
<td align="left"><input type="text" name="address" /></td>
</tr>
<tr>
<td align="right">Postcode:</td>
<td align="left"><input type="text" name="postcode" /></td>
</tr>
</table>
<input type="submit" name="submitAddUser" value="Add User" style="float:right">
</form>
</div>
<script type="text/javascript">
function addUser()
{
console.log("javascript addUser()");
$.ajax
({
type: "POST",
url: "includes/addUser.php",
//data: '1',
success: function()
{
alert("User added");
}
}); // Ajax Call alert("hello");
}
addUser.php:
<?php
include_once 'db_connect.php';
include_once 'functions.php';
//sec_session_start();
debug_to_console("addUser.php");
$fullName = $_POST[fullName];
$nickName = $_POST[nickName];
$email = $_POST[email];
$phone = $_POST[phone];
$address = $_POST[address];
$postcode = $_POST[postcode];
$stmt = mysqli_prepare($mysqli, "INSERT INTO Person (FullName, NickName, Email, Phone, PostalAddress, Postcode) VALUES (?, ?, ?, ?, ?, ?)");
if ($stmt === false)
{
trigger_error('Statement failed! ' . htmlspecialchars(mysqli_error($mysqli)), E_USER_ERROR);
}
$bind = mysqli_stmt_bind_param($stmt, "ssssss", $fullName, $nickName, $email, $phone, $address, $postcode );
if ($bind === false)
{
trigger_error('Bind param failed!', E_USER_ERROR);
}
$exec = mysqli_stmt_execute($stmt);
if ($exec === false)
{
trigger_error('Statement execute failed! ' . htmlspecialchars(mysqli_stmt_error($stmt)), E_USER_ERROR);
}
//printf ("New Record has id %d.\n", mysqli_insert_id($mysqli));
mysqli_stmt_close($stmt);
echo "done addUser";
? >
when the line action = 'includes / addUser.php' is not commented out (and onSubmit is off) then it works as long as I want to show a blank page
Instead of the onSubmit line being activated, the javascript addUser function is called ("javascript addUser ()" is printed to the console, and a warning is displayed with "User added"), but nothing in the addUser.php file appears to run. If I have included a non-existent file at the beginning of addUser.php, I see no error.
source to share
You need to indicate your data form
in the request. Also note that, in most cases, it is recommended to catch events in JavaScript. With this in mind, try this:
<form id="addUserFormID" method="post" action="include/addUser.php">
<!-- rest of your inputs -->
</form>
$(function() {
$('#addUserFormID').submit(function(e) {
e.preventDefault(); // stop the normal form submission
$.ajax({
type: this.method,
url: this.action,
data: $(this).serialize(),
success: function() {
alert("User added");
}
});
});
});
source to share