unable to increment values by one inside of the label using javascript
0
i'm dynamically adding fields. whenever fields newly created i just want to show the input field or a label field number.
suppose if click to add new field dynamically which is should call 1 if appear second then should call 2.
i had tried some logic over there in my coding but doesn't working.
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance
javascript php jquery bootstrap-4 codeigniter-3
asked Nov 21 '18 at 3:38
md server
507
add a comment |
0
i'm dynamically adding fields. whenever fields newly created i just want to show the input field or a label field number.
suppose if click to add new field dynamically which is should call 1 if appear second then should call 2.
i had tried some logic over there in my coding but doesn't working.
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance
javascript php jquery bootstrap-4 codeigniter-3
asked Nov 21 '18 at 3:38
md server
507
add a comment |
0
0
0
i'm dynamically adding fields. whenever fields newly created i just want to show the input field or a label field number.
suppose if click to add new field dynamically which is should call 1 if appear second then should call 2.
i had tried some logic over there in my coding but doesn't working.
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance
javascript php jquery bootstrap-4 codeigniter-3
asked Nov 21 '18 at 3:38
md server
507
i'm dynamically adding fields. whenever fields newly created i just want to show the input field or a label field number.
suppose if click to add new field dynamically which is should call 1 if appear second then should call 2.
i had tried some logic over there in my coding but doesn't working.
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>javascript php jquery bootstrap-4 codeigniter-3
javascript php jquery bootstrap-4 codeigniter-3
asked Nov 21 '18 at 3:38
md server
507
asked Nov 21 '18 at 3:38
md server
507
asked Nov 21 '18 at 3:38
md server
507
asked Nov 21 '18 at 3:38
md server
507
asked Nov 21 '18 at 3:38
md server
507
507
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.
Try This
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
answered Nov 21 '18 at 4:02
comphonia
43828
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
add a comment |
1
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
JavaScript:
<script>
$(function() {
//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404923%2funable-to-increment-values-by-one-inside-of-the-label-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.
Try This
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
answered Nov 21 '18 at 4:02
comphonia
43828
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
add a comment |
1
Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.
Try This
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
answered Nov 21 '18 at 4:02
comphonia
43828
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
add a comment |
1
1
1
Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.
Try This
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
answered Nov 21 '18 at 4:02
comphonia
43828
Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.
Try This
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
answered Nov 21 '18 at 4:02
comphonia
43828
edited Nov 21 '18 at 4:16
answered Nov 21 '18 at 4:02
comphonia
43828
answered Nov 21 '18 at 4:02
comphonia
43828
answered Nov 21 '18 at 4:02
comphonia
43828
43828
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
add a comment |
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
yes its worked now. thanks alottt comphonia
– md server
Nov 21 '18 at 5:05
add a comment |
1
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
JavaScript:
<script>
$(function() {
//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
add a comment |
1
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
JavaScript:
<script>
$(function() {
//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
add a comment |
1
1
1
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
JavaScript:
<script>
$(function() {
//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults" name="selected_adults" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
JavaScript:
<script>
$(function() {
//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults" name="selected_adults" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs" name="selected_childs" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one" name="selected_childs_age_group_one"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two" name="selected_childs_age_group_two"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
answered Nov 21 '18 at 4:17
Delwar Sumon
373112
373112
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
add a comment |
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 '18 at 5:03
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 '18 at 5:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404923%2funable-to-increment-values-by-one-inside-of-the-label-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
