用户在表单上输入时如何自动发送数据

时间:2015-07-31 12:13:50

标签: php mysql html5

我有一张表格。该表格有一些字段,如姓名,电话号码,电子邮件和提交按钮

我有一个AWS托管服务器。还有一个数据库。所以当用户输入他的名字时,我想知道一件事,并且电话号码。然后将数据传递给我的数据库,而无需用户按提交。

请帮我实施。

1 个答案:

答案 0 :(得分:1)

您正在寻找的是AJAX。我建议您使用JQuery之类的库,这样可以让您更轻松。

您正在寻找的内容很可能是您输入的onBlur方法。如果您在文本字段中输入然后它被聚焦,那么当您更改文本字段时,它是模糊的。所以你想要的东西,。

修改

<!DOCTYPE html>
<html>
<head>
    <title>Ajax</title>
</head>
<body>
    <form action="" method="post" id="ajaxForm">
        <input type="text" id="name" name="name" placeholder="name">
        <input type="text" id="phone" name="phone" placeholder="phone">
        <input type="email" id="email" name="email" placeholder="email" onfocus="validateAndSubmit()">
        <input type="submit" value="Send form">
    </form>
    <p><label id="result"></label></p>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        <!--

            var validateAndSubmit = function()
            {
                var nameValue = $("#name").val();
                var phoneValue = $("#phone").val();

                //Validate the data - Do your custom validation here
                if (nameValue.length > 3 && phoneValue.length > 5){
                    //Validation complete
                    $.post( 
                        "your_save_file.php",
                        { name: nameValue, phone:phoneValue },
                  function(data) {
                     alert("Data saved");
                  }
               );
                    document.getElementById("result").innerHTML = "Validation completed";
                } else {
                    //Not validated, do nothing
                    document.getElementById("result").innerHTML = "Validation failed";
                }
            };
        -->
    </script>
</body>
</html>

这将按照您的要求执行。但是,我不建议你这样做。因为如果用户意外地提交了错误的数据,那么数据将已经被发送。我建议你有一个提交按钮来激活这个功能。