Dip Dip - 1 month ago 7
Javascript Question

Each input field unique name issue

Scenario :

I am building a questionnair app, Where i have many questions against one questionnair.

On the add-question page, I have one question by default and other can be generated by jquery.

Now Below each question a button with name add answer creates the maximum 4 answers for a single question.

And on the same page i have a button for add another question

So i do successfully generates answers(text field) for first question like wise.

I have taken the questions

input's name as array
and same for the answers.

And the output when i get all the request data :

Result of the fields

Now i am confused that what are the answers of which questions if the user added zig zag answers means first added answers for question 1 and then for question3 then the values will come for question 1 then 2 then 3 and so on:

What i want : is to how to get each questions answers where i can handle them then on the server side.

I have the following form :

<form class="form-horizontal" id="components" role="form" method="POST" action="/questionnaire/{{$questions->id}}/fill">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="full-from">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Question Type</label>
<div class="col-md-8">
<select class="form-control" name="type[]">
<option>Text</option>
</select>
</div>
</div>
</div>
</div>
<div class="row addChoices">
<div class="col-md-8">
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Question</label>
<div class="col-md-8">
<input type="text" name="question[]" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Answer</label>
<div class="col-md-8">
<input type="text" name="answer[]" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="add-question-wrapper">
</div>
<hr/>
<div class="add-question">
<button type="submit" name="submit" class="btn btn-success">Create question</button>
</div>
</form>


And the jQuery for the above html is :

$(document).ready(function() {
x = 1;
});

$(".add_question_button").click(function(e) {
e.preventDefault();
addform();
});

$(document).ready(function() {
var max_fields = 3;
var add_button = $(".add_field_button");
$(document).on("click", ".add_field_button", function(e) {
var wrapper = $(this).closest("div").prev(".addChoices");
var _num_choices = $(this).closest("div").prev(".addChoices").find(".singletonChoiceContainer").length;

if (_num_choices < max_fields) {
x++;
wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="answer[]" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});



$(".add-question-wrapper").on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});

function addform(e) {
var max_fields = 3;
var wrapper = $(".add-question-wrapper");
var add_button = $(".add_question_button");

if (x < max_fields) {
x++;
$(wrapper).append('<hr/><div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label> <div class="col-md-8"><select class="form-control" name="question_type"><option value="text">Text</option><option value="MultipleSingle">Multiple Choice (Single Option)</option><option value="Multiple">Multiple Choice (Multiple Option)</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="question[]" id="'+x+'" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm add_field_button">Add Choice</button></div>');
}
}

Answer
<?php $i = 1;?>
<input type="text" name="question[{{$i}}]" class="form-control">

<input type="text" name="question[{{$i}}][answer]" class="form-control">

<script>
var i = '<?php echo $i; ?>';
/***/

if (_num_choices < max_fields) {
  x++;
  wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="answer['+i+']" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
}


///
if (x < max_fields) { 
    x++; 
    i++; //Increment in value of i when generating question  
    $(wrapper).append('<hr/><div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label>  <div class="col-md-8"><select class="form-control" name="question_type"><option value="text">Text</option><option value="MultipleSingle">Multiple Choice (Single Option)</option><option value="Multiple">Multiple Choice (Multiple Option)</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="question['+i+']" id="'+x+'" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="radio" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm add_field_button">Add Choice</button></div>');
}

</script>

When User add a question you need to increse the value of i;