Recupérer valeur d'un select dans un formulaire

Question

lielos

4 May 2011 à 22:48

bonsoir,

voilà des heures que je cherche à récupérer la valeur d'un select pour l'assigner ensuite à une variable. Le formulaire, comme le tableau est généré dynamiquement.
L'objectif est de pouvoir faire en sorte que l'internaute choisisse une valeur afin de construire une grille ( de mot croisés) personnalisée.

Je précise que tout se passe dans le fichier Js, rien dans le html.

HTML


<body>
	<div>
		<p id="text_select_taille">Choisissez une taille pour votre grille et validez : </p>
	</div>
	<div>
		<p id="instructions">Pour placer des cases noires, faites un clic droit sur la case voulue. Pour enlever une case noire, faites à nouveau un clic droit dessus.</p>
	</div>
	
</body>

JAVASCRIPT


var taille;
var cellId=0;

function init(){
	choixTaille();
	initGrille(taille);
	
	this.addEventListener('contextmenu',celluleNoire,true);
}

function choixTaille(){ // fonction créant une liste déroulante
	var i;
	var taille=0;// constitura le numéro à choisir pour construire sa grille
	var formTaille = document.createElement("form");//création du formulaire
		formTaille.setAttribute("name", "select_form");
		formTaille.setAttribute("id", "choix_taille");
	var createSelect = document.createElement('select');//création du select
		createSelect.setAttribute("name", "select");
	var opt = document.createElement('option');
		opt.setAttribute("value", "1");//value par defaut
		
	for(i=0;i<30;i++){//la taille de grille maxi est 30 cases de coté
		taille = taille+1; //pour incrémenter la valeur de la liste déroulante de 1
		opt = document.createElement('option');//chaque tour de boucle crée une balise option
			opt.setAttribute("value", taille);
		createSelect.appendChild(opt);
		var txtNode = document.createTextNode(taille);//création d'un noeud texte
		opt.appendChild(txtNode); //et ajout à la balise option en cours de création
	}
	formTaille.appendChild(createSelect); //ajout du select au formulaire
	
	var valideForm = document.createElement('input');
		valideForm.setAttribute("type", "submit");
		valideForm.setAttribute("value", "créer !");
	formTaille.appendChild(valideForm); //ajout du input au formulaire
	
	var attachTo = document.getElementById('text_select_taille');
	attachTo.appendChild(formTaille);//ajout du formulaire au paragraphe 'text_select_taille'
	
}


function initGrille(taille){
	var i,j;
	var table = document.createElement("table");
		table.setAttribute("id", "grille");
	//double boucle, imbriquée, crée le tableau
	for(i=0;i<taille;i++){
		var ligne = document.createElement("tr");
		for(j=0;j<taille;j++){
			var cellule = document.createElement("td");
				cellule.setAttribute("class","blanc");
			ligne.appendChild(cellule);
			cellId= cellId+1;//va permettre d'attribuer un id à chaque case;
			cellule.id = 'cell'+cellId;
		}
		table.appendChild(ligne);
	}
	document.body.appendChild(table);
}

function celluleNoire(event){ 
	// on applique la classe 'noir' à la cellule ciblé
	if(event.target.className == 'blanc'){
		event.target.setAttribute("class","noir");
		rien(event);//empeche l'ouverture de la fenetre contextuelle
	}
	// on applique la classe 'blanc' à la cellule ciblé
	else if(event.target.className == 'noir'){
		event.target.setAttribute("class","blanc");
		rien(event);
	}
}

function rien(event) {
	event.preventDefault(); //annule l'évènement event
}

window.addEventListener('load',init,true);

J'ai essayé de nombreuses possibilités, mais je n'ai rien trouvé qui aille.
Merci de vous pencher sur mon problème. Je débute en js, alors soyez indulgent Smiley sweatdrop

Modifié par lielos (04 May 2011 - 23:24)

Sujet clos