Soumettre le formulaire sans recharger la page

Question

J'ai un site de petites annonces, et sur la page où les annonces sont affichées, je crée un formulaire "Envoyer un conseil à un ami"...

Ainsi, toute personne qui le souhaite peut envoyer une copie de l'annonce à l'adresse électronique d'un ami.

Je suppose que le formulaire doit être soumis à une page php, n'est-ce pas ?

<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>

Lors de la soumission du formulaire, la page est rechargée... Je ne veux pas de cela...

Existe-t-il un moyen de faire en sorte qu'il ne se recharge pas et qu'il envoie quand même le courrier ? De préférence sans ajax ou jquery...

Answer 1

J'ai trouvé ce que je pense être un moyen plus facile. Si vous placez une Iframe dans la page, vous pouvez rediriger la sortie de l'action à cet endroit et la faire apparaître. Vous pouvez aussi ne rien faire, bien sûr. Dans ce cas, vous pouvez définir l'affichage de l'iframe sur none.

<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
    <input type="submit" value="Skicka Tips">
    <input type="hidden" name="ad_id" value="2">            
</form>

Answer 2

Vous devrez soumettre une requête ajax pour envoyer le courrier électronique sans recharger la page. Jetez un coup d'œil à http://api.jquery.com/jQuery.ajax/

Votre code devrait être à peu près le suivant :

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

Le formulaire sera soumis en arrière-plan au send_email.php qui devra traiter la demande et envoyer le courrier électronique.

Answer 3

F

<iframe name="frame"></iframe>

A

<form target="frame">
</form>

a

iframe{
  display: none;
}

Answer 4

Soit vous utilisez AJAX, soit vous

• créer et ajouter une iframe au document
• fixer le nom de l'iframe à "foo".
• fixer la cible du formulaire à 'foo'
• soumettre
• faire en sorte que l'action du formulaire rende du javascript avec 'parent.notify(...)' pour donner un retour d'information
• vous pouvez éventuellement supprimer l'iframe

Answer 5

SOUMETTRE LE FORMULAIRE SANS RECHARGER LA PAGE ET OBTENIR LE RÉSULTAT DES DONNÉES SOUMISES SUR LA MÊME PAGE.

Voici une partie du code que j'ai trouvé sur Internet et qui résout ce problème :

1.) IFRAME

Lorsque le formulaire est soumis, l'action est exécutée et cible l'iframe spécifique à recharger.

index.php

<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>

iframe_content.php

<?php
$Submit = isset($_POST['Submit']) ? $_POST['Submit'] : false;
$Name = isset($_POST['Name']) ? $_POST['Name'] : '';
if($Submit){
 echo $Name;
}
?>

2.) AJAX

Index.php :

<form >
    <input type="" name="name" id="name">
    <input type="" name="descr" id="descr">
    <input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function clickButton(){
    var name=document.getElementById('name').value;
    var descr=document.getElementById('descr').value;
    $.ajax({
        type:"post",
        url:"server_action.php",
        data: 
        {  
           'name' :name,
           'descr' :descr
        },
        cache:false,
        success: function (html) 
        {
           alert('Data Send');
           $('#msg').html(html);
        }
    });
    return false;
 }
</script>

action_serveur.php

<?php 
$name = isset($_POST['name']) ? $_POST['name'] : '';
$descr = isset($_POST['descr']) ? $_POST['descr'] : '';

echo $name;
echo $descr;

?>

Tags : php ajax jquery côté serveur html