[Résolu] Récupérer les valeurs d'inputs dans un javascript

Marsh Posté le 10-07-2007 à 10:09:39

Bonjour,

Je suis actuellement en train de résoudre un problème de formulaire :

En gros:
J'ai un formulaire de recherche avec un champ de texte, et un champ select (avec une valeur par défaut).

Mon fichier javascript surveille le 'onsubmit' de mon formulaire, et lance la fonction de recherche. Le problème est que, dans javascript, j'arrive pas a récupérer les VALEURS de mes inputs.

Par exemple, si je recherche 'toto' avec l'option 'musique', bah j'arrive pas a le récupérer dans mon javascript. Donc ma recherche retourne vide + vide.

J'utilise prototype.js, pour me simplifier la vie, et j'ai testé avec les fonction Form.Element.getValue ... mais ca marche pas non plus.

Quelqu'un aurait une idée ?

Merci d'avance

Message édité par nixnbk le 12-07-2007 à 05:02:19

---------------
I'll feed your skin snacks to my cockatiel!

Reply

Marsh Posté le 10-07-2007 à 10:09:39

Reply

Marsh Posté le 10-07-2007 à 14:04:39

getValue ?
Edit: J'ai lu trop vite, et je n'avais pas vu que c'était une listbox et non pas un champ de saisie ordinaire.

Message édité par olivthill le 10-07-2007 à 14:06:55

Reply

Marsh Posté le 10-07-2007 à 23:00:41

Excusez-moi pour ma réponse tronquée de ce midi.
Peut-être que vous avez trouvé la réponse entre temps.
La question n'est pas très claire, parce qu'il n'y a pas de code associé, et donc on ne sait pas comment sont définis les champs de saisie et la listbox, ni quel code a été écrit pour tenter de récupérer les valeurs.
Quoi qu'il en soit, une méthode courante est d'utiliser

document.GetElementByID("id_associé_au_champ_input" ).value

pour récuper la valeur des champs de saisie, et d'utiliser .options[].value pour récupérer la valeur de l'option sélectionnée dans la listbox. Voici un petit exemple :

<html>
<html>
<head>
<script language="JavaScript">
function test_lstbox_item(l1) {
var nom = document.getElementById("input_name" ).value;
alert(nom)
var option_val, option_text;
if (l1.options.selectedIndex>=0) {
option_val = l1.options[l1.options.selectedIndex].value;
alert(option_val);
option_text = l1.options[l1.options.selectedIndex].text;
alert(option_text);
}
}
</script>
</head>
<body>
<form name=myform>
Nom: <input type=text id="input_name" size=20>
<select name="lstbox1" size=1 onchange="test_lstbox_item(this)">
<option value="a">Abricot
<option value="b">Banane
<option value="c" selected>Cerise
<option value="d">Datte
</select>
</form>
</body>
</html>

Message édité par olivthill le 10-07-2007 à 23:02:46

Reply

Marsh Posté le 11-07-2007 à 03:25:27

J'ai essayé cette fonction ca marche pas

je vais mettre un peu de code pour que ca soit plus clair :

en gros j'ai ce bout de code dans mon search.php :

Code :

<form id="search_form" name="search_form">
<br>
<div id="search_div">
<label for="search" id="search_label"> Search:</label>
<input name="search_input" type="text" id="search_input"/>
<select name="search_options" id="search_options" size="1">
<option selected value="option_default">default</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
<input type="submit" value="Search Now!" name="button" id="search_submit"/>
</div>
</form>

et a coté de ça, j'ai une fonction javascript qui correspond a ça dans mon fichier javascript :

Code :

function showResult()
{
tname=document.getElementById("search_input" ).value;
tcity=document.getElementById("search_options" ).value;
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert ("Browser does not support HTTP Request" );
return;
}
var url="getResult.php";
url=url+"?Name="+tname;
url=url+"&City="+tcity;
url=url+"&page=1";
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete" )
{
document.getElementById("txtResult" ).innerHTML=xmlHttp.responseText ;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP" );
}
return objXMLHttp;
}
function init(){
Event.observe($('search_div'),'submit',showResult,false);
}
Event.observe(window,'load',init,false);

