在不使用提交按钮重新加载的情况下将表单提交到PHP页面

submitting form to PHP page without reloading using the submit button

本文关键字：情况下 表单提交 页面 PHP 加载 提交 按钮 新加载      更新时间：2023-12-02

朋友们，大家好，我是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>

要使提交按钮的点击生效，您应该将代码包装在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>

You are not name the submit button. Try to give name to submit button and try below:-
<form id="myFrom" onsubmit="submitForm();">
    <input type="text" id="name" name="name"  /><br><br>
    <input type="text" id="job" name="job" /><br><br>
    <input type="submit" id="submit" name="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#name').focus();
    });
    function submitForm(){
        $.ajax({
            method: "POST",
            url: "fell.php",
            data: $("#myFrom").serialize(),
            success: function(status) {
                alert("successfull");
            }
        });
        return false;
    }
</script>
相关文章：