Last-child not working inside iteration of div - javascript

In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!

This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>

Related

LARAVEL Insert MULTIPLE ROWS in database

I'm trying to insert multiple row data in two DB tables using single click but this code insert only one row at a time. When i try dd($request->all()); i got data in array but insert only one row. What is the problem and how can i fix it?
protected $table = 'biniyojan';
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
#foreach ($bini as $bi)
#endforeach
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
{{-- message --}}
{!! Toastr::message() !!}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
As #aynber pointed at, you need to move the line $biniyojan_details = new BiniyojanDetails(); inside the loop so it initiate a new object for each iteration.
Another solution would be to insert all the entries in the same time(better performance). For that, we prepare the data to be inserted first
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojanDetailsToBeInserted = [];
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details = [];
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details['debit_credit'] = $request->debit_credit[$i];
//$biniyojan_details['debit_credit_type'] = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojanDetailsToBeInserted[] = $biniyojan_details;
}
}
if ($biniyojanDetailsToBeInserted) {
BiniyojanDetails::insert($biniyojanDetailsToBeInserted);
}
return redirect()->back()->with('status', 'Inserted');
}
Your code create only one row but the noticeable thing is that it create one row but with last data of the array.
Because you are not making object inside the loop it is outside of the loop so the loop runs on the same object and update its properties each time loop runs and save it.
Make object inside the loop so it make new object each time which means it will create new row each time instead of updating the same row.
There is a better way for this if you have same names of your array keys as database table columns.
Biniyojan::insert($request->data);
It works like this.
User::insert([
['name' => 'John', 'email' => 'john#example.com'],
['name' => 'Marina', 'email' => 'marina#example.com'],
]);

Laravel Error Exception. Array to string Conversion

I'm trying to insert multiple row data in two databse table using single click but the only one row inserted .
protected $table = 'biniyojan';
it throw an another error like this:
(Illuminate\Database\Grammar::parameterize(): Argument #1 ($values) must be of type array, string given)
How can i solve this issue??
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date[]" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab[]" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school[]" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" required>
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required>
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora[]" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>`enter code here`
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
[1]: https://i.stack.imgur.com/rzb3C.png
please try this:-
public function bbcreate(Request $request){
$biniyojan_details = new BiniyojanDetails();
$biniyojan_details->school = $request->school;
$biniyojan_details->source = $request->source;
$biniyojan_details->kriyakalap = $request->kriyakalap;
$biniyojan_details->debit_credit = $request->debit_credit;
$biniyojan_details->debit_credit_type = $request->debit_credit_type;
$biniyojan_details->cash = $request->cash;
$biniyojan_details->save();
if(!empty($request->school)){
for($i=0; $i< count($request->school); $i++){
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->id;
$biniyojan->date = $request->date[$i];
$biniyojan->ab = $request->ab[$i];
$biniyojan->school = $request->school[$i];
$biniyojan->behora = $request->behora[$i];
$biniyojan->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
As you said you are trying to insert multiple row data.
Then You must convert array into json to store it into database.
Do like this - json_encode($request->school,true);

How do I display a JS value in the <option value="url here & js here">

How can I use document.write to display a value from the drop down menu in
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
Is this even possible? How can I accomplish this goal? On the next page I need to _GET the 'rate' and I cannot figure out how to pass it into the value.
When the forms submitted this code is used to send the user to the URL in the value=""
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
goBtn.onclick = function() {
window.location = menu.value;
}
Here is the HTML I am working with.
<script>
function getRate() {
var rate = document.getElementById("s2").value;
</script>
<div class="row">
<div class="col-md-12">
<div class="subscribe-block">
<div class="row">
<form class="form-horizontal" role="form" id="subscribeForm">
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Insurance Plan</div>
<select id="s1" class="form-control input-lg">
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
<option value="jmp.php?type=health&rate=<script>document.write(rate)</script>">Health Insurance</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Estimated Current Payment</div>
<select name="s2" id="s2" class="form-control input-lg">
<option>$5</option>
<option>$10</option>
<option>$20</option>
<option>$30</option>
<option>$40</option>
<option>$50</option>
<option>$60</option>
<option>$70</option>
<option>$80</option>
<option>$90</option>
<option>$100</option>
<option>$110</option>
<option>$120+</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<input style="color: #fff;" id="search" placeholder="Continue >>" class="btn btn-warning btn-block btn-lg">
</div>
<script>
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
var myObject = {
"value1": "jmp.php?type=auto&rate=<script>document.write(rate)<\/script>",
"value2": "jmp.php?type=health&rate=<script>document.write(rate)<\/script>"
}
goBtn.onclick = function() {
window.location = myObject[menu.value];
}
</script>
<select id="s1" class="form-control input-lg">
<option value="value1">Auto Insurance</option>
<option value="value2">Health Insurance</option>
</select>

How to replace name attribute inside of element in JQuery?

I have following issue:
I have Jquery element Tournament.player with following data:
<div class="row mb-2">
<div class="col">
<input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player3">
</div>
<div class="col p_region" style="">
<select name="players[2][region]" class="form-control">
<option value="" disabled="" selected="">Choose region</option>
</select>
</div>
<div class="col-2">
<button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
</div>
</div>
I want to increment counter in name attribute of inner select and input elements.
That's what I tried so far:
var newPlayer = Tournament.player.clone().find('input, select').attr("name", function(i, name) {
return name.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.appendTo(".players");
It does what I need, but returns only select and input elements, like so:
<input name="players[3][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="">
<select name="players[3][region]" class="form-control" disabled="">
<option value="" disabled="" selected="">Choose region</option>
</select>
What I do wrong? I want to get same element that I had before, but getting only part of it.
Big thanks in advance.
You mean this:
const Tournament = {
player: $(".mb-2")
}
var newPlayer = Tournament.player.clone();
newPlayer.find('input, select').attr("name", function(i, name) {
return name.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.find('input').attr("value", function(i, value) {
return value.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.appendTo(".players");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players">
<div class="row mb-2">
<div class="col">
<input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player2">
</div>
<div class="col p_region" style="">
<select name="players[2][region]" class="form-control">
<option value="" disabled="" selected="">Choose region</option>
</select>
</div>
<div class="col-2">
<button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
</div>
</div>
</div>

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<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>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Categories