Javascript formulaire probleme

jm -  
Bonjour,

Je voudrais savoir comment faire pour envoyer les données entrés a l'aide d'un script javascript qui permet a la suite d'un clique sur un lien d'afficher un nouveau champ pour entré des nouvelle données, c'est ces données que je veux envoyer dans la base de donnée, comment faire ??
Voici le code :

<html>

<form action="test.html" method="post">
<fieldset id="zone_text">
<p class="lien"<a href="#" onClick="javascript:add()">Ajouter un champ texte<a></p><br />
</fieldset>

</form>
</p>
<script type="text/javascript">
add();
</script>

<script type="text/javascript">

function refresh(event){
//On sélectionne le premier et le deuxième fieldset
var liste = document.getElementById("liste_deroulante");
var text_fieldset = document.getElementById("zone_text");

//On récupère la position de notre champ texte
var node_source = (document.all)?event.srcElement:event.target;
var position = node_source.previousSibling.nodeValue.split(" ")[1];

//On récupère la valeur dans la champ texte
var labels = text_fieldset.getElementsByTagName("label");
var label = labels[position-1];
var input = label.getElementsByTagName("input")[0];

}

function del(event){
//on sélectionne le premier fieldset et on récupère tous les label qu'il y a à l'intérieur
var text_fieldset = document.getElementById("zone_text");
var labels = text_fieldset.getElementsByTagName("label");

//On récupère le noeud qui émet l'évènement et sa position grâce au texte Valeur x
var node_source = (document.all)?event.srcElement:event.target;
var position = node_source.previousSibling.firstChild.nodeValue.split(" ")[1];

//On décale d'un cran inférieur tous les éléments situés après l'élément à supprimer
for(var i=position;i<labels.length;i++){
var label = labels[i];
var input = label.getElementsByTagName("input")[0];

input.setAttribute("name","nom"+i);

label.firstChild.nodeValue = "Valeur "+i+" ";
}

//Suppression de la zone de texte, du lien et du saut de ligne
var label = labels[position-1];
var lien = label.nextSibling;
var br = lien.nextSibling;
text_fieldset.removeChild(label);
text_fieldset.removeChild(lien);
text_fieldset.removeChild(br);

}

function add(){
//On compte le nombre de label et on sélectionne le premier fieldset
var count = document.getElementsByTagName("label").length;
var text_fieldset = document.getElementById("zone_text");
count ++;

//création du label( <label>Valeur x <input type="text" name="nomx" value="" /></label>)
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","nom"+count);
input.setAttribute("value","");

if(document.all) input.attachEvent("onkeyup",refresh);
else input.addEventListener("keyup",refresh,true);

var nom_label = document.createTextNode("Valeur "+count+" ");
var label = document.createElement("label");
label.appendChild(nom_label);
label.appendChild(input);

//Création des élement br et p ( <p class="lien">Supprimer</p><br /> )
var br = document.createElement("br");
var del_text = document.createTextNode("Supprimer");
var lien_del = document.createElement("p");
lien_del.setAttribute("class","lien");
lien_del.setAttribute("className","lien");

if(document.all) lien_del.attachEvent("onmouseup",del);
else lien_del.addEventListener("mouseup",del,true);

lien_del.appendChild(del_text);

//On raccroche ici tous nos éléments virtuels à une balise de notre fichier XHTML. Ils sont alors affichés
text_fieldset.appendChild(label);
text_fieldset.appendChild(lien_del);
text_fieldset.appendChild(br);

}

</script>
<html>
Configuration: Windows Vista
Firefox 3.5.7

22 réponses

Résumé de la discussion

La discussion porte sur l'envoi de données saisies via un script JavaScript qui, après un clic, affiche des champs supplémentaires et dont les valeurs doivent être envoyées vers une base de données. Plusieurs réponses évoquent l'usage d'une boucle foreach sur les données postées et proposent des approches côté serveur en PHP, notamment l'exploitation de $_POST et l'insertion dans la base via des requêtes. Des détails techniques apparaissent, comme le renommage des champs ou la gestion des tableaux dans $_POST, ainsi que les défis d'insertion lorsque plusieurs valeurs sont envoyées. En cas de solution pratique, certaines interventions recommandent de sécuriser et valider côté serveur, puis d'utiliser un formulaire doté d'un bouton d'envoi pour déclencher le traitement PHP.

