表单提交问题和preventDefault（）

Question

我已经搜寻了几个小时，试图找到解决我遇到的问题的方法。 我有一个外部jQuery页面，用于将表单数据提交到服务器。 我试过使用event.preventDefault，并返回false； 但这些似乎都不起作用。 另外，如果我将警报添加到函数的第一行，则不会出现。

这是formL的jQuery代码和HTML代码

$(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>

我尝试使用.submit（和.on（'submit'，但似乎都无法正常工作。我很确定这是无法识别事件的问题，但我找不到适合我的解决方案。我正在使用chrome（如果有帮助）。

如果您需要其他任何代码，我们将很乐意提供。

编辑：按要求编写PHP代码

<?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 1

1）如果您不想在提交单击事件时刷新页面，只需将按钮类型从“提交”更改为按钮：

<input id="signup-submit" type="button" value="Signup">

2）从Form标记中删除操作值

3）以按钮点击事件代替提交事件：

$('button').on('click', function(event) { // change it
    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
        })
    });
});

Answer 2

在您的代码中，您定义了一个表单action和method属性，这些属性足以处理for Submit操作。 在这种情况下，您的表单将提交，并且它可能会刷新页面，因此event.preventDefault()无法正常工作。

从表单中删除表单action和method属性，然后查看结果。

 $(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>