11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je suis débutant avec jQuery et j'essai depuis un bon moment de récupérer les différents attributs "name" de mes inputs de type radio et qui sont groupés (donc certains ont le même nom) dans mon formulaire.

Le but est de connaitre combien il y a de nom de groupe différents dans mon formulaire. J'ai essayé avec .each mais ça ne fonctionne pas au mieux je récupère le premier élément?

Voici mon code html:

<form action="#" method="post" name="survey" id="survey" lang="en">
			<table cellpadding="0" cellspacing="0" id="qSurvey">
				<tr>
					<!--[if lte IE 7]><td rowspan="14" class="blankCol">&nbsp;</td><![endif]-->
					<th colspan="5">*1. When visiting the website, you've viewed our presentation video clip; please tell us what you think:</th>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="video1"><input name="video" type="radio" id="video1" value="like" />I loved it</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="video2"><input name="video" type="radio" id="video2" value="don't like" />I didn't like it</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="video3"><input name="video" type="radio" id="video3" value="too long" />It's too long!!</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="5">&nbsp;</td>
				</tr>
				<tr>
					<th colspan="5">*2. If you could install the product in one room in your house, where would that be?</th>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="room1"><input name="roomGroup" type="radio" id="room1" value="kitchen" />Kitchen</label></td>
					<td><label for="room2"><input name="roomGroup" type="radio" id="room2" value="bathroom" />Bathroom</label></td>
					<td><label for="room3"><input name="roomGroup" type="radio" id="room3" value="closet" />Closet</label></td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="room4"><input name="roomGroup" type="radio" id="room4" value="garage" />Garage</label></td>
					<td><label for="room5"><input name="roomGroup" type="radio" id="room5" value="hall" />Hall</label></td>
					<td><label for="room6"><input name="roomGroup" type="radio" id="room6" value="laundry room" />Laundry room</label></td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="room7"><input name="roomGroup" type="radio" id="room7" value="workshop" />Workshop</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="5">&nbsp;</td>
				</tr>
				<tr><th colspan="5">*3. What is your overall impression of the product?</th></tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="opinion1"><input name="opinionGr" type="radio" id="opinion1" value="wow" />Wow!</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="opinion2"><input name="opinionGr" type="radio" id="opinion2" value="cool" />Cool</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
				</tr>
				<tr>
					<td class="firstCol">&nbsp;</td>
					<td><label for="opinion3"><input name="opinionGr" type="radio" id="opinion3" value="blah" />Blah…</label></td>
					<td colspan="2">&nbsp;</td>
					<td class="lastCol">&nbsp;</td>
                        <div id="validation">
				<input name="submitBtn" id="submitBtn" type="button" value="Submit" />
			</div>
		</form>


Voici mon code jQuery:
$(document).ready(function()
	{
		var msg = "";
		function showErrMsg(eMsg)
		{
			/*if(valid==false)
			{*/
				$("table#errMsg tr td").text(eMsg);
			/*}*/
		}
		
		$("#submitBtn").click(function () 
		{
			var nRadioQ = 3 ;//nombre de question de type radio (nb de groupe)
			var valid = false;
			var chRadioL = $("input[type='radio']:checked").length;
			var cRadioGr = $("input[type='radio']");
			var tempNameCheck = "";
			var firstName = $("#firstName").val();
			var lastName = $("#lastName").val();
			var email = $("#email").val();
			var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._\+-])*([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/;
			
			if (chRadioL != nRadioQ)
			{
				valid = false;
				if (chRadioL < 3)
				{
					msg = "You don't fill all the questions";
					[b]$.each(cRadioGr, function(i,nameVal) 
					{
						var nameValAttr = nameVal.attr("name");
						alert (nameValAttr); //ne fonctionne pas
						
 					});[/b]
				}
				else if (chRadioL > 3)
				{
					msg = "Oops! A error occured. Please refresh the page (F5 or Ctrl+R)";
				}
			}
			else if (firstName=="" || lastName=="" || email=="")
			{
				valid = false;
				msg = "Fill the info about you please";
				
			}
			
			else if (email)
			{
				if (email.match(emailRegEx))
				{
					valid = true;
					msg = "You got it big boy!";
				}
				
				else
				{
					valid = false;
					msg = "Your adresse email is invalid";
				}
			}
			else
			{
				valid = true;
				msg = "Just 3 questions to answer! Come on! You can do it!";
			}
			showErrMsg();
		});
	});


Si quelqu'un peut me dire svp comment obtenir non pas le premier élément (.attr("name")) mais tous les noms.

Merci d'avance

Jim
Modifié par Psycho (15 Aug 2011 - 19:28)
a écrit :
J'ai essayé avec .each mais ça ne fonctionne pas au mieux je récupère le premier élément?

Hello,

Au mieux, tu ne récupères rien, car tu as un erreur à l'initialisation de ta variable nameValAttr.
La correction :

var nameValAttr = $(this).attr("name");


Sinon quelques remarques d'ordre général :
- Demandes à quelqu'un de relire ton anglais, c'est truffé de fautes.
- Ne demandes pas à l'utilisateur de rafraîchir manuellement la page en cas d'erreur, mais fait plutôt apparaitre un bouton qui le permet. Ou même rafraichis la page automatiquement au bout de x secondes en affichant un message d'avertissement.
Merci,

Ça va me permettre de continuer.

Pour les autres suggestions: le refresh automatique, bonne idée; les strings pour les messages d'erreurs sont temporaires pour m'aider avec les conditions qui sont remplis ou pas.

Question: Si je déclare une variable par exemple sous cette forme jQuery var myvar = $(#uneid); et que j'y fais référence dans une function hypothétique par this, est-ce que la syntaxe appropriée est $(this) ou this. Je me demandais cela car la variable contient déjà les caractères $().

Encore merci.
Je pense que ça dépend de ce que tu veux faire. Exemple :


var test = $(".test");
test.click(function(){
	alert(this.attr('class'));
	alert($(this).attr('class'));
});



Le premier appel renverra une erreur, car j'appelle une fonction propre à jQuery, et jQuery ne comprend pas l'objet this dans ce cas là.