Formulaire et submit

Version imprimable

27/02/2013, 09h49
conrad2000

Formulaire et submit

Bonjour,

j'aimerais faire un formulaire avec un type radio et suivant l'option checké que ça affiche tel ou tel input.

J'ai donc réussi à faire ça mais du coup quand je clique sur submit dans l'url il n'y a pas la valeur de l'input ajouté (en javascript), comment faire pour qu'elle y soit ? pour la récupérer.

Merci d'avance, j'ai pas posté le code car c'est tellement crade le mien je pense.
27/02/2013, 09h53
Invité

Salut

Est-ce que les input que tu injectes ont bien un attribut "name" renseigné ?

oui,

voilà le code javascript (je pense c'est pas la meilelure façon de faire mais je m'y connais pas en javascript):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var row = document.getElementById("myid"); var data = document.createElement("td"); data.setAttribute("id", "0002"); var element = document.createElement("input"); element.setAttribute("class", "myclass"); element.setAttribute("type", "text"); element.setAttribute("name", "test"); element.setAttribute("value", "55"); data.appendChild(element); row.appendChild(data);
je précise que le submit est en html et que le code ci_dessus ajoute un input avant la ligne de mon submit.

Passe par de l'ajax si tu as du mal

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// tu récupères tes valeurs
var param = $("input").val();
 
// tu envoies à ton fichier PHP
jQuery.ajax({
	url : "lien/vers/ton/fichier/php"
	type: "POST"
	data: {parametre: param}
	success: function(data) {
		// ici tu reload la pages
		location.reload();
		// ou si tu veux te diriger vers une autre page
		location.href = "lien/vers/la/page"
	}
});

Edit : Et pour ton code javascript, le mieux c'est que tu crées tout tes input en HTML, et que tu les passes en display:none; et display:block; avec du javascript quand tu cliques sur un radio bouton

Admettons

Code:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
        // par défaut tu mets tes inputs en display:none; via le CSS
 
        // sur le click de ton radio bouton
        $("#radioBtn").click(function() {
                // tu affiches l'input que tu souhaites
                $("#input").css('display', 'block');
        });
});

27/02/2013, 10h03
Invité
Alors déjà je pense qu'il y a un soucis dans ton code
Code:

1 2 3 4 var data = document.createElement("td"); data.setAttribute("id", "0002"); var data = document.createElement("td"); data.setAttribute("id", "0003");
Là tu crée un élément td que tu stockes dans une variable data... et juste après tu écrases ta variable data avec un autre élément td => les deux premières lignes ne servent à rien.

tu peux par ailleurs nous donner le code HTML avec le <form> englobant le <tr> STP ?

Merci pour vos réponses j'avais fait la méthode avec le display avant mais le problème c'est que je voulais mettre une class à mon input pour afficher un calendrier et celui ci était décalé je epnse ça venait du display.

