Hello, everybody. I am newbie as my question shows. I will paste here a
code that I combined from around the web and managed to work. But there
is something I cannot understand. When I add a new field, the function
get the value only of the first input text. I have an expierence with C#
and PHP. Jquery has a pretty different behaviour, so please let me
figure this out. I need to get the values of all the text fields and add
them to an array.
This is a quiz. This particular code, expresess the backend part of the
application, when you prepare your quiz. Adding fields, every field
contains question, every question accepts possible answers, and after
all the possible answers are entered, we have to enter the Correct
answer, and after all the desired question fields are filled, we should
receive an array of every question and it's answers, including the
right one in this format, knowing that the letter is the correct answer
( it could be the array value
->key
) :
var questions = [
["What is 10 +
4?", "12", "14", "16",
"B"],
["What is 20 - 9?",
"7", "13", "11",
"C"],
["What is 7 x 3?",
"21", "24", "25",
"A"],
["What is 8 / 2?",
"10", "2", "4",
"C"],
["What is 5 - 6?",
"-1", "1", "4",
"A"]
];
Here is my code :
..
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<script
src="js/jquery-2.1.3 - ui.js"
type="text/javascript"></script>
<script src="js/jquery-2.1.3.js"
type="text/javascript"></script>
</head>
<body>
<h1>Admin
Panel</h1>
<!-- JavaScript Validation
-->
<div
class="input_fields_wrap">
<span>You can add up to 21 question using this form as well as
removing them. Clicking 'Generate', you
generate
the possible choices of your question.
Clicking 'Remove' you remove the particular
field.<br></span>
<button
class="add_field_button">Add More
Fields</button>
<div>
<hr>
Your
question <input type="text" name="mytext[]"
/>
<br>
Possible
choices <input type="text" class="nChoices"
/>
<div
class="possible_choices"></div>
<div class="correct"></div>
<a href="#"
class="generate_answers">Generate</a>
<a href="#" class="remove_field">|
Remove</a>
</div>
<hr>
</div>
<script>
//Add/Remove
$(document).ready(function () {
var max_fields =
21; //maximum input boxes allowed
var wrapper =
$(".input_fields_wrap"); //Fields
wrapper
var add_button =
$(".add_field_button"); //Add button ID
var x = 1; //initlal text box
count
$(add_button).click(function (e) { //on add
input button click
e.preventDefault();
if (x < max_fields) {
//max input box allowed
x++; //text box
increment
$(wrapper).append('<div>Your question <input
id="question" type="text"
name="mytext[]" /><br>Possible choices <input
type="text" class="nChoices" /><a
href="#"
class="generate_answers">Generate</a><a
href="#" class="remove_field"> |
Remove</a><hr></div>'); //add input
box
}
});
$(wrapper).on("click",
".remove_field", function (e) { //user click on remove
text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
//Generate answers
$('.generate_answers').click(function ()
{
var n =
$('.nChoices').val();
for (var i = 1; i
<= n; i++) {
$('.input_fields_wrap
div .possible_choices').append(' Choice ' + i + ':
<input id="choice" class="posCho"
type="text" name="choices[]"
/><br>'); //the possible choices
}
n = 0;
$('.input_fields_wrap div .correct').append('Correct
answer <input type="text"
class="correct_answer" />');// The
field
$('.input_fields_wrap div
.correct').append('<button
class="answer">Generate correct
answer</button>'); // The button
// The correct answer
$('.answer').click(
function ()
{
var correctAnswer =
$('.correct_answer').val();
alert(correctAnswer);
}
);
});
</script>
</body>
</html>
Let me know your suggestions.