Rafraichissement de page et bouton submit

Fermé

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016 - Modifié par jordane45 le 19/12/2015 à 16:52
lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016 - 21 déc. 2015 à 10:29

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.

<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

A voir également:

Rafraichissement de page et bouton submit
Supprimer une page word - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
Word numéro de page 1/2 - Guide
Créer une page facebook - Guide

9 réponses

Réponse 1 / 9

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 16:56

Bonjour,

Regardes du côté de

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


  });

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 18:55

Merci de votre reponse je vais tester pour voir

Réponse 2 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 19:17

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 19:19

Ca ne marche toujours pas

Ben.... oui... mais...... si tu nous montres pas exactement ce que tu as essayé ... nous ne pourrons pas trouver où tu as pu faire une erreur....

Réponse 3 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
Modifié par jordane45 le 19/12/2015 à 20:18

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 disparait

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.

lifa8

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 20:20

1 - 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();"/>

Réponse 4 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 21:23

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.

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 19/12/2015 à 21:41

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 21:45

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 21:55

Tu 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é !

Réponse 6 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 22:14

OK et merci je vais essayer de voir

Réponse 7 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
19 déc. 2015 à 22:17

j'ai regardé mais bon ça m'inspire pas grand chose sur mon probleme

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 19/12/2015 à 22:35

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 22:35

Bien entendu .. pour l'exemple... dans la page user.ajx.php .. j'ai mis des données en DUR....
Maintenant.. à toi de faire en sorte que les données viennent de ta BDD.....

Réponse 8 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
20 déc. 2015 à 10:23

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

Réponse 9 / 9

lifa5 Messages postés 43 Date d'inscription vendredi 20 juin 2014 Statut Membre Dernière intervention 3 mai 2016
21 déc. 2015 à 10:29

ça a toujours pas marché j'ai essayé avec ce code et ça empêche a mon server de démarrer

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

[référencement] Ne pas être référencé

Bouton ON OFF, O ou I ?

recherche d'u

Chemin Logo du site de la Cité de l'espace

Discussions similaires

Newsletters