le code javascript:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 if(document.getElementById('choice_1').checked){ var row = document.getElementById("myid"); var data = document.createElement("td"); data.setAttribute("id", "0002"); var element = document.createElement("input"); element.setAttribute("class", "myclass"); element.setAttribute("type", "text"); element.setAttribute("name", "test"); element.setAttribute("value", "55"); data.appendChild(element); row.appendChild(data); } else { // le même genre }
le code html:

Code:

27/02/2013, 10h14
Mell

Tu connais la différence entre la balise <td> et la balise <th> ? Et leur utilité ?
Car là tu les utilise un peu à l'arrache :?
27/02/2013, 10h17
conrad2000

td c'est pour les données pures et th pour les titres (dans un tableau)? désolé je suis pas programmeur :'-(.

Edit : merde j'ai oublié de mettre les balises <table> en copiant collant.

Un tableau doit ressembler à ça

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
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
         <tr>
              <td></td>
         </tr>
    </tfoot>
</table>

27/02/2013, 10h29
conrad2000

ok merci et comment je fais si je veux que les cases titres soient la colonne la plus à gauche possible du tableau ? et que les colonnes de droites les datas ?

sinon j'ai édité le poste avec le code html et javascript je sias pas coder en ajax donc bon :'-( ni en javascript . La méthode vaec display le problème c'est que elle déplacait mon calendrier :'-( (quand je clique sur le input text ça m'affiche un calendrier et je remplie.)
27/02/2013, 10h34
Bovino
@Mell_, attention à tes réponses...
Vouloir utiliser AJAX et jQuery n'est pas approprié ici...
D'autre part, ta structure de tableau est incorrecte (comme celle de conrad2000 d'ailleurs) :
- les balises <thead>, <tbody> et <tfoot> sont optionnelles ;
- si elles sont présentes, il est préférable de placer <tfoot> avant le ou les <tbody> ;
- surtout, le nombre de cellules doit être identique pour chaque ligne !
27/02/2013, 10h52
Mell

Baah j'lui donne une solution..

Je sais que ces balises sont optionnelles, et je viens de voir que j'avais mal placé le <tfoot>
J'ai fais un truc rapide pour montrer comment fonctionne les tableaux en général, je me suis pas embêtée avec les colspan et compagnie.

S'était surtout pour montrer que les th sont les entêtes et les td pour le reste.
27/02/2013, 10h54
Bovino

Bah... pourquoi n'aurait-on pas le droit de mettre les entêtes sur la première colonne plutôt que sur la première ligne ? :koi:

bon du coup j'ai retesté avec le display en faite ça marche bien mais maintenant j'ai des problème d'alignement les td que jaffiche / cache sont à gauche ça doit être un probleme de colonnes ...

Code:

1
2
3
4
5
6
7
8
9
10
function display() {
	if(document.getElementById('choiceMenu_1').checked) {
		document.getElementById("choice_1").style.display = "block";
		document.getElementById("choice_2").style.display = "none";
	}
	else {
		document.getElementById("choice_1").style.display = "none";
		document.getElementById("choice_2").style.display = "block";
	}
}

...

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
<form action="test.php" method="get" name="master">
	<tr>
		<th>title1:</th>
		<td>
			// data1
		</td>
	</tr>
	<tr>
		<th>title1:</th>
		<td>
			<input id="choiceMenu_1" onchange="display();" type="radio" name="choice_time" value="choice_1" CHECKED><label>xxx</label>
			<input id="choiceMenu_2" onchange="display();" type="radio" name="choice_time" value="choice_2"><label>xxx / xxx</label>
		</td>
	</tr>
	<tr>
		<td id="choice_1">
			<label>xxx:</label><input type="text" name="last" size="11" value="0">
		</td>
		<td id="choice_2">
			<label>xxx:</label><input type="text" name="xxxx" value="6">
			<label>xxx:</label><input type="text" name="xxxx" value="5">
		</td>
	</tr>
	<tr>
		<th colspan="2"><input type="submit" value="SUBMIT"></th>
	</tr>
</form>
</table>

27/02/2013, 11h28
Bovino

Les balises <td> ne sont pas en display: block par défaut mais table-cell, qui n'est pas reconnu par tous les navigateurs.
De toute façon, ce n'est pas la bonne façon de procéder car avec display: none, tu casses l'équilibre de ta table (nombre de cellules incohérent pour chaque ligne), il faut passer par la propriété visibility dans ton cas.

Merci du coup je peux pas centrer :'-( avec cette solution
y'a pas une solution pour que ce soit bien centré ?

Aussi j'ai un 2eme problème avec IE j'ai l'impression que l'évènement onchange() que j'utilisie fonctionne mal je suis obligé de cliquer à coté pour que ça prenne effet. :'-(

Code:

1
2
3
4
5
6
7
8
9
10
function display() {
	if(document.getElementById('choiceMenu_1').checked) {
				document.getElementById("choice_1").style.visibility = "visible";
				document.getElementById("choice_2").style.visibility = "hidden";
			}
			else {
				document.getElementById("choice_1").style.visibility = "hidden";
				document.getElementById("choice_2").style.visibility = "visible";
			}
}

...

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
<form action="test.php" method="get" name="master">
	<tr>
		<th>title1:</th>
		<td>
			// data1
		</td>
	</tr>
	<tr>
		<th>title1:</th>
		<td>
			<input id="choiceMenu_1" onchange="display();" type="radio" name="choice_time" value="choice_1" CHECKED><label>xxx</label>
			<input id="choiceMenu_2" onchange="display();" type="radio" name="choice_time" value="choice_2"><label>xxx / xxx</label>
		</td>
	</tr>
	<tr>
		<td id="choice_1">
			<label>xxx:</label><input type="text" name="last" size="11" value="0">
		</td>
		<td id="choice_2">
			<label>xxx:</label><input type="text" name="xxxx" value="6">
			<label>xxx:</label><input type="text" name="xxxx" value="5">
		</td>
	</tr>
	<tr>
		<th colspan="2"><input type="submit" value="SUBMIT"></th>
	</tr>
</form>
</table>

27/02/2013, 11h48
conrad2000

Pour résoudre le blem sous IE j'ai mis onclick comme éven mais j'ai l'impression que le code est bien déguelasse :-'(.

sinon pas une sol pour centrer ? obligé de faire comme ça ?