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

Question

Hello friends please am new to jquery and javascript so i copied the code I want to send form to a php page without reloading the page, this code works but i want to click the submit button to send the form and not the enter key:

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

Answer 1

To make the click of the submit button work you should wrap your code in a form element then change your JS code to hook to the submit event of that form. Note that will also give you the 'submit on enter keypress' action by default, so your current keypress handler can be removed. Try this:

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

Answer 2

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>