Soumettre le formulaire sans recharger la page

Question

Soumettre le formulaire sans recharger la page

Demandé el 19 de Mai, 2010: Quand la question a-t-elle été
350429 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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...

Demandé el 19 de Mai, 2010 par Anonymous12345

Answer 1

5 Réponses

Answer 2

7voto

Utilisateur non enregistré Points 0

Une autre possibilité consiste à créer un lien javascript direct vers votre fonction :

<form action="javascript:your_function();" method="post">

...

Répondu el 7 de Juillet, 2019 par Utilisateur non enregistré (0 Points )

Answer 3

4voto

Tyler Points 153

C'est exactement comme cela que cela peut fonctionner sans jQuery et AJAX et cela fonctionne très bien en utilisant une simple iFrame. J'ADORE, cela fonctionne avec Opera10, FF3 et IE6. Merci à tous ceux qui m'ont indiqué la bonne direction.

<select name="aAddToPage[65654]" 
onchange="
    if (bCanAddMore) {
        addToPage(65654,this);
    }
    else {
        alert('Could not add another, wait until previous is added.'); 
        this.options[0].selected = true;
    };
" />
<option value="">Add to page..</option>
[more options with values here]</select>

<script type="text/javascript">
function addToPage(iProduct, oSelect){
    iPage = oSelect.options[oSelect.selectedIndex].value;
    if (iPage != "") {
        bCanAddMore = false;
        window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
        window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
        window.hiddenFrame.document.formFrame.submit();
    }
}
var bCanAddMore = true;</script> 

<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

t

if( $_GET['p'] == 'addProductToPage' ){  // hidden form processing
  if(!empty($_POST['iAddToPage'])) {
    //.. do something with it.. 
  }
  print('
    <html>
        <body>
            <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');
}

Répondu el 12 de Décembre, 2010 par Tyler (153 Points )

Answer 4

4voto

Matas Lesinskas Points 165

Cela devrait résoudre votre problème.
Dans ce code, après avoir cliqué sur le bouton de soumission, nous appelons jquery ajax et nous passons l'url à l'envoi.
type POST/GET
données : informations sur les données que vous pouvez sélectionner dans les champs de saisie ou dans tout autre champ.
sucess : callback si tout est ok depuis le serveur
paramètre de la fonction texte, html ou json, réponse du serveur
En cas de succès, vous pouvez écrire des avertissements si les données que vous avez obtenues sont dans un certain état, etc. ou exécuter votre code pour savoir ce qu'il faut faire ensuite.

<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" id="submit" value="Skicka Tips"/>
 <input type="hidden" id="ad_id" name="ad_id" />
 </form>
<script>
$( "#tip" ).submit(function( e ) {
    e.preventDefault();
    $.ajax({
        url: tip.php,
        type:'POST',
        data:
        {
            tip_email: $('#tip_email').val(),
            ad_id: $('#ad_id').val()
        },
        success: function(msg)
        {

            alert('Email Sent');
        }               
    });
});
</script>

Répondu el 3 de Novembre, 2016 par Matas Lesinskas (165 Points )

Answer 5

3voto

wtaniguchi Points 893

Vous pouvez essayer de définir l'attribut cible de votre formulaire dans une iframe cachée, de sorte que la page contenant le formulaire ne soit pas rechargée.

J'ai essayé avec des téléchargements de fichiers (dont nous savons qu'ils ne peuvent pas être effectués via AJAX), et cela a fonctionné à merveille.

Répondu el 19 de Mai, 2010 par wtaniguchi (893 Points )

Answer 6

2voto

DanC Points 3057

Avez-vous essayé d'utiliser une iFrame ? Pas d'ajax, et la page d'origine ne se chargera pas.

Vous pouvez afficher le formulaire de soumission comme une page séparée à l'intérieur de l'iframe, et lorsqu'il est soumis, la page extérieure/conteneur ne sera pas rechargée. Cette solution n'utilisera aucune forme d'ajax.

Répondu el 26 de Mai, 2010 par DanC (3057 Points )

Soumettre le formulaire sans recharger la page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Soumettre le formulaire sans recharger la page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: