Home > Web Front-end > JS Tutorial > How to Submit Forms Without Page Reloading?

How to Submit Forms Without Page Reloading?

Barbara Streisand
Release: 2024-12-22 02:23:11
Original
563 people have browsed it

How to Submit Forms Without Page Reloading?

Submitting Forms Without Reloading Pages

You're encountering an issue where a form submission on your classifieds website causes the page to reload. This behavior is undesirable because it disrupts the user experience. To address this, consider the following alternative approaches:

Iframe Redirection

Create an invisible iframe on the page and set the form's target attribute to the iframe's name. This will redirect the form's response to the iframe, preventing the page from reloading.

<iframe name="votar">
Copy after login

Server-Side Scripting

You can have the form submit to a server-side script, such as PHP, which will handle the message sending and redirect the user back to the current page without reloading.

In the PHP script (tip.php):

<?php
// Get the form data
$tip_email = $_POST['tip_email'];
$ad_id = $_POST['ad_id'];

// Send the tip email

// Redirect back to the current page without reloading
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
Copy after login

In your form:

<form name="tip" method="post" action="tip.php">
    Tip somebody: 
    <input 
        name="tip_email"
        type="text" 
        size="30" 
        onfocus="tip_div(1);" 
        onblur="tip_div(2);"
    />
    <input type="submit" value="Skicka Tips" />
    <input type="hidden" name="ad_id" />
</form>
Copy after login

Remember to replace "tip.php" with the actual path to your PHP script and adjust the form action and redirect URL accordingly.

The above is the detailed content of How to Submit Forms Without Page Reloading?. 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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template