11540 sujets

JavaScript, DOM et API Web HTML5

Construction dynamique de formulaire

Bonjour,
je rencontre des difficulté dans le développement d'un script JS,
qui doit permettre de construire un formulaire dynamiquement.

A savoir pouvoir ajouter des questions et jusqu'a 5 reponses associées.

je cherche à récupéré le résultat sous cette forme :

array(
array('Question1'=>'De quelle couleur est le cheval blanc d'Henry IV?',
'Reponses' =>array("blanc","noir","marron"),

array('Question2'=>'De quelle couleur est la lune?',
'Reponses' =>array("blanche","noire","rouge")
)


Voici mon code de test :
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Test</title>
		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
			$(document).ready(function() {
				/*$('#myForm').submit(function() {
					// get all the inputs into an array.
					var $inputs = $('#myForm :input');

					// not sure if you wanted this, but I thought I'd add it.
					// get an associative array of just the values.
					var values = {};
					$inputs.each(function() {
						values[this.name] = $(this).val();
					});
					
				});*/
				
				var QuestionWrapper   = $("#QuestionWrapper"); //Input boxes wrapper ID
				var x = QuestionWrapper.length; //initlal text box count
				var AddQuestion       = $("#AddQuestion"); //Add button ID
				var QuestionCount=1; //to keep track of text box added
				
				var MaxResponses       = 4; //maximum input boxes allowed
				var AddResponse       = $("#AddResponse"); //Add button ID
				var ResponseWrapper   = $("#ResponseWrapper"); //Input boxes wrapper ID
				var y = ResponseWrapper.length; //initlal text box count
				var ResponseCount=1; //to keep track of text box added
				$(AddQuestion).click(function (e)  //on add input button click
				{
					QuestionCount++; //text box added increment
					//add input box
					$(QuestionWrapper).append('<div id="QuestionWrapper"><input type="text" name="Questions['+ QuestionCount +']" id="question_'+ QuestionCount +'" placeholder="Saisissez votre question"/><a href="#" class="removeclass">&times;</a></div>');
					$(QuestionWrapper).append('<div id="ResponseWrapper"><input type="text" name="Questions['+ QuestionCount +'][1]" id="response_'+ ResponseCount +'" value="Text '+ ResponseCount +'"/><a href="#" class="removeclass">&times;</a></br><span class="small"><a href="#" id="addResponse" class="btn btn-info">addResponse</a></span></div>');
					x++; //text box increment
					
				});
				$(addResponse).click(function (e)  //on add input button click
				{
					ResponseCount++; //text box added increment
					//add input box
					$(ResponseWrapper).append('<input type="text" name="Questions['+ QuestionCount +'][1]" id="response_'+ ResponseCount +'" value="Text '+ ResponseCount +'"/><a href="#" class="removeclass">&times;</a>');
					y++; //text box increment
					
				});
				$("body").on("click",".removeclass", function(e){ //user click on remove text
						if( x > 1 ) {
								$(this).parent('div').remove(); //remove text box
								x--; //decrement textbox
						}
						if( y > 1 ) {
								$(this).parent('div').remove(); //remove text box
								y--; //decrement textbox
						}
				return false;
				}) 

			});
		</script>
	</head>
	<body>
		<form method="get"  id="myForm" action="post.php">
		<div id="QuestionWrapper">
			<input type="text" name="Questions[1]" id="question_1" placeholder="Saisissez une question ici"><a href="#" class="removeclass">x</a>
			<div id="ResponseWrapper">
				<input type="text" name="Questions[][1]" id="response_1" placeholder="Saisissez une réponse ici"><a href="#" class="removeclass">X</a>
			<div>
				
			</div>
		</div>
		</div>
		<span class="small"><a href="#" id="addResponse" class="btn btn-info">addResponse</a></span>
		<span class="small"><a href="#" id="AddQuestion" class="btn btn-info">AddQuestion</a></span>
		<button type="submit" value="send">Send</button>
		</form>
		
		
	</body>
</html>

Mais je n'y parviens pas ..... je n'ai plus fait de JS depuis très longtemps ...
Quelqu'un pourrait il m'aider ? svp
Sujet clos
Aller à