Et en gros la fonction marche, puisque si j'initialise a la main mes deux variables tname et tcity, j'ai un résultat correct.
Le seul probleme est de récupérer les valeurs de search_input et de search_option.

Je suis en train d'essayer de bidouiller avec une autre fonction qui récupère les valeurs de search_input et search_option onkeypress et onchange.
Plus d'infos plus tard ^^.

---------------
I'll feed your skin snacks to my cockatiel!

Reply

Marsh Posté le 11-07-2007 à 04:31:35

J'ai une autre idée pour résoudre mon problème, mais ya encore un blème de variables.

Voila : j'appelle une fonction qui modifie la valeur de mes variables des que je change quelque chose dans mon form (en utilisant onkeyup="fonctionjavascript(search_input.value,search_options.value)" et onchange=fonctionjavascript(search_input.value,search_options.value))

Cette fonction change juste la valeur de mes variables tname et tcity.

Le problème c'est que quand je submit mon form, les valeurs tname et tcity sont réinitialisée a zero.

Yaurait un moyen de récupérer ces variables ?

Reply

Marsh Posté le 11-07-2007 à 13:51:09

Pour récupérer (du côté du serveur, je présume) ces variables modifiées par le javascript (du côté du client), il suffit de les placer dans des champs du "form" qui sera "submité". Pour que ces champs ne gênent pas l'écran, on peut les déclarer avec "type=hidden". Par exemple.

...
function ....
{
...
document.search_form.H_tname.value=tname;
document.search_form.H_tcity.value=tcity;

search_form.submit();

return true;
}
...
<form id="search_form" name="search_form">
<input type=hidden id=H_tname value="">
<input type=hidden id=H_tcity value="">
...
</form>

Reply

Marsh Posté le 12-07-2007 à 05:00:46

trouvé autre solution, un peu crade, mais qui marche :
Dans mon search.php j'ai :

Code :

<input name="search_input" type="text" id="search_input" onkeypress="notallowed(event,search_input.value,search_options.value);"/>
...
...
<input type="button" value="Search Now!" name="button" id="search_submit" onclick="showResult(search_input.value,search_options.value,1);"/>

et dans mon .js... je triche a mort ^^

Code :

var xmlHttp;
function notallowed(event,strname,strcity)
{
// Compatibilité IE / Firefox
if(!event && window.event) {
event = window.event;
}
// IE
if(event.keyCode == 13) {
event.returnValue = false;
event.cancelBubble = true;
showResult(strname,strcity,1);
}
// DOM
if(event.which == 13) {
event.preventDefault();
event.stopPropagation();
showResult(strname,strcity,1);
}
}
function showResult(tname,tcity,tpage)
{
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert ("Browser does not support HTTP Request" );
return;
}
var url="getResult.php";
url=url+"?Name="+tname;
url=url+"&City="+tcity;
url=url+"&page="+tpage;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete" )
{
document.getElementById("txtResult" ).innerHTML=xmlHttp.responseText ;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP" );
}
return objXMLHttp;
}
function init(){
Event.observe($('search_div'),'submit',function(e){
} ,false);
}
Event.observe(window,'load',init,false);

Voila donc j'explique un peu :
J'ai trouvé un script qui annule l'effet de la touche Entrée dans le input (keycode==13), et au lieu de juste stopper l'effet de la touche entrée, je lui fait lancer la fonction ShowResult, avec les paramètres ^^.

Bref, maintenant ça marche. Merci Olivthill pour ton aide, même si ça à pas forcément servi. Je vais quand même tester ta fonction et voir ce que ca donne .

---------------
I'll feed your skin snacks to my cockatiel!

Reply

[Résolu] Récupérer les valeurs d'inputs dans un javascript

Sujets relatifs:

Leave a Replay