Add more question with multiple options JQuery
Question
I am trying to add multiple questions with multiple options, some question have 2 options some have 3 and so on. Please guide me what exactly I am doing wrong. Add more is working fine with for outer box but inner box having issues. Please check and help me thanks
<html lang="en">
<head>
<title>Add more</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.border {
border: 1px solid #000;
padding: 2rem;
border-radius: 5px;
margin-bottom: 5px;
box-sizing: border-box;
margin-top: 1rem;
}
.border.inner {
border-color: red;
}
</style>
</head>
<body>
<div class="container">
<form action="action.php" method="post">
<div class="long_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="long_box_inner">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
</div>
<div class="col-md-12">
<br>
<input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
</div>
</div>
</div>
</div>
</div>
<input type="submit" class="long_add_more btn btn-success" name="Submit" value="Add more">
<input type="submit" class="btn btn-success" name="Submit" value="Submit">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Add More Box
var long_max_fields = 10000;
var long_wrapper = $(".long_box");
var long_add_button = $(".long_add_more");
var lng = 1;
var lng_counter = 0;
$(document).on('click', ".long_add_more", function(e) {
e.preventDefault();
if (lng < long_max_fields) {
lng++;
lng_counter++;
htmloutputlng = "";
htmloutputlng += `
<div class="long_ajax_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12">
<br>
<input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
</div>
</div>
</div>
<input type="submit" class="long_remove_button btn btn-danger" value="Remove">
</div>
</div>
`;
$(long_wrapper).append(htmloutputlng);
}
});
$(long_wrapper).on("click", ".long_remove_button", function(e) {
e.preventDefault();
$(this).closest('div.long_ajax_box').remove();
lng--;
});
// Add More Box Inner
var long_inner_max_fields = 10;
var long_inner_wrapper = $(".long_box_inner");
var long_inner_add_button = $(".long_add_more_inner");
var lng_inner = 1;
var lng_inner_counter = 0;
$(document).on('click', ".long_add_more_inner", function(e) {
e.preventDefault();
if (lng_inner < long_inner_max_fields) {
lng_inner++;
lng_inner_counter++;
htmloutputlng_inner = "";
htmloutputlng_inner += `
<div class="long_box_inner_ajax">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12"><br>
<input type="submit" class="long_inner_remove_button btn btn-danger" value="Remove">
</div>
</div>
`;
$(long_inner_wrapper).append(htmloutputlng_inner);
}
});
$(long_inner_wrapper).on("click", ".long_inner_remove_button", function(e) {
e.preventDefault();
$(this).closest('div.long_box_inner_ajax').remove();
lng_inner--;
});
});
</script>
</body>
</html>
1 answers
solution1
2 ACCPTED 2019-11-12 13:15:24
You can change your
$(long_inner_wrapper).append(htmloutputlng_inner);
to
$(this).parent().siblings(long_inner_wrapper).append(htmloutputlng_inner);
The inner option is always adding to the first .long_inner_wrapper class match element. You have to make it dynamic and always add to the closest .long_inner_wrapper instead.
Also, you need to change your
$(long_inner_wrapper).on("click", ".long_inner_remove_button", function(e) {
to
$(document).on("click", ".long_inner_remove_button", function(e) {
Otherwise, your inner remove button will not work.
Bonus:
I've formatted your code to make it look nicer.
<html lang="en">
<head>
<title>Add more</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<style>
.border {
border: 1px solid #000;
padding: 2rem;
border-radius: 5px;
margin-bottom: 5px;
box-sizing: border-box;
margin-top: 1rem;
}
.border.inner {
border-color: red;
}
</style>
</head>
<body>
<div class="container">
<form action="action.php" method="post">
<div class="long_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="long_box_inner">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
</div>
<div class="col-md-12">
<br />
<input
type="submit"
class="long_add_more_inner btn btn-success"
name="Submit"
value="Add More Inner"
/>
</div>
</div>
</div>
</div>
</div>
<input
type="submit"
class="long_add_more btn btn-success"
name="Submit"
value="Add more"
/>
<input
type="submit"
class="btn btn-success"
name="Submit"
value="Submit"
/>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Add More Box
var long_max_fields = 10000;
var long_wrapper = $(".long_box");
var long_add_button = $(".long_add_more");
var lng = 1;
var lng_counter = 0;
$(document).on("click", ".long_add_more", function(e) {
e.preventDefault();
if (lng < long_max_fields) {
lng++;
lng_counter++;
htmloutputlng = "";
htmloutputlng += `
<div class="long_ajax_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="long_box_inner">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12">
<br />
<input
type="submit"
class="long_add_more_inner btn btn-success"
name="Submit"
value="Add More Inner"
/>
</div>
</div>
</div>
<input
type="submit"
class="long_remove_button btn btn-danger"
value="Remove"
/>
</div>
</div>
`;
$(long_wrapper).append(htmloutputlng);
}
});
$(long_wrapper).on("click", ".long_remove_button", function(e) {
e.preventDefault();
$(this).closest("div.long_ajax_box").remove();
lng--;
});
// Add More Box Inner
var long_inner_max_fields = 10;
var long_inner_wrapper = $(".long_box_inner");
var long_inner_add_button = $(".long_add_more_inner");
var lng_inner = 1;
var lng_inner_counter = 0;
$(document).on("click", ".long_add_more_inner", function(e) {
e.preventDefault();
if (lng_inner < long_inner_max_fields) {
lng_inner++;
lng_inner_counter++;
htmloutputlng_inner = "";
htmloutputlng_inner += `
<div class="long_box_inner_ajax">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12">
<br />
<input
type="submit"
class="long_inner_remove_button btn btn-danger"
value="Remove"
/>
</div>
</div>
`;
$(this).parent().siblings(long_inner_wrapper).append(htmloutputlng_inner);
}
});
$(document).on("click", ".long_inner_remove_button", function(e) {
e.preventDefault();
$(this).closest("div.long_box_inner_ajax").remove();
lng_inner--;
});
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery add/remove multiple selectbox options to textbox
Add more options into select dropdown, while it's opened with jQuery
How to add more options in Javascript dependent options?
Add/Removing Options with JQuery
jQuery Datepicker with multiple options
How to add options to jQuery plugin
dynamically add jquery ajax options
Jquery Add Values to Select Options
Bootstrap 3: Add 'More options' on Navbar on window resizing
JQueryUI selectmenu - How to add more options
Related Tags