8768 sujets

Développement web côté serveur, CMS

Problème avec select

Bonjour,

J'ai un sélecteur qui affiche des pays. Lorsque je sélectionne un pays s'affiche dans le champ les frais de port.

J'ai un programme en ajax qui m'additionne nombre_a + nombre_b pour me faire l'addition en direct.

<form id="formulaire_calcul" method="post" name="liste">
 
  <select name="size" id="select" style="width:120px" Onchange="javascript:SelectValueChamp();"">
      <option value="">Choisir pays</option>
      <option value="10">France</option>
      <option value="15">Belgique</option>
       </select>

  <input name="select" type="text" id="nombre_b" form="formulaire_calcul"/>


Code pour afficher en direct le choix du sélecteur :

<script language="javaScript">
function SelectValueChamp(){
valeur=document.forms['liste'].elements['size'].options.selectedIndex;
v_valeur=document.forms['liste'].elements['size'].options[valeur].value;
document.forms['liste'].elements['nombre_b'].value=v_valeur;
}
</script>


Le truc, c'est que le calcul se fait bien sur ma page 100 + 10 = 110 mais lors de l'envoi de l'info je reçois tout le formulaire sauf les frais de port.

Je bloque avec id="select" dans mon select et id="nombre_b" qui est plus bas.

Pour afficher mon select il faut que j'ai id="select" et pour faire mon calcul j'ai besoin de id="nombre_b".

Je me casse les dents depuis 2 jours sur ce foutu code !!!

Merci d'avance de vos lumières.

Dom Smiley bawling
Modifié par CVS (22 Mar 2015 - 10:08)
Modérateur
Salut,

C'est quoi ça ? Smiley biggol 
 form="formulaire_calcul"


À priori, onchange s'écrit en minuscule.

Sinon, comment envoies tu ton formulaire ?
Modifié par niuxe (23 Mar 2015 - 21:08)
Bonjour,

form="formulaire_calcul", c'est la commande qui permet de lancer l'addition via ajax.

J'envoi mon formulaire via : <form method="POST" action="Validation.php">

Le truc est que j'ai un id="select" dans mon selecteur et que j'ai en envoi de variable id="nombre_b".

Si je modifie id="select", le montant ne s'affiche plus dans la case.

Merci de ton aide.
Modérateur

form="formulaire_calcul"


Bin non, si ce champ te sert pour ton calcul, tu dois pointer sur ce dernier sans utiliser un attribut exotique. 

document.getElementById('nombre_b')



Je ne pense pas que le fond du problème se trouve à cet endroit. Je pense soit que dans ta requete Ajax, il y a un souci soit c'est dans la manière que tu soumets ton formulaire.

Peux tu mettre stp sur le forum le code html de ton formulaire et de ta requete Ajax ? Ainsi je pourrais voir plus claire ton souci.
Modifié par niuxe (24 Mar 2015 - 14:25)
Merci beaucoup, voici mon code.

<?
session_start();
include_once("fonctions-panier.php");
include("include/header.php");
?>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="calcul.js"></script>
<script type="text/javascript">
 function format(obj){
var str=obj.value.replace(/-|\./g,'')
switch(true){
  case (str.length<10) : break;
 case (str.length==10):
  tel=str.replace(/^(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/,"$1.$2.$3.$4.$5")
  obj.value=tel
  break;
 case (str.length>10) :
  obj.value=str.substr(0,10).replace(/^(\d{2})(\d{2})(\{2})(\d{2})(\d{2})$/,"$1.$2.$3.$4.$5")
  }
  }
 </script>
<!-- Ligne de code pour afficher les frais de port dans le champ en direct -->
<script language="javaScript">
function SelectValueChamp(){
valeur=document.forms['liste'].elements['size'].options.selectedIndex;
v_valeur=document.forms['liste'].elements['size'].options[valeur].value;
document.forms['liste'].elements['nombre_b'].value=v_valeur;
}
</script>
<!-- Fin du code -->
</head> 
       
<form id="formulaire_calcul" method="post" name="liste">
 
  <select name="size" id="select" style="width:120px" Onchange="javascript:SelectValueChamp();"">
      <option value="">Choisir pays</option>
      <option value="17.50">Belgique</option>
      <option value="16.80">Italie</option>
      <option value="22.80">Suisse</option>
  </select>

  <input name="select" type="text" id="nombre_b" form="formulaire_calcul"/> <!-- Good -->
 
    <br>
    <br>
  <font color="navy"><u>Montant hors frais de transport</u></u> : </font></label>
  <input name="nombre_a" type="text" id="nombre_a" form="formulaire_calcul" value="<? echo Montant() ?>" />
&euro;<br>
<br>

<!-- Calcul des frais de transport en ajax -->
<input name="action" type="hidden" form="formulaire_calcul" value="Calculer" />
<input type="submit" value="Calculer le montant de votre commande" />
</form>

 <?
 		  echo "</td></tr>";   
		  echo "$select";
		  echo "<tr><td colspan=\"2\"></td>";
	      echo "<td colspan=\"2\">";
		  
		  ?>
        
          
<div>
		<label for="resultat_addition"><font color="navy"><strong><strong><u>TOTAL à payer</u></strong></font> : </label>
		<input id="resultat_addition" type="text" value="<? echo $do_op ?>"readonly />
&euro;</div>
        <?
		  echo "</td></tr>";	  	  				 	      	      
	     
		 
		 		  	  }
		  }
			  	?>
