Soumettre le formulaire sans recharger la page
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 pourboire de l'annonce à l'adresse électronique 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 ...
Y at-il un moyen de ne pas recharger et toujours 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 oeil à http://api.jquery.com/jQuery.ajax/
Votre code devrait être quelque chose comme:
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
Le formulaire sera soumis en arrière-plan à la page send_email.php qui devra gérer la demande et envoyer le courrier électronique.
J'ai trouvé ce que je pense être un moyen plus facile. Si vous mettez un Iframe dans la page, vous pouvez 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 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>
Vous utilisez soit AJAX ou vous
- créer et ajouter un iframe au document
- définissez le nom de l'iframes sur 'foo'
- définir la cible des formulaires sur 'foo'
- soumettre
- avoir l'action de formulaires rendre javascript avec 'parent.notify (...)' pour donner un retour
- éventuellement vous pouvez supprimer l'iframe
La méthode la plus rapide et la plus simple consiste à utiliser un iframe . Placez un cadre au 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;
}
c’est exactement comme cela POUVAIT fonctionner sans jQuery et AJAX et cela fonctionne très bien avec un simple iFrame Je l'aime, fonctionne dans Opera10, FF3 et IE6. Merci à certaines des affiches ci-dessus me indiquant 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 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>
');
}
Soumettre le formulaire sans recharger la page et obtenir le résultat des données soumises dans la même page
Voici quelques-uns des codes que j'ai trouvés sur Internet et qui résolvent ce problème
Fichier d'index:
<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;
?>
Cela devrait résoudre votre problème.
Dans ce code, après avoir cliqué sur le bouton d'envoi, nous appelons jquery ajax et nous passons l'URL pour poster
tapez POST/GET
données: informations sur les données que vous pouvez sélectionner, entre autres.
success: rappel si tout est ok du serveur
paramètre de fonction text, 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 état quelconque, etc. 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>
Il est indispensable de prendre l'aide de jquery-ajax dans ce cas. Sans ajax, il n’existe actuellement aucune solution.
Tout d’abord, appelez une fonction JavaScript lors de la soumission du formulaire. Il suffit de définir onsubmit="func()". Même si la fonction est appelée, l'action par défaut de la soumission sera effectuée. S'il est exécuté, il n'y aurait aucun moyen d'empêcher la page d'actualiser ou de 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()
Maintenant, il n'y aura pas de redirection ou d'actualisation. Donc, vous faites simplement un appel ajax à partir de func() et faites ce que vous voulez faire quand l'appel se termine.
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(){...},
});
}
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 fichiers téléchargés (ce que nous savons ne peut pas être fait via AJAX), et cela a fonctionné à merveille.
Avez-vous essayé d'utiliser un iFrame? Aucun ajax et la page d'origine ne se chargera pas.
Vous pouvez afficher le formulaire d'envoi en tant que page distincte à l'intérieur de l'iframe. Lorsqu'il sera soumis, la page externe/conteneur ne sera pas rechargée. Cette solution ne fera pas usage d'aucun type d'ajax.
J'ai fait quelque chose de similaire à la requête ci-dessus, mais je devais réinitialiser mes toiles de données de formulaire et de pièces jointes graphiques ...
<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>
Une autre possibilité consiste à créer un lien javascript direct vers votre fonction:
<form action="javascript:your_function();" method="post">
...
si vous vous soumettez à la même page où se trouve le formulaire, vous pouvez écrire les balises de formulaire sans action et le soumettre, comme ceci
<form method='post'> <!-- you can see there is no action here-->
Vous devrez utiliser JavaScript sans créer une iframe (approche laide).
Vous pouvez le faire en JavaScript. utiliser jQuery le rendra indolore.
Je vous suggère de consulter AJAX et de publication.