Home > Backend Development > PHP Problem > How to press enter without submitting the form and submit the form in php

How to press enter without submitting the form and submit the form in php

PHPz
Release: 2023-03-27 17:18:02
Original
836 people have browsed it

When we write a form, we often encounter such a situation: when the user presses Enter in the input box, the form will be automatically submitted, which can easily cause problems such as misoperation and information loss.

This article will introduce to you how to implement two methods of pressing enter without submitting the form and submitting the form in PHP, so as to better meet the needs of users.

1. Enter without submitting the form

1.Use JavaScript to achieve
We can use JavaScript to prevent the form from automatically submitting when the user presses the Enter key to the server. The code is as follows:

<script>
    document.onkeydown = function(event) {
        var e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13 && e.target.tagName.toLowerCase() != 'textarea') {
            //阻止表单提交
            return false;
        }
    }
</script>
Copy after login

2. Use jQuery to implement

In addition, we can also use the preventDefault() method in jQuery to prevent form submission. The code is as follows:

<script>
    $(document).on('keydown', function(event) {
        if (event.keyCode == 13 && event.target.tagName.toLowerCase() != 'textarea') {
            event.preventDefault();
        }
    });
</script>
Copy after login

2. Press Enter to submit the form

If we want the user to automatically submit the form by pressing the Enter key after entering the information, we can This is achieved in two ways.

1. Use JavaScript to implement

We can listen to the event of the Enter key in the text box and trigger the form submission event when the user presses the Enter key. The code is as follows:

<script>
    function submitForm() {
        document.formName.submit(); //提交表单
    }

    document.getElementById('input').onkeydown = function(event) {
        var e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            submitForm();
        }
    }
</script>
Copy after login

2. Use the form attribute of HTML5

In HTML5, we can use the form attribute to bind the input box to the form, so that when the user presses the Enter key in the input box, the form will Submit automatically. The code is as follows:

<form action="submit.php" method="post">
    <input type="text" id="input" name="input" form="myform" />
    <button type="submit" form="myform">提交</button>
</form>
Copy after login

In this example, the form attribute of the input box points to the form ID, and the form attribute of the submit button also points to the form ID. In this way, when the user presses the Enter key, the content in the input box will be submitted to the server.

Summary

When writing web forms, we must take into account the user's behavioral habits and needs to improve the user experience. This article introduces how to implement two methods of pressing Enter without submitting the form and pressing Enter to submit the form in PHP. I hope this article can provide you with some help.

The above is the detailed content of How to press enter without submitting the form and submit the form in php. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
php
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template