Reputation: 55
I need to run a jquery function on drop-down change, but when I clone the div
element and the drop-down of the cloned element changes, the effect happens in the first div
.
$(document).on('change', '#extrabed', function() {
var value2 = $(this).val();
var toAppend2 = '';
var $container2 = $(this).siblings('#container2')
switch (value2) {
case 'No':
toAppend2 = (function() {
$("#extbed").hide();
});
$container2.html(toAppend2);
return;
break;
case 'Yes':
toAppend2 = (function() {
$("#extbed").show();
});
$container2.html(toAppend2);
return;
break;
default:
return;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container2">
<div id="container2">
<div id='extbed' style='display: none;'>
<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
</div>
</div>
Also, after cloning, the new div
takes the values from the original one. How can i reset it?
Upvotes: 0
Views: 106
Reputation: 67525
You need to use classes instead of id
's since when you clone the elements that will lead you to duplicate identifiers what makes your HTML code invalid.
So when you change the id's by classes you must pass the class extbed
to the x/y
function since if you will use .extbed
directly as a selector, it will select all the element with this class what will cause the show hide of all instances cloned and original in the same time.
NOTE: Hide the .extbed
part in the cloned instance using :
$clone.find('.extbed').hide().find('input').val('');
$(document).ready(function() {
var genroomid = 2; // change 0 to the number you want to start with
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want
$clone.find('.extbed').hide().find('input').val('');
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++; // increase id by 1
});
$(".cloned-removed-div").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
var x = (function(extbed) {
extbed.hide();
$(".divvisextbed").val('0');
});
var y = (function(extbed) {
extbed.show();
$(".divvisextbed").val('1');
});
// code of display guest info of extra bed
$(document).on('change', '.extrabed', function() {
var value2 = $(this).val();
var toAppend2 = '';
var $container2 = $(this).siblings('.container2');
var extbed = $container2.find(".extbed");
switch (value2) {
case 'No':
toAppend2 = x(extbed);
$container2.html(toAppend2);
return;
break;
case 'Yes':
toAppend2 = y(extbed);
$container2.html(toAppend2);
return;
break;
default:
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
<label for="extrabed">Extra Bed
<select class="stretch extrabed" name="extrabed[]" required="required">
<option value="" disabled selected hidden>Extra Bed</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div class="container2">
<div class='extbed' style='display: none;'>
<input name='divvisextbed[]' class='divvisextbed' type='hidden' value='0'>
<select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
<option value='Mr'>Mr</option>
<option value='Ms'>Ms</option>
<option value='Child'>Child</option>
<option value='Infant'>Infant</option>
</select>
<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30' >
<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' >
<input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' >
</div>
</div></label>
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
</div>
</form>
Upvotes: 1
Reputation: 8181
All answers so far fail to address the second part of the question and reset the subelements, so here we go...
$(document).ready(function() {
var genroomid = 2;
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid)
// Reset the values
$clone.find('#extbed').hide().find('input').val('');
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++;
});
$(".cloned-removed-div").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
// Limit the id search to the element receiving the event
var x = (function() {
$("#extbed", this).hide();
$("#divvisextbed", this).val('0');
});
var y = (function() {
$("#extbed", this).show();
$("#divvisextbed", this).val('1');
});
// code of display guest info of extra bed
$(document).on('change', '#extrabed', function() {
var value2 = $(this).val();
var toAppend2 = '';
var $container2 = $(this).siblings('#container2')
switch (value2) {
case 'No':
toAppend2 = x;
$container2.html(toAppend2);
return;
break;
case 'Yes':
toAppend2 = y;
$container2.html(toAppend2);
return;
break;
default:
//toAppend2 = $container2.html(toAppend2);
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
<label for="extrabed">Extra Bed</label>
<select class="stretch" name="extrabed[]" id="extrabed" required="required">
<option value="" disabled selected hidden>Extra Bed</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="container2">
<div id='extbed' style='display: none;'>
<input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
<select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
<option value='Mr'>Mr</option>
<option value='Ms'>Ms</option>
<option value='Child'>Child</option>
<option value='Infant'>Infant</option>
</select>
<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
<input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'>
</div>
</div>
</label>
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
<table width="25%" border="0">
<tr>
<input type="submit" name="Submit" value="Insert">
</tr>
</table>
</div>
</form>
Upvotes: 2
Reputation: 4597
You don't need to set the html of .container2
on every click.. You can just show or hide the #extbed
instead.
$(document).ready(function() {
var genroomid = 2; // change 0 to the number you want to start with
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want
$clone.find("#extbed").css("display", "none");
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++; // increase id by 1
});
$(".cloned-removed-div").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
/*var x =(function(){
$("#extbed").hide();
$("#divvisextbed").val('0');
});
var y =(function(){
$("#extbed").show();
$("#divvisextbed").val('1');
});*/
// code of display guest info of extra bed
$(document).on('change', '#extrabed', function() {
var value2 = $(this).val();
var toAppend2 = '';
var $container2 = $(this).siblings('#container2')
switch (value2) {
case 'No':
//toAppend2 = $container2.html(toAppend2);
//toAppend2 = x;
$($container2).find("#extbed").hide();
$($container2).find("#divvisextbed").val('0');
/*
$(function(){
$("#prefixextrabed").prop('required',false);
$("#fnameextrabed").prop('required',false);
$("#lnameextrabed").prop('required',false);
$("#nationalityextrabed").prop('required',false);
});
*/
//$container2.html(toAppend2);
return;
break;
case 'Yes':
//toAppend2 = blkofcod1ext + blkofcod2ext + blkofcod3ext;
//toAppend2 = y;
$($container2).find("#extbed").show();
$($container2).find("#divvisextbed").val('1');
/*
$(function(){
$("#prefixextrabed").prop('required',true);
$("#fnameextrabed").prop('required',true);
$("#lnameextrabed").prop('required',true);
$("#nationalityextrabed").prop('required',true);
});
*/
//$container2.html(toAppend2);
return;
break;
default:
//toAppend2 = $container2.html(toAppend2);
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
<label for="extrabed">Extra Bed
<select class="stretch" name="extrabed[]" id="extrabed" required="required">
<option value="" disabled selected hidden>Extra Bed</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="container2">
<div id='extbed' style='display: none;'>
<input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
<select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
<option value='Mr'>Mr</option>
<option value='Ms'>Ms</option>
<option value='Child'>Child</option>
<option value='Infant'>Infant</option>
</select>
<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30' >
<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' >
<input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' >
</div>
</div></label>
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row" >+ New Client</button>
<table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
</div>
</form>
You can also test it here..
Upvotes: 2