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

Afficher la suite

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.

Réponse 1 / 22
avion-f16
Dans le name mets cequetuveux[]
Puis il te suffira d'explorer l'array $_POST['cequetuveux'] avec un foreach.
Pour l'envoie du form, il faut mettre un <input type="submit" value="Texte" /> puis préciser le script PHP dans l'attribut action de la balise form.

0
Réponse 2 / 22
jm
Tu pourrais me montré comment utiliser le foreach stp un exemple merci avion ^^

0
Réponse 3 / 22
avion-f16
https://www.php.net/manual/fr/control-structures.foreach.php
https://openclassrooms.com/fr/courses#ss_part_1 (descends un peu)

0
Réponse 4 / 22
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 ?

}

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

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 22
avion-f16
$i = 0;
foreach($_POST['diplome'] as $valeur) {
echo 'diplome['.$i.'] = '.$valeur.'<br />';
$i++;
}

0
Réponse 6 / 22
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 ?

0
Réponse 7 / 22
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++; 
    }
}
```
0
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
  
  0
Réponse 8 / 22
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').

0
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;
  
  ?>
  
  0
Réponse 9 / 22
avion-f16
Lis mon premier message !
Il faut mettre des crochets à la fin du name !

0
Réponse 10 / 22
jm
<p><label for="diplome">Diplomes:</label><input type="text" name="[diplome]" id="diplome" />

comme sa ??

0
Réponse 11 / 22
avion-f16
Non, tu ajoutes "[]" à la fin, après "diplome"
Comme ceci : name="diplomes[]"

0
Réponse 12 / 22
jm
Il me met Array ds le champ diplome ds la base comment ça se fait ?

0
Réponse 13 / 22
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 !!!

0
Réponse 14 / 22
jm
Je sais je l'ai faite la boucle foreach..

0
Réponse 15 / 22
avion-f16
Mais il faut que tu génères ce que tu as besoin !

0
Réponse 16 / 22
jm
Sérieux jcompren pa tro je débute comme tu peu le voir ! lol tu peu me montré plz ?

0
Réponse 17 / 22
avion-f16
Te montrer quoi ?
Retournes sur le Siteduzero, apparemment tu as sauté la moitié des chapitres !

0
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++;
  }
  }
  
  0
2. jm
  
  @jmTas msn ?
  
  0
Réponse 18 / 22
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 !!!

0
Réponse 19 / 22
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 ?

0
Réponse 20 / 22
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.

0
- 1
- 2
Suivant

Javascript formulaire probleme

22 réponses

Discussions similaires

Newsletters