Ironicism Ironicism - 4 months ago 9
jQuery Question

Issues with form submit and preventDefault()

I've been searching for a few hours trying to find a solution to the issue I'm having. I have an external jQuery page to submit form data to a server. I've tried using event.preventDefault, and return false; but neither of these seem to work. In addition if I add an alert to the first line of the function it does not appear.

Here is the jQuery code and HTML code for the formL

$(document).ready(function() {
//----------------------------------------------------Sign up------------------------------------------------------------------
$('#signup-form').on('submit', function(event) {
alert("This is working");
event.preventDefault();

var subData = {
'username' : $('suser').val(),
'password' : $('spass').val()
};

$.ajax({
type : 'POST', //define the HTTP verb we want to use
url : 'createUser.php', // url where we want to post
data : subData, // our data object
dataType : 'json' //what type of data we expect back from the server
})
});
});


<form id="signup-form" action="createUser.php" method="post">
<input class="username" id="suser" type="text" name="username" placeholder="username" required><br>
<input class="password" id="spass" type="text" name="password" placeholder="password" required><br>
<input class="password" id="spassconf" type="text" name="password-confirm" placeholder="confirm password" required><br>
<input id="signup-submit" type="submit" value="Signup">
</form>


I've tried using .submit( and .on('submit', thought neither seem to work. I'm pretty sure it's an issue with the event not being recognized but I couldn't find a solution that works for me. I'm using chrome if that helps.

If you need any of the other code I'll be happy to supply it.

Edit: PHP code by request

<?php

//get form fields into php variables
$username = $_POST['username'];
$password = $_POST['password'];

$serverName = "198.71.225.145";
$connectionInfo = array("Database"=>"Ironicism_database_project", "UID"=>"ironicism", "PWD"=>"Redhorsemagnet8*");

$conn = sqlsrv_connect($serverName, $connectionInfo);

if($conn===false) {
echo "Connection could not be established.<br />";
die( print_r( sqlsrv_errors(), true));
}

$sql = "INSERT INTO ironicism.users (username, password) VALUES ('$username', '$password')";


$stmt = sqlsrv_query( $conn, $sql);
if($stmt === false)
{
echo "Data Could not be inserted.... working on that yo.<br />";
die( print_r(sqlsrv_errors(), true));
}

?>

Answer

In your code you have defined a form action and method attributes that are self sufficient to handle the for submit action. In this case your form submits and it may refresh the page thus your event.preventDefault() is not working.

Remove the form action and method attribute from the form and see the result.

 $(document).ready(function() {
//----------------------------------------------------Sign up------------------------------------------------------------------
$('#signup-form').on('submit', function(event) {
    alert("This is working");
    event.preventDefault();

    var subData = {
        'username'      : $('suser').val(),
        'password'      : $('spass').val()
    };

    $.ajax({
        type        : 'POST', //define the HTTP verb we want to use
        url         : 'createUser.php', // url where we want to post
        data        : subData, // our data object
        dataType    : 'json' //what type of data we expect back from the     server
        })
    });
});


<form id="signup-form">
        <input class="username" id="suser" type="text" name="username" placeholder="username" required><br>
        <input class="password" id="spass" type="text" name="password" placeholder="password" required><br>
        <input class="password" id="spassconf" type="text" name="password-confirm" placeholder="confirm password" required><br>
        <input id="signup-submit" type="submit" value="Signup">
</form>
Comments