Hongmu Notes
Home Language Notes Form form, after clicking submit, if the submission is successful, a pop-up window will prompt that the submission is successful. After clicking, it will jump to a new page.
Language Notes JavaScript

Form form, after clicking submit, if the submission is successful, a pop-up window will prompt that the submission is successful. After clicking, it will jump to a new page.

Form form, after clicking submit, if the submission is successful, a pop-up window will prompt that the submission is successful. After clicking, it will jump to a new page.

You can use JavaScript to achieve this functionality. The specific steps are as follows:

  1. Add a submit button to the form and add an event listener to it.
  2. Use the XMLHttpRequest object in the event listener to submit form data to the server.
  3. Check the status code returned by the server in the onreadystatechange event handler of the XMLHttpRequest object. If it is 200, the submission is successful, and a prompt box will pop up.
  4. Add a "Confirm" button in the prompt box. When the user clicks the Confirm button, use the window.location.href property to jump to a new page.

Here is sample code:

<form id="myForm">
  <!-- 在表单中添加需要提交的表单元素 -->
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit" id="submitBtn">提交</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const submitBtn = document.getElementById('submitBtn');

  submitBtn.addEventListener('click', function(event) {
    event.preventDefault(); // 防止表单自动提交

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        alert('提交成功!');
        window.location.href = '/newpage'; // 跳转到新页面
      }
    };

    xhr.send(new FormData(form));
  });
</script>

Please note that the above sample code is only used to demonstrate how to implement the described functions, and you need to adjust it according to the actual situation.

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

js move the mouse up to modify the style attribute

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...
👁 130

Recommended reading

Responsive Laser Cutting Machine Website Template (Bilingual) – 1110

Responsive Laser Cutting Machine Website Template (Bilingual) – 1110 Practical Collection Yiyou template

This EyouCMS responsive bilingual website template is ideal for the laser cutting machinery industry. Its modern, precision-oriented design effectively showcases laser cutting equipment products, technical specifications, competitive advantages, and project case studies. The multilingual support enables machinery manufacturers to promote their brands across global markets. Template Overview | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Common Installation Questions for EyouCMS...
👁 33
Kitchen and Bathroom Hardware Materials Company Website Template 0270

Kitchen and Bathroom Hardware Materials Company Website Template 0270 Practical Collection Yiyou template

An eyouCMS website template designed for kitchen and bathroom hardware and materials manufacturers. Its professional and practical design enables effective showcasing of kitchen and bathroom hardware products, material ranges, engineering applications, and brand image. This template helps kitchen and bathroom hardware companies present their products online and attract customers in the home renovation and construction sectors. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EasyCMS...
👁 31
(Adaptive Mobile Version) HTML5 Responsive Fitness Club PBootCMS Website Template – Green Fitness Website Source Code Download – 0627

(Adaptive Mobile Version) HTML5 Responsive Fitness Club PBootCMS Website Template – Green Fitness Website Source Code Download – 0627 Practical Collection pbootcms Template

A responsive PbootCMS website template for fitness clubs, featuring a green color scheme and supporting both PC and WAP devices. Its vibrant design is ideal for showcasing the gym environment, class schedules, and coaching team. This template helps fitness clubs attract members online and enhance their brand awareness. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5....
👁 46
Responsive water purification system website template (Bilingual) 1111

Responsive water purification system website template (Bilingual) 1111 Practical Collection Yiyou template

An eyoucms responsive bilingual website template for the water purifier and water purification equipment industry. The design style is technological and environmentally friendly, and can display water purification products, water treatment systems, technical parameters, export advantages and brand image. Multi-language support helps businesses promote their brands in global markets. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Yiyou CMS installation instructions...
👁 61
Responsive Security Association Website Template 0271

Responsive Security Association Website Template 0271 Practical Collection Yiyou template

This EyouCMS responsive template is ideal for security associations, featuring a professional and sophisticated design that effectively showcases the association's functions, member services, industry trends, and technical standards. It helps security associations establish an online industry information exchange platform. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 42
(Adaptive mobile version) Responsive PBootCMS Law Firm Website Template – Blue Law Firm Website Source Code Download – 0628

(Adaptive mobile version) Responsive PBootCMS Law Firm Website Template – Blue Law Firm Website Source Code Download – 0628 Practical Collection pbootcms Template

A responsive law firm and legal consulting PbootCMS website template, supporting PC and WAP. The design style is blue and professional, suitable for individual lawyers or law firms to display legal services and successful cases. It helps law firms establish a professional image online and attract customers with legal needs. Template display Installation instructions Website backend:/admin.php Account: admin Password: admin Unzip password: www.4s5…
👁 46