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

Ainsi, tous ceux qui le souhaitent peuvent envoyer un conseil de l'annonce à l'adresse e-mail de certains amis.

Je suppose que le formulaire doit être soumis à une page php, non?

<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 ça ...

Existe-t-il un moyen de ne pas le recharger et d'envoyer le courrier? De préférence sans ajax ou jquery ...

Merci

Vous devrez soumettre une demande ajax pour envoyer l'e-mail sans recharger la page. Jetez un œil à http://api.jquery.com/jQuery.ajax/

Votre code doit être quelque chose du genre:

$('#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 à la send_email.phppage qui devra traiter la demande et envoyer le courrier électronique.

J'ai trouvé ce que je pense être un moyen plus simple. Si vous mettez un Iframe dans la page, vous pouvez y rediriger la sortie de l'action et la faire apparaître. Vous ne pouvez rien faire, bien sûr. Dans ce cas, vous pouvez définir l'affichage iframe sur aucun.

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

Vous utilisez AJAX ou vous

• créer et ajouter un iframe au document
• définir le nom des iframes sur 'foo'
• définir la cible des formulaires sur «foo»
• soumettre
• faire en sorte que l'action des formulaires rende javascript avec 'parent.notify (...)' pour donner des commentaires
• vous pouvez éventuellement supprimer l'iframe

Le moyen le plus rapide et le plus simple est d'utiliser une iframe. Mettez un cadre en bas de votre page.

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

Et dans votre forme, faites ceci.

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

et pour rendre le cadre invisible dans votre css.

iframe{
  display: none;
}

Soumettre le formulaire sans recharger la page et obtenir le résultat des données soumises dans la même page

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

1.) IFRAME

Lorsque le formulaire sera soumis, l'action sera exécutée et ciblera 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
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>

2.) AJAX

Index.php:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.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>
    <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>

server_action.php

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

Mots clés: phpAjaxjquerydu côté serveurhtml

C'est un must pour prendre de l'aide jquery-ajaxdans ce cas. Sans ajax, il n'y a actuellement aucune solution.

Tout d'abord, appelez une fonction JavaScript lorsque le formulaire est soumis. Juste réglé onsubmit="func()". Même si la fonction est appelée, l'action par défaut de la soumission sera exécutée. Si elle est effectuée, il n'y aurait aucun moyen d'empêcher la page de se rafraîchir ou de se rediriger. La tâche suivante consiste donc à empêcher l'action par défaut. Insérez la ligne suivante au début de func().

event.preventDefault()

Désormais, il n'y aura ni redirection ni rafraîchissement. Donc, il vous suffit de passer un appel ajax func()et de faire ce que vous voulez à la fin de l'appel.

Exemple:

Forme:

<form id="form-id" onsubmit="func()">
    <input id="input-id" type="text">
</form>

Javascript:

function func(){
    event.preventDefault();
    var newValue = $('#input-field-id').val();
    $.ajax({
        type: 'POST',
        url: '...',
        data: {...},
        datatype: 'JSON',
        success: function(data){...},
        error: function(){...},
    });
}

c'est exactement comment cela peut fonctionner sans jQuery et AJAX et cela fonctionne très bien en utilisant un simple iFrame. I LOVE IT, fonctionne dans Opera10, FF3 et IE6. Grâce à certaines des affiches ci-dessus qui m'indiquent la bonne direction, c'est la seule raison pour laquelle je poste ici:

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

le code php générant la page qui est appelée ci-dessus:

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>
  ');
}

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 transmettons l'URL au
type de publication des
données POST / GET : informations de données, vous pouvez sélectionner des champs de saisie ou tout autre.
succès: rappel si tout va bien à partir du
texte des paramètres de la fonction serveur , html ou json, réponse du serveur
en cas de succès, vous pouvez écrire des avertissements d'écriture si les données que vous avez sont dans une sorte d'état et ainsi de suite. ou exécutez votre code que 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>

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

Je l'ai essayé avec des téléchargements de fichiers (ce que nous savons ne peut pas être fait via AJAX), et cela a fonctionné à merveille.

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

Vous pouvez afficher le formulaire de soumission comme une page distincte dans l'iframe, et lorsqu'il est soumis, la page externe / conteneur ne se recharge pas. Cette solution n'utilisera aucun type d'ajax.

si vous soumettez à la même page où se trouve le formulaire, vous pouvez écrire les balises du formulaire sans action et il sera soumis, comme ceci

<form method='post'> <!-- you can see there is no action here-->

J'ai fait quelque chose de similaire à la jquery ci-dessus, mais j'avais besoin de réinitialiser mes données de formulaire et mes toiles de pièces jointes graphiques. Voici donc ce que j'ai trouvé:

    <script>
   $(document).ready(function(){

   $("#text_only_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").hide();
   });

   $("#pic_radio_button_id").click(function(){
      $("#single_pic_div").show();
      $("#multi_pic_div").hide();
    });

   $("#gallery_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").show();
                 });
    $("#my_Submit_button_ID").click(function() {
          $("#single_pic_div").hide();
          $("#multi_pic_div").hide();
          var url = "script_the_form_gets_posted_to.php"; 

       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
           var canvas=document.getElementById("canvas");
    var canvasA=document.getElementById("canvasA");
    var canvasB=document.getElementById("canvasB");
    var canvasC=document.getElementById("canvasC");
    var canvasD=document.getElementById("canvasD");

              var ctx=canvas.getContext("2d");
              var ctxA=canvasA.getContext("2d");
              var ctxB=canvasB.getContext("2d");
              var ctxC=canvasC.getContext("2d");
              var ctxD=canvasD.getContext("2d");
               ctx.clearRect(0, 0,480,480);
               ctxA.clearRect(0, 0,480,480);
               ctxB.clearRect(0, 0,480,480);        
               ctxC.clearRect(0, 0,480,480);
               ctxD.clearRect(0, 0,480,480);
               } });
           return false;
                });    });
           </script>

Cela fonctionne bien pour moi, pour votre application d'un formulaire html, nous pouvons simplifier ce code jquery comme ceci:

       <script>
        $(document).ready(function(){

    $("#my_Submit_button_ID").click(function() {
        var url =  "script_the_form_gets_posted_to.php";
       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
            } });
           return false;
                });    });
           </script>

Vous devrez utiliser JavaScript sans aboutir à une iframe(vilaine approche).

Vous pouvez le faire en JavaScript; l'utilisation de jQuery le rendra indolore.

Je vous suggère de consulter AJAX et la publication.

Une autre possibilité est de créer un lien javascript direct vers votre fonction:

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

...

La page sera rechargée si vous ne souhaitez pas utiliser javascript

function Foo(){  
   event.preventDefault(); 
 $.ajax(   {  
      url:"<?php echo base_url();?>Controllername/ctlr_function",
      type:"POST",
      data:'email='+$("#email").val(),
      success:function(msg)      {  
         alert('You are subscribed');
      }
   }   );
}

J'ai essayé plusieurs fois une bonne solution et la réponse de @taufique m'a aidé à arriver à cette réponse.

NB : N'oubliez pas de mettre event.preventDefault(); au début du corps de la fonction.

Voici quelques jQuery pour publier sur une page php et récupérer du code HTML:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});