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

Home

Web Front-end

HTML Tutorial

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

黄舟

May 26, 2018 pm 04:32 PM

form html page

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!

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