In my HTML file 2 href
1st for add blank copy of div
2nd for add a new copy of the same div with values.
for each new copy or new blank should inserted below the selected div.
html code
<div class="item">
<div class="form-group">
<a href="#" id="addnl">
<span class="badge-a">+</span>
</a>
<!--add new blank line-->
<a href="#" id="addcp">
<span class="badge-b">++</span>
</a>
<!--add new line with same values above-->
<label for="qty">qty </label>
<input class='form-control' id='qty' name='qty' type='number' required>
<label for="selgroup">group </label>
<select class="form-control" id="selgroup">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="model">somthing </label>
<input class='form-control' id='somthing ' name='somthing ' type='number'required>
<label for="sellevel">somthing </label>
<select class="form-control" id="sellevel">
<option>1</option>
<option>2</option>
<label for="selctime">somthing </label>
<select class="form-control" id="selctime">
<option>1</option>
<option>2</option>
</select>
js code
var request = $('.item:first').append();
$('.badge-a').click(function() {
request.clone().insertAfter($('.item:last'));
$(window).trigger('resize');
});
My problems is :-
for copying values every thing gets copied but not the select options stays as defaults.
for locations all I have Just :first and add to :last, all other options suggested by the IDE not works like " :selected " even not supported by jquery.
href in the new inserted DIV not works too
Here is fiddle.
Thanks in advance.
Related
I have been trying to clone a section which is part of a form, which I have successfully completed. But I need to work with the data and so I need to change the ID's of the element's children (input, select ecc). I have been looking a while in the web but nothing really works for me, also because I would like to clone the element more often, also the ID should change then everytime.
Can you help me with that? Would be great:
HTML:
<div class="input-form fcf-form-group">
<div class="form only">
<h3 class="fcf-h3">Room</h3>
<div class="form-section">
<div class="title-group">
<label for="room" class="fcf-label">Room</label>
<select name="room" id="room" required>
<option value="double">Double</option>
<option value="single">Single</option>
</select>
</div>
</div>
</div>
<div class="form neighbour">
<div class="title-group small">
<label for="adults" class="fcf-label">Adults</label>
<input type="number" id="adults" name="adults" min="1" max="5">
</div>
<div class="title-group small">
<label for="child" class="fcf-label">Children</label>
<input type="number" id="child" name="child" min="1" max="5">
</div>
<div class="title-group small">
<label for="age" class="fcf-label">Age of the Child</label>
<select name="age" id="age" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
JQUERY:
$('#but_add').click(function () {
// Create clone of <div class='input-form'>
var newel = $('.input-form:last').clone();
// Add after last <div class='input-form'>
$(newel).insertAfter('.input-form:last');
});
})
You can first clone the form via a selector (as you do) and search for every form element (input and select) via multiple selector. Once you have them stored, you can map them and then update the input element id via .attr to add index for every time you do this (ex: room, then room1, then room, ...). To be clear you could rename every id in your initial HTML with '0' (ex: room0).
At the end you will have your form data with every id incremented.
This code will clone the original form, append a unique number to each id and for attribute in the clone, and add the clone to the bottom of the container:
function cloneAndChangeIds(wrapper, text) {
// clone the wrapper
const clone = wrapper.cloneNode(true);
// add text to the `for` attribute of every label
const labels = Array.from(clone.querySelectorAll('label'));
labels.forEach(label => {
label.htmlFor += text;
});
// add text to the `id` attribute of every select and input
const items = Array.from(clone.querySelectorAll('select, input'));
items.forEach(select => {
select.id += text
});
return clone;
}
let iClone = 0;
// get container and original wrapper
const container = document.getElementById('container');
const original = document.querySelector('.input-form');
const cloneBtn = document.getElementById('clone-button');
function appendAClone() {
// clone original and modify IDs
let clone = cloneAndChangeIds(original, '-1');
// add clone at end of container div
container.appendChild(clone);
}
cloneBtn.onclick = appendAClone;
<button id="clone-button">Make A Clone</button>
<p>The original:</p>
<hr>
<div id="container">
<div class="input-form fcf-form-group">
<div class="form only">
<h3 class="fcf-h3">Room</h3>
<div class="form-section">
<div class="title-group">
<label for="room" class="fcf-label">Room</label>
<select name="room" id="room" required>
<option value="double">Double</option>
<option value="single">Single</option>
</select>
</div>
</div>
</div>
<div class="form neighbour">
<div class="title-group small">
<label for="adults" class="fcf-label">Adults</label>
<input type="number" id="adults" name="adults" min="1" max="5">
</div>
<div class="title-group small">
<label for="child" class="fcf-label">Children</label>
<input type="number" id="child" name="child" min="1" max="5">
</div>
<div class="title-group small">
<label for="age" class="fcf-label">Age of the Child</label>
<select name="age" id="age" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<hr>
</div>
</div>
I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});
I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.
I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps
i am cloning an entire div every time a Add More Students link is clicked.
The cloning works but unable to select an option from the cloned select box of the cloned div.
Html
<div id="all">
<div id="student" class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Firstname</label>
<label style="color:red;" id="std_first_name_error"></label>
<div class="append-icon">
<input type="text" id="std_first_name" name="std_first_name1" id="password" class="form-control" placeholder="Enter first name" minlength="4" maxlength="16" required>
<i class="icon-lock"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Select School</label>
<label style="color:red;" id="std_scl_error"></label>
<div class="option-group">
<select name="std_scl_name1" class="language" required>
<option value="">Select school..</option>
<?php foreach ($schools as $school) :?>
<option value="<?php echo $school->sch_id; ?>"><?php echo $school->sch_name;?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
</div>
<div id="add_student"><a><u>Add More Students</u></a></div>
Script
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#add_student').click (function(e){
e.preventDefault();
var clonedEl = $('#student').first().clone();
clonedEl.find(':text').attr('name','std_first_name'+count);
//Add the newly div the the entire div
$('#all').append(clonedEl);
//$('[name="std_scl_name'+count+'"]').html($('[name="std_scl_name1"]').html());
});
});
</script>
Application
The same code of yours works well in this fiddle. What I have changed/added is the only <option> elements. Still I could be able to select an element from cloned div's <select>.
I think what you need to check is php snippet and it's output. It might not feeding the <option> elements.
The id attribute should be unique for each element. Since you use id="student" and id="add_student", these will be cloned and result in duplicate element ids. In this JSFiddle, those ids have been replaced with class="student" and class="add_student".
For any further queries, remember to use the class selecter $('.student') and $('.add_student').
This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.