将表单提交到PHP页面，而无需使用Submit按钮重新加载

用户名

朋友您好，请问您是jquery和javascript的新手，所以我将要发送表单的代码复制到php页面，而无需重新加载页面，此代码有效，但是我想单击“提交”按钮发送表单而不是回车键：

<input type="text" id="name" name="name"  /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#name').focus();
        $('#name').keypress(function(event) {
            var key = (event.keyCode ? event.keyCode : event.which);
            if (key == 13) {
                var info = $('#name').val();
                $.ajax({
                    method: "POST",
                    url: "fell.php",
                    data: {
                        name: $('#name').val(),
                        job: $('#job').val()
                    },
                    success: function(status) {
                    }
                });
            };
        });
    });
</script>

罗里·麦克罗森（Rory McCrossan）

为了使单击“提交”按钮起作用，您应该将代码包装在一个form元素中，然后更改您的JS代码以挂钩到该submit表单的事件。请注意，默认情况下还将为您提供“在输入按键时提交”操作，因此可以删除当前的按键处理程序。试试这个：

<form id="my-form">
    <input type="text" id="name" name="name"  /><br><br>
    <input type="text" id="job" name="job" /><br><br>
    <input type="submit" id="submit" />
</form>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#name').focus();
        $('#my-form').submit(function(e) {
            e.preventDefault();
            $.ajax({
                method: "POST",
                url: "fell.php",
                data: $(this).serialize(),
                success: function(status) {
                    console.log('AJAX call successful');
                    console.log(status);
                }
            });
        });
    });
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。