Response title
This is preview!
Get all the values from input text and store them to an array | JQuery
in Getting Started
•
7 years ago
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.
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.
1