CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
wheeliebin
wheeliebin

Reputation: 735

php works from action but not from onSubmit in html form

I have an HTML form which gets some text data from the user. I want to insert that into my database and stay on the same form so that another row can be created in the database. I have the php working fine if I call it from the form using action='includes/addUser.php' but that then leaves the browser on the addUser.php page which doesnt display anything. I had thought I could use ajax to not change the display but the php does not seem to get called. If I change the name of the php file in the ajax call I do 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";

?>

with the action='includes/addUser.php' line not commented out (and the onSubmit commented out) then it works as I want up to displaying a blank page

With the onSubmit line active instead, the javascript addUser function is called ("javascript addUser()" is output to the console and the alert is shown with "User added") but nothing in the addUser.php file seems to be run. If I include_once a nonexistent file at the start of addUser.php, I dont see an error.

Upvotes: 3

Views: 362

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to include the data of your form in the request. Also note that it's generally considered best practice to hook your events up in JavaScript. With that 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");
            }
        });
    });
});

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

After url use:

  url: "includes/addUser.php",
  data : $("#addUserFormID").serialize(),  
  type: "POST",
  .......

Upvotes: 1

Related Questions