</p>

---

Code ajax :

$(document).ready(function() {
	$("form#formulaire_calcul").submit(function() {
		$.getJSON("controleur.php",
		{
		"action" : "calculer",
		"nombre_a" : $("input#nombre_a").val(),
		"nombre_b" : $("input#nombre_b").val() 
		},
		function(data) 
			{
			$("input#resultat_addition").val(data['resultat_addition']);
			}
		);
		return false;
	});
});

Modifié par CVS (25 Mar 2015 - 09:41)
Modérateur
Salut,

Je t'ai rectifié ta fonction de calcul. Car là, ça ne peut pas fonctionner. De ce fait, je l'ai améliorée. 


 <form id="formulaire_calcul" method="post" name="liste">

<select name="size" id="select" style="width:120px">
<option value="">Choisir pays</option>
<option value="17.50">Belgique</option>
<option value="16.80">Italie</option>
<option value="22.80">Suisse</option>
</select>

<input name="select" type="text" id="nombre_b"/> <!-- Good -->

<br>
<br>
<font color="navy"><u>Montant hors frais de transport</u></u> : </font></label>
<input name="nombre_a" type="text" id="nombre_a" value="" />
&euro;<br>
<br>

<!-- Calcul des frais de transport en ajax -->
<input name="action" type="hidden" form="formulaire_calcul" value="Calculer" />
<input type="submit" value="Calculer le montant de votre commande" />
</form>




<script>
    window.onload = function(){
        document.getElementById('select').onchange = function(){
            document.getElementById('nombre_b').value = this.options.selectedIndex;
        }
    }
</script>

Normalement pour faire les choses biens, il faudrait créer dynamiquement #nombre_b et ensuite lui affecter la valeur. Mais déjà, je te mets sur la bonne piste.

J'ai lu vite fait ton code. La manière dont tu soumets ton formulaire me parait correct. C'est la même chose pour getJson. Là encore ça me parait correct. Il faudrait que tu fasses quelques console.log afin de savoir si #nombre_b transmets bien la valeur. idem, pour data, un petit console.log, ça serait pas mal.

ps : peux tu stp relire cette petite règle et rééditer ton msg précédent ?
Modifié par niuxe (25 Mar 2015 - 00:41)
Bonjour,

Merci beaucoup pour tes conseils. Je vais revoir ma copie.

Si j'ai bien compris je dois passer mon select en variable dynamique ?

Car le montant des frais de port est dans le select. Une fois la variable récupérer je peux l'envoyer dans mon formulaire.

Bonne journée.

Dom
Modifié par CVS (25 Mar 2015 - 13:18)
Bonjour,

Je viens de tester ton code, et au lieu d'afficher le montant des frais de port, j'ai dans mon champ frais de transport 1 / 2 ou 3.

Le calcul se fait bien 35 + 2 = 37 ( exemple )

En test, j'ai toujours le champ vide dans les frais de transport lors de la réception du mail.

J'ai essayé les créer dynamiquement nombre_b, mais sans exemple, c'est pas facile.

Il faut que j'arrive à convertir la valeur de mon id select en nombre_b et je suis sauvé.

Merci encore pour ton aide.

Bonne journée.

Dom
Sujet clos
Aller à