Rafraichissement de page et bouton submit

lifa5 Messages postés 43 Date d'inscription Statut Membre Dernière intervention -
lifa5 Messages postés 43 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Rafraichissement de page et bouton submit
Impossible de supprimer une page word - Guide
Diagnostic bouton photo - Accueil - Outils
Numéro de page word - Guide
Bouton on/off comment savoir ✓ - Forum Matériel & Système
Imprimer tableau excel sur une page - Guide

9 réponses

Réponse 1 / 9

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

Merci de votre reponse je vais tester pour voir

Réponse 2 / 9

lifa5 Messages postés 43 Date d'inscription Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

OK et merci je vais essayer de voir

Réponse 7 / 9

lifa5 Messages postés 43 Date d'inscription Statut Membre Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Quel est la touche shift sur le clavier

Bouton ON OFF, O ou I ?

ou est la touche shift sur un clavier

Touche "home" sur pc portable.

Votre réponse

Discussions similaires