Detailed explanation of how to prevent the page from jumping when the Form form is submitted in HTML-HTML Tutorial-php.cn

Detailed explanation of how to prevent the page from jumping when the Form form is submitted in HTML

黄舟

Release： 2018-05-26 16:32:23

Original

21727 people have browsed it

1.1 Solution 1
Form action submits data, but the page does not jump. You can use Iframe to solve this problem.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form提交表单页面不跳转</title>
</head>
<body>
    <form action="" method="post" target="myIframe">
        <label for="input_text">账户：</label>
        <input type="text" id="input_text" name="input_text">
        <label for="input_pwd">密码：</label>
        <input type="text" id="input_pwd" name="input_text">
        <input type="submit" id="submit" name="submit" value="提交">
    </form>
    <iframe id="myIframe" name="myIframe"></iframe>
</body>
</html>

Copy after login

Note: The target attribute of the Form element must be the name attribute of the iframe element that specifies the return result.
Iframe elements can be placed anywhere in the body or in form elements.
1.2 Use Ajax to implement, no refresh technology
Use javascript to directly read the value of the input element, and then put it into the variable in the function for ajax to process.
Example - js serialize or serializeArray method to serialize form data:

<form>  
First name: <input type="text" name="FirstName" value="Bill" /><br />  
Last name: <input type="text" name="LastName" value="Gates" /><br />  
</form>  
<button id="btn">序列化表单值</button>

Copy after login

$("#btn").click(function(){
var x=$("form").serializeArray();  
console.log(x); //执行结果：[{name: "FirstName", value: "Bill" },{name: "LastName",  value: "Gates" }]
var y=$("form").serialize();
console.log(y); //执行结果：FirstName=Bill&LastName=Gates 
});

Copy after login

Note: The serializeArray() method will return a json value, and serialize () method will return a string value.

The above is the detailed content of Detailed explanation of how to prevent the page from jumping when the Form form is submitted in HTML. For more information, please follow other related articles on the PHP Chinese website!