Bobot (l’IA à votre service)
  3. avion-f16
    Oui, tu crées une table 'diplomes' par exemple avec les champs qu'il te faut.
    Et dans la boucle foreach, tu fais un mysql_query pour chaque champ.
    Ce que tu mets dans foreach sera exécuté pour chaque champ avec $valeur ayant sa valeur.
    1. jm
      nan je veux que sa rajoute un champ ' diplome i ' ds la base a chak foi ke jen rajoute un de + ! c possible ou pa ?
      2. avion-f16
        Mais tu veux faire quoi avec les données ?
        Tout mettre dans un champ ?
        Je n'ai pas de boule en cristal moi !!!
        1. avion-f16
          Te montrer quoi ?
          Retournes sur le Siteduzero, apparemment tu as sauté la moitié des chapitres !
          1. jm
            Lool non g vu sur le foreach il faut rajouter koi en + ?

            if(!empty($_POST['diplome']))
            {
            $i = 0;
            foreach($_POST['diplome'] as $valeur)
            {
            echo 'diplome['.$i.'] = '.$valeur.'<br />';
            $i++;
            }
            }
        2. jm
          Sérieux jcompren pa tro je débute comme tu peu le voir ! lol tu peu me montré plz ?
          3. avion-f16
            Parce que c'est un tableau ...
            Il faut que tu utilises une boucle Foreach.
            Pour info, je t'ai déjà tout expliqué plus haut !!!
            2. avion-f16
              Non, tu ajoutes "[]" à la fin, après "diplome"
              Comme ceci : name="diplomes[]"
              1. jm
                <p><label for="diplome">Diplomes:</label><input type="text" name="[diplome]" id="diplome" />

                comme sa ??
                1. avion-f16
                  Lis mon premier message !
                  Il faut mettre des crochets à la fin du name !
                  1. avion-f16
                    En mettant des crochets comme je l'ai dit dans le premier message, $_POST['diplomes'] sera un array (tout comme $_POST en est un, qui contient le clé 'diplomes').
                    1. jm
                      g un pb sa marche pas l'insertion test regarde : (corp-cv.php)
                      <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
                      <html>
                      <form id = "form_inscription" action="traitement_cv.php" method=post>

                      <input type="hidden" name="id" value=" <?php echo($result->id) ;?>">
                      <div id="corps">

                      <fieldset>
                      <legend><b>Formation suivie</b></legend>

                      <p><label for="nom_etab">Nom de l'etablissement:</label><input type="text" name = "nom_etab" id="diplome" /><br /></p>

                      <p><label for="specialisation">Specialite/section:</label><input type="text" name = "specialite" id="specialisation" /><br /></p>
                      <fieldset id="zone_text">

                      <p><label for="diplome">Diplomes:</label><input type="text" name="diplome" id="diplome" /><br /></p>
                      <p class="lien"<a href="#" onClick="javascript:add()">Ajouter un diplome<a></p>
                      </fieldset>
                      <script type="text/javascript">
                      add();
                      </script>

                      <?php

                      if(!empty($_POST['diplome']))
                      {
                      $i = 0;
                      foreach($_POST['diplome'] as $valeur)
                      {
                      echo 'diplome['.$i.'] = '.$valeur.'<br />';
                      $i++;
                      }
                      }

                      ?>
                      <p><label for="annee">Annee</label><input type="text" name = "annee" id="annee" /> <br /></p></p>

                      Commentaires :
                      <br><TEXTAREA name="com" rows=10 COLS=50></TEXTAREA> </br>

                      </fieldset>
                      <br />

                      <fieldset>
                      <legend><b>Profession</b></legend> <br />
                      <p><label for="entreprise">Entreprise actuelle :</label><input type="text" name = "entreprise" id="entreprise" /> <br /></p></p>
                      <p><label for="fonction">Fonction actuelle :</label><input type="text" name = "fonction" id="fonction" /> <br /></p></p>
                      <p><label for="secteur">Secteur d'activite :</label><input type="text" name = "secteur" id="secteur" /> <br /></p></p>
                      <p><label for="adresse_pro"> Adresse professionnelle :</label><input type="text" name = "adresse_pro" id="adresse_pro" /> <br /></p></p>
                      <p><label for="tel_pro"> Telephone professionnel :</label><input type="text" name = "tel_pro" id="annee" /> <br /></p></p>
                      <p><label for="email_pro"> Email professionnel :</label><input type="text" name = "email_pro" id="email_pro" /> <br /></p></p>

                      </fieldset>
                      <br />

                      <center><input type="submit" value="Ajouter" /></center>
                      </div>
                      </form>

                      <script type="text/javascript">

                      function refresh(event){
                      //On sélectionne le premier et le deuxième fieldset
                      var liste = document.getElementById("liste_deroulante");
                      var text_fieldset = document.getElementById("zone_text");

                      //On récupère la position de notre champ texte
                      var node_source = (document.all)?event.srcElement:event.target;
                      var position = node_source.previousSibling.nodeValue.split(" ")[1];

                      //On récupère la valeur dans la champ texte
                      var labels = text_fieldset.getElementsByTagName("label");
                      var label = labels[position-1];
                      var input = label.getElementsByTagName("input")[0];

                      }

                      function del(event){
                      //on sélectionne le premier fieldset et on récupère tous les label qu'il y a à l'intérieur
                      var text_fieldset = document.getElementById("zone_text");
                      var labels = text_fieldset.getElementsByTagName("label");

                      //On récupère le noeud qui émet l'évènement et sa position grâce au texte Valeur x
                      var node_source = (document.all)?event.srcElement:event.target;
                      var position = node_source.previousSibling.firstChild.nodeValue.split(" ")[1];

                      //On décale d'un cran inférieur tous les éléments situés après l'élément à supprimer
                      for(var i=position;i<labels.length;i++){
                      var label = labels[i];
                      var input = label.getElementsByTagName("input")[0];

                      input.setAttribute("name","diplome"+i);

                      label.firstChild.nodeValue = "Diplome "+i+" ";
                      }

                      //Suppression de la zone de texte, du lien et du saut de ligne
                      var label = labels[position-1];
                      var lien = label.nextSibling;
                      var br = lien.nextSibling;
                      text_fieldset.removeChild(label);
                      text_fieldset.removeChild(lien);
                      text_fieldset.removeChild(br);

                      }

                      function add(){
                      //On compte le nombre de label et on sélectionne le premier fieldset
                      var count = document.getElementsByTagName("label").length;
                      var text_fieldset = document.getElementById("zone_text");
                      count ++;

                      //création du label( <label>Valeur x <input type="text" name="nomx" value="" /></label>)
                      var input = document.createElement("input");
                      input.setAttribute("type","text");
                      input.setAttribute("name","diplome"+count);
                      input.setAttribute("value","");

                      if(document.all) input.attachEvent("onkeyup",refresh);
                      else input.addEventListener("keyup",refresh,true);

                      var nom_label = document.createTextNode("Diplome "+count+" ");
                      var label = document.createElement("label");
                      label.appendChild(nom_label);
                      label.appendChild(input);

                      //Création des élement br et p ( <p class="lien">Supprimer</p><br /> )
                      var br = document.createElement("br");
                      var del_text = document.createTextNode("Supprimer");
                      var lien_del = document.createElement("p");
                      lien_del.setAttribute("class","lien");
                      lien_del.setAttribute("className","lien");

                      if(document.all) lien_del.attachEvent("onmouseup",del);
                      else lien_del.addEventListener("mouseup",del,true);

                      lien_del.appendChild(del_text);

                      //On raccroche ici tous nos éléments virtuels à une balise de notre fichier XHTML. Ils sont alors affichés
                      text_fieldset.appendChild(label);
                      text_fieldset.appendChild(lien_del);
                      text_fieldset.appendChild(br);

                      }
                      </script>

                      code de la page traitement_cv.php :
                      <?php

                      include('connect_bdd.php');

                      @$fonction = $_POST['fonction'];
                      @ $diplome = $_POST['diplome'];
                      @ $specialite = $_POST['specialite'];
                      @ $nom_etab = $_POST['nom_etab'];
                      @ $annee = $_POST['annee'];
                      @ $entreprise = $_POST['entreprise'];
                      @ $secteur = $_POST['secteur'];
                      @ $entreprise = $_POST['entreprise'];
                      @ $adresse_pro = $_POST['adresse_pro'];
                      @ $tel_pro = $_POST['tel_pro'];
                      @ $email_pro = $_POST['email_pro'];

                      $id = $_POST['id'];

                      $interro = "insert into cv
                      values ('','$nom_etab','$specialite','$diplome','$annee','$entreprise','$fonction','$secteur','$adresse_pro','$tel_pro','$email_pro','$id')";

                      $resultat = mysql_query($interro) or die (mysql_error());

                      if (! $resultat)
                      {
                      echo "Pas enregistré";
                      }
                      else
                      {
                      echo " Cv ajouter";
                      echo '<p align="left"><a href = "index.php"> retour a lacceuil</a>';
                      }

                      exit;

                      ?>
                  2. avion-f16
                    Pour éviter l'erreur fais une condition :
                    if(!empty($_POST['diplome'])) {
    $i = 0; 
    foreach($_POST['diplome'] as $valeur) { 
        echo 'diplome['.$i.'] = '.$valeur.'<br />'; 
        $i++; 
    }
}
                    1. jm
                      Ok et la ca va ajouté le résultat dans la base directement mai comment les nouveau champs vont se crée ds la base ? diplome1 diiplome2.. par exemple
                  3. jm
                    j'ai une erreur :

                    Notice: Undefined index: diplome in D:\EasyPHP5.3.0\www\test\JS2.php on line 17

                    Warning: Invalid argument supplied for foreach() in D:\EasyPHP5.3.0\www\test\JS2.php on line 17
                    ?>

                    il faut que je valide le bouton pour qu'il maffiche les valeurs ?
                    1. avion-f16
                      $i = 0;
                      foreach($_POST['diplome'] as $valeur) {
                      echo 'diplome['.$i.'] = '.$valeur.'<br />';
                      $i++;
                      }
                      1. jm
                        Qu-est-ce que je dois mettre dans la boucle foreach ?

                        je commence comme ceci c bien ca ?

                        foreach($_POST['diplome'])
                        {

                        // je met quoi ici pour envoyer les donnée entrés dans la base ?

                        }
                        • 1
                        • 2

                        Discussions similaires

                        java script error in the main process
                        ceciel2307

                        3 réponses
                        Que signifie alias de formulaire ?
                        sambill

                        4 réponses
                        Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
                        azixe

                        1 réponse
                        Javascript Arrondi à 2 chiffres après la virgule
                        jeremy

                        14 réponses
                        contacter le bon coin
                        breton

                        2 réponses