Home/ Questions/Q 7933521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:21:34+00:00

I try to post the values from the input field with the jquery.ajax function

  • 0

I try to post the values from the input field with the jquery.ajax function to a php file. The php part must insert the data into an mysql database, generate a unique pincode and return the pincode by json to the jquery code.

But when submitting the form nothing happens…

When I go directly to the main.php file in my browser, it show me a unique pincode and the php script even insert the pincode in the database. So I think the JSON part goes wrong, but I can’t figure out why.

I hope somebody can show me what I’m doing wrong. Any help would be fantastic!

Underneath code is the working code!

HTML part:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AJAX PHP JSON Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("form#userForm").submit(function() {
                var inputFname = $('#inputFname').attr('value');
                var inputLname = $('#inputLname').attr('value');
                $.ajax({
                    type: "POST",
                    url: "main.php",
                    data: {inputFname: inputFname,inputLname: inputLname},
                    dataType: "json",
                    contentType:"application/json; charset=utf-8",
                    success: function(data) {
                        $("p.succesText").html(data.jsCode);
                        $("form#userForm").hide();
                        $("div.success").fadeIn();
                    },
                    error: function(xhr, status, error) {
                        $("form#userForm").hide();
                        $("p.errorHead").html("Something went wrong.");
                        $("p.errorText").text("ResponseText: " + xhr.responseText
                                            + "Statuscode: " + xhr.status
                                            + "ReadyState: " + xhr.readyState);
                        $("div.error").fadeIn();
                    }
                });
                return false;
            });
        });     
    </script>
</head>
<body>
    <div class="MiddleWhite">
        <form id="userForm" method="post" name="userForm" action="">
        <label for="inputFname" class="LabelForInput">
            Enter your Forename
        </label>
        <input type="text" name="inputFname" id="inputFname" class="TextInput"
            size="20" />
        <br />
        <br />
        <label for="inputLname" class="LabelForInput">
            Enter your Surname
        </label>
        <input type="text" name="inputLname" id="inputLname" class="TextInput"
            size="20" />
        <br />
        <br />
        <br />
        <button type="submit" class="Button">
            Generate code</button>
        </form>
        <div class="success" style="display: none;">
            <p class="succesText">
            </p>
            <p class="checkCallText">
            </p>
        </div>
        <div class="error" style="display: none;">
            <p class="errorHead">
            </p>
            <p class="errorText">
            </p>
        </div>
    </div>
</body>
</html>

PHP part:

<?php header('content-type: application/json; charset=utf-8');

    $log = array();


        $varFname = htmlspecialchars($_POST["inputFname"]);
        $varLname = htmlspecialchars($_POST["inputLname"]);

        //Make Database connection
        $db = mysql_connect("192.168.178.254","root","852456");
        if(!$db) die("Error connecting to MySQL database.");
        mysql_select_db("Ajax" ,$db);

        //Generate code and check if code already exists in the database
        do
        {
            $varCode = rand(10000, 99999);
            $dbCheckCode = "";
            $dbCheckCode = mysql_query("SELECT * FROM TableAjax WHERE code='$varCode'");
        }
        while (mysql_fetch_array($dbCheckCode) !== false);

        //Save the Form data in the database
        $sql = "INSERT INTO TableRecordcall (fname, lname, code) VALUES (".PrepSQL($varFname) . ", " .PrepSQL($varLname) . ", " .PrepSQL($varCode) . ")";
        mysql_query($sql);  

        //Return code to frontend
        $log['jsCode'] = $varCode;

        echo json_encode($log);


    //Clean SQL statement
    function PrepSQL($value)
    {
        if(get_magic_quotes_gpc()) 
        {
            $value = stripslashes($value);
        }
        $value = "'" . mysql_real_escape_string($value) . "'";
        return($value);
    }   

?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Also you didn’t use

    return false;

    in summit callback to prevent default form submission. Change your js code like this

    $(document).ready(function() {
            $("form#submit").submit(function() {
                var inputFname = $('#inputFname').attr('value');
                var inputLname = $('#inputLname').attr('value');
                $.ajax({
                    type: "POST",
                    url: "main.php",
                    data: {inputFname: inputFname,inputLname: inputLname},
                    dataType: "json",
                    contentType:"application/json; charset=utf-8",
                    success: function(data) {
                        $("p.succesText").html(data.jsCode);
                        $("form#submit").hide();
                        $("div.success").fadeIn();
                    },
                    error: function(xhr, status, error) {
                        $("form#submit").hide();
                        $("p.errorHead").html("Something went wrong.");
                        $("p.errorText").text("ResponseText: " + xhr.responseText
                                            + "Statuscode: " + xhr.status
                                            + "ReadyState: " + xhr.readyState);
                        $("div.error").fadeIn();
                    }
                });
                return false;
            });
        });
    • 0