表单提交和preventDefault()的问题

时间:2016-07-18 06:47:26

标签: javascript jquery forms

我一直在寻找几个小时试图找到解决我遇到的问题的方法。我有一个外部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(&#39;提交&#39;,认为似乎都不起作用。我很确定这不是事件的问题而已被认可,但我找不到适用于我的解决方案。如果有帮助,我会使用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));
}

?>

2 个答案:

答案 0 :(得分:-1)

1)如果您不想刷新提交点击事件的页面,只需将按钮类型从提交更改为按钮:

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

2)从表格标签

中删除操作值

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
        })
    });
});

答案 1 :(得分:-1)

在您的代码中,您定义了一个表单$(document).ready(function() { var datas = $.get("https://api.github.com/users/iwenyou", function(infos) { $.ajax({ type: "POST", url: "https://httpbin.org/post", data: infos, dataType: "json", success: function(data) { $(".container").append("<div>"+data['avatar_url']+data.login+data.name +"</div>"); } }); }); }); action属性,这些属性足以处理for submit操作。在这种情况下,您的表单会提交,并且可能会刷新页面,因此method无效。

从表单中删除表单event.preventDefault()action属性,然后查看结果。

method