Rafraichissement de page et bouton submit
Bonjour, je developpe une application web et j'ai un petit souci car on m'a dit je dois faire recours a jquery ou ajax et je vois toujours pas de solution.
Le probleme est ainsi je veut afficher un formilaire a la suite d'un clic bouton de type submit mais la page se recharge a chaque fois c'est à dire le formulaire s'affiche et disparait encore et voici un mon code.
le formulaire:
Voici ma fonction affiche():
lifa8
Le probleme est ainsi je veut afficher un formilaire a la suite d'un clic bouton de type submit mais la page se recharge a chaque fois c'est à dire le formulaire s'affiche et disparait encore et voici un mon code.
<input type="submit" id="sub" value="Rechercher" style="float:right;" onclick="affiche();"/>
le formulaire:
<form id="formedit" method="post" class="aff" name="form2" action="modifier" style="display:none;">
<fieldset align="center">
<legend id="mod">Modification d'un utlisateur</legend>
<input type="hidden" name="id" value="${user.id}"/>
<label id="pre">Prenom:</label>
<input type="text" name="prenom" value="${user.prenom}"/></br></br>
<label id="pre">Nom: </label>
<input type="text" name="nom" value="${user.nom}"/></br></br>
<label id="pre">Email: </label>
<input type="text" name="email" value="${user.email}"/></br></br>
<label id="pre">Telephone: </label>
<input type="text" name="tel" value="${user.tel}"/></br></br>
<label id="pre">Password: </label>
<input type="password" name="pwd" value="${user.password}"/></br>
<font color="black">${sms}</font>
<input type="submit" value="Modifier" style="float:right;"/>
</fieldset>
</form>
Voici ma fonction affiche():
function affiche(){
document.getElementById('formedit').style.display='block';
return false;
}
| EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI Merci d'y penser dans tes prochains messages. |
lifa8
9 réponses
-
ModérateurBonjour,
Regardes du côté dee.preventDefault()
Par exemple :$("form").submit(function (e) { e.preventDefault(); // this will prevent from submitting the form. //le reste de ton code lorsqu'on "submit" ton formulaire // (tu peux même te passer du onclick sur ton bouton... });
-
Ca ne marche toujours pas ou peut etre je comprend car je suis novice sur jauery ou ajax. Ce que je veut est simplement d'afficher le formulaire sans recharger la page
-
je veut afficher ce formulaire a la suite d'un clic sur le bouton submit mon code est ainsi:
bouton submit: <input type="submit" id="sub" value="Rechercher" style="float:right;" onclick="affiche();"/>
Fonction affiche():function affiche(){ document.getElementById('formedit').style.display='block'; return false; }
Et voici le formulaire que je veut afficher:<form id="formedit" method="post" class="aff" name="form2" action="modifier" style="display:none;"> <fieldset align="center"> <legend id="mod">Modification d'un utlisateur</legend> <input type="hidden" name="id" value="${user.id}"/> <label id="pre">Prenom:</label> <input type="text" name="prenom" value="${user.prenom}"/></br></br> <label id="pre">Nom: </label> <input type="text" name="nom" value="${user.nom}"/></br></br> <label id="pre">Email: </label> <input type="text" name="email" value="${user.email}"/></br></br> <label id="pre">Telephone: </label> <input type="text" name="tel" value="${user.tel}"/></br></br> <label id="pre">Password: </label> <input type="password" name="pwd" value="${user.password}"/></br> <font color="black">${sms}</font> <input type="submit" value="Modifier" style="float:right;"/> </fieldset> </form>
Et a chaque que je clic le formulaire s'affiche et disparaitEDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI
Merci d'y penser dans tes prochains messages.
lifa8-
Modérateur1 - Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
2 - .... mais où est le code que je t'ai donné ??
3 - ... sinon.. encore plu simple ....
Au lieu dutiliser un input de type SUBMIT .. tu mets un BUTTON<input type="button" id="sub" value="Rechercher" style="float:right;" onclick="affiche();"/>
-
-
Si je met un input de type bouton mes données ne seront pas afficher. Je dois rechercher dans ma base a partir de mon id et sortir les champs renseigner dans la base.
-
Modérateur
je dois rechercher dans ma base
... et pour cela .... comme cela te l'a été dit avant que tu poses ta question :
car on m'a dit je dois faire recours a jquery ou ajax
il te faut utiliser l' AJAX !
Il n'y a que comme cela que tu pourras afficher des données issues de ta BDD sans recharger la page...
Car si tu persistes à vouloir faire ça avec un SUBMIT ... ta page se rechargera systématiquement !
Il existe de nombreux exemples (et tutos) sur le net ..... les as tu au moins regardé .?
Qu'as tu essayé ?
Voici un exemple récent :
https://forums.commentcamarche.net/forum/affich-32889154-lien-pour-supprimer-une-ligne-dans-un-table-avec-php-ajax-jquery#21
-
-
ok je vois et j'avais essayer ceci:
$(document).read(function(){
$(".aff").on('onclick',function(){
var url =
$(this).prop('submit');
$("#formedit").load(url);
event.onclick();
});
});
-
ModérateurTu te moques de moi ???
Où est la coloration syntaxique ??? !!!!!!
Dernier rappel :
**** Attention ****
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
ENsuite.... le LOAD charge le contenu d'une page ..... ce n'est pas de l'AJAX !
Regardes donc l'exemple que je t'ai donné !
-
-
OK et merci je vais essayer de voir
-
j'ai regardé mais bon ça m'inspire pas grand chose sur mon probleme
-
ModérateurTu fais un fichier PHP (qui sera appelé par ton script javascript AJAX) et qui te retournera les données à mettre dans ton formulaire
par exemple :<?php // page user.ajx.php $result = array(); $result['id'] = 1; $result['nom'] = "nomDeFamille"; $result['prenom'] = "toto"; //envoie du résultat en JSON echo json_encode($result);
Ton script AJAX (que tu peux mettre dans ta fonction affiche)
comme ceci :function affiche(){ //nécéssite l'utilisation de la librairie JQUERY $.ajax({ type: 'POST', dataType : "json", url: "user.ajx.php", data: {}, success: function(reponse){ console.log(reponse); //le temps des tests //remplissage du formulaire depuis les données // récupérées dans l'ajax $("#id").val(reponse.id); $("#nom").val(reponse.nom); $("#prenom").val(reponse.prenom); //affichage du formulaire $('#formedit').css('display','block'); }, error: function(xhr, status, error) { //en cas d'erreur dans l'ajax console.log ("erreur !"); var err = status + " : " +xhr.responseText; alert(err.Message); } }); }
Bien entendu.. tu auras pris le soin d'importer dans ta page la librairie JQUERY
que tu peux télécharger ici :
http://code.jquery.com/jquery-1.11.3.min.js
(il suffit de faire ENREGISTRER SOUS dans ton navigateur et de le mettre dans un fichier à la racine de ton site sous le nom : jquery.js
Puis de l'inclure dans ta page en faisant :<script src="jquery.js"></script>
-
-
-
C'est un fichier jsp et je vais voir avec peut etre ça fera l'affaire.Encore une fois merci pour avoir repondu a mes questions
-
ça a toujours pas marché j'ai essayé avec ce code et ça empêche a mon server de démarrer
