Modifier la valeur d'un input dans un formulaire

Version imprimable

Bonjour,

Je galère depuis un moment

J'ai une série de formulaires:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form action="index.php" method="post" class="booster">
    <input type="hidden" name="mode" value="booster">
    <input type="hidden" name="matchid" value="1">
    <input type="hidden" name="booster" value="true">
    <input type="submit" id="booster" value="Valider" class="button">
</form>
<form action="index.php" method="post" class="booster">
    <input type="hidden" name="mode" value="booster">
    <input type="hidden" name="matchid" value="2">
    <input type="hidden" name="booster" value="false">
    <input type="submit" id="booster" value="Valider" class="button">
</form>

Puis ensuite, par jquery

Code:

1
2
3
4
$('.booster').on('submit', function(event) {	   								   
    [...]					
    return false;
 });

Comment modifier la valeur (value) du champ input "booster" dans le formulaire qui a été submitté.

Ensuite, je sérialise:

Code:

1
2
event.preventDefault();
$(this).serialize();

Pour envoyer le tout en ajax.

J'ai bien essayé ça:

Code:

1
2
 
$("input[name='booster']").val("test");

Mais bien entendu, ça modifie la value de tous les champs booster de tous les formulaires !!

Merci de votre aide.

coincoin22

Et:

Code:

1
2
3
 
var val = $(this).find("input[name='booster']").val();
alert(val);

Code:

1
2
 
alert($(this).closest('.booster').find('input[name=booster]').val());

me renvoit 'undefined' !!!!

21/02/2015, 23h14
danielhagnoul

1) <input type="submit" id="booster" value="Valider" class="button">.

Un ID doit être unique !

2) $( this ).find( "input[name='booster']" ).val( "test" );.

Merci pour ta réponse.

Mais si je fais ceci en retirant l'id booster.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form action="index.php" method="post" class="booster">
    <input type="hidden" name="mode" value="booster">
    <input type="hidden" name="matchid" value="1">
    <input type="hidden" name="booster" value="true">
    <input type="submit" value="Valider" class="button">
</form>
<form action="index.php" method="post" class="booster">
    <input type="hidden" name="mode" value="booster">
    <input type="hidden" name="matchid" value="2">
    <input type="hidden" name="booster" value="false">
    <input type="submit" value="Valider" class="button">
</form>

Puis,

Code:

1
2
3
 $('.booster').on('submit', function(event) {
    $( this ).find( "input[name='booster']" ).val();
});

Il me resort undefined.

A noter que les formulaires sont créés dynamiquement en php par une requête sql et une boucle while.

Code:

1
2
3
4
5
6
7
8
9
10
11
$sql = $link->query(".....");
 
while($dnn = mysqli_fetch_assoc($sql))
			{		
                        echo '<form action="index.php" method="post" class="booster">';
			echo "<input type=\"hidden\" name=\"mode\" value=\"booster\">";
			echo "<input type=\"hidden\" name=\"matchid\" value=\"".$dnn["id"]."\">";
			echo "<input type=\"hidden\" name=\"booster\" value=\"".$dnn["booster"]."\">";
			echo '<input type="submit" value="valider" class="button">';
			echo '</form>';
}

Je pense qu'il y a peut-être un pb aussi de ce côté ???

Merci de ton aide...

Citation:

Envoyé par coincoin22

A noter que les formulaires sont créés dynamiquement en php par une requête sql et une boucle while.

Je pense qu'il y a peut-être un pb aussi de ce côté ?

Oui, on() avec deux sélecteurs. Voir la FAQ dans ma signature.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $( function(){ // forme abrégée de $(document).ready(function(){ $( 'body' ).on( 'submit', 'form.booster', function( event ){ // debug, console, touche F12 console.log( $( this ).find( "input[name='booster']" ).val() ); // transaction AJAX return false; }); });

Merci pour ces explications. Mais malheureusement ça me sort "undefined".

Voilà mon code complet (index.php):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="pronos">
<?php
$userid=$_SESSION['userid'];
$sql = $link->query("........") or die (mysql_error());
while($dnn = mysqli_fetch_assoc($sql)){
	echo '<table width="100%">';
	echo '<tbody><tr>';
	echo '<td class="t5">';echo '<img src="images/archives.png">';echo '</td>';
	echo '<td class="t10">';echo 'AAA';echo '</td>';
	echo '<td class="t10">';echo $dnn['date2'];echo '</td>';
	echo '<td class="t5">';echo '<img src="images/flags/'.$dnn['eq1'].'.png"/>';echo '</td>';
	echo '<td class="t15">';echo $dnn["eq1"];echo '</td>';
	echo '<form action="index.php" method="post" class="validation">';
	echo "<input type=\"hidden\" name=\"mode\" value=\"validation\">";
	echo "<input type=\"hidden\" name=\"matchid\" value=\"".$dnn["id"]."\">";
	echo '<td class="t5">';echo '<select name="scoreEq1" id="seleq1">\n';for($i = 0; $i <= 9; $i++)echo '<option value='. $i .''.($i == $dnn["score1"] ? " selected" : "").'>'. $i .'</option>\n';echo '</select> ';echo '</td>';
	echo '<td class="t5">';echo '<select name="scoreEq2" id="seleq2">\n';for($j = 0; $j <= 9; $j++)echo '<option value='. $j .''.($j == $dnn["score2"] ? " selected" : "").'>'. $j .'</option>\n';echo '</select> ';echo '</td>';
	echo '<td class="t15">';echo $dnn["eq2"];echo '</td>';
	echo '<td class="t5">';echo '<img src="images/flags/'.$dnn['eq2'].'.png"/>';echo '</td>';
	echo '<td class="t10">';echo '<input type="submit" value="Valider" class="button">';echo '</td>';
	echo '</form>';
	echo '<form action="index.php" method="post" class="booster">';
	echo "<input type=\"hidden\" name=\"mode\" value=\"booster\">";
	echo "<input type=\"hidden\" name=\"matchid\" value=\"".$dnn["id"]."\">";
	echo "<input type=\"hidden\" name=\"booster\" value=\"".$dnn["booster"]."\">";
	echo '<td class="t10">';echo '<input type="submit" value="Booster ce match" class="button">';echo '</td>';
	echo '</form>';
	echo '<td class="t5">';echo 'AAA';echo '</td>';
	echo '</tbody></tr>';
	echo '</table>';
}
?>  
</div>

Puis dans un fichier externe js:

Code:

1
2
3
4
5
6
7
8
$( function(){ // forme abrégée de $(document).ready(function(){
    $( 'body' ).on( 'submit', 'form.booster', function( event ){
        // debug, console, touche F12
        console.log( $( this ).find( "input[name='booster']" ).val() );
        // transaction AJAX
        return false;
    });
});

22/02/2015, 23h04
danielhagnoul

Je ne sais rien faire avec du code serveur (PHP), il faut copier-coller le code source de la page web. Il y a certainement une erreur.
23/02/2015, 09h34
Bovino

Avant de vouloir se lancer dans JavaScript, il est nécessaire de produire du code HTML correct.
Ton formulaire n'a rien à faire entre diverses balises <td> !
23/02/2015, 12h37
coincoin22

Je viens de m'en apercevoir !

Le problème vient en effet sans doute d'ici !!! Merci encore !

Je corrige tout ça et je vous tiens au courant.

Merci encore de votre support !
23/02/2015, 14h40
coincoin22

Je me suis débrouiller pour recréer mon tableau avec du css display: table-cell/row. Et tout fonctionne !!

Merci encore !

Le sujet est clos.

Coincoin22