for the following:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
remove
</div>
</div>
</div>
<div class="row addControl">
Add
</div>
</div>
when I run this:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
it clones 'parent' section which works great. But i want it to clone it without values in the input fields.
what's the best way to clear all input fields in a section?
thanks
Can't see any reason why this won't work..
var oClone = parent.clone();
oClone.find("input").val("");
parent.after(oClone);
Related
I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});
First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>
I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.
The thing is I have multiple of these going down and need to only display for the certain one I clicked.
So far I only have it set it for Monday but I cant get the from-to to appear on the first one.
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
</div>
</div>
</div>
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('click', function(){
$(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});
https://jsfiddle.net/y1b8fr20/
Update
Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:
The to from boxes only appears when a .monday checkbox is checked
If a .monday checkbox is unchecked, the .to from boxes will slideUp.
If either .monday is checked, fromto stays.
fromto will only slideUp if both .mondays are unchecked
You have only one from to input so this is sufficient:
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
Move this out of the influence of the second set of checkboxes:
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
Demo
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
What I want is when someone click on button, set the phone number to input value. The block is a loop in which different email and phone number appears. if some one click in a specific block get the phone number from that block only. Thanks.
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">
Here is my code:
jQuery(document).ready(function() {
jQuery(".block button").click(function() {
var contents = jQuery(this).find(".phone span").text();
jQuery("#phone").val(contents);
});
});
You tagged jQuery so I'm assuming it's ok for you to receive an answer using jQuery. Try something similar to:
$('button').click(function(){
var phoneNumber = $(this).closest('.phone').find('span').text();
});
Try this-
jQuery(document).ready(function($) {
$(".block").each(function() {
$(this).find('button').click(function(){
var contents = $(this).parents('.block').find('.phone span').text();
$("#phone").val(contents);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">
I'm currently looking for advice on some jQuery as I think I'm doing this incorrectly even though I'm getting the result I want.
I want to change the value of an input to the value of the closest input with a class of .milestone when it's changed. The input which I want to change is the holding input and I want it to the equal value of the revised input on change. Below is the HTML which I can't change unfortunately as this is a product.
<div class="container area dform_section_area6">
<div class="box box13 two">
<div class="dform_section_box13">
<div style="clear: both;" data-type="html" data-name="business_case_approved_pmr" id="dform_widget_html_business_case_approved_pmr" data-active="true" class="dform_widget dform_widget_type_html dform_widget_business_case_approved_pmr">
<p>Business Case Approved</p>
</div>
</div>
</div>
<div class="box box14 two">
<div class="dform_section_box14">
<div data-type="date" data-name="bc_approved_planned_pmr" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_pmr dform_widget_bc_approved_planned_bc">
<div>
<label for="dform_widget_bc_approved_planned_pmr">Planned</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_pmr" type="date" name="bc_approved_planned_pmr" data-mapfrom="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box15 two">
<div class="dform_section_box15">
<div data-type="select" data-name="bcapproval_on_target" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_select dform_widget_bcapproval_on_target dform_widget_">
<div>
<label for="dform_widget_bcapproval_on_target">On target?</label>
</div>
<div>
<select id="dform_widget_bcapproval_on_target" name="bcapproval_on_target" class="dform_field_active">
<option></option>
<option value="Yes" data-off="bc_approved_revised_pmr">Yes</option>
<option value="No" data-on="bc_approved_revised_pmr">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="box box16 two">
<div class="dform_section_box16">
<div data-type="date" data-name="bc_approved_revised_pmr" data-active="false" data-agentonly="false" class="container dform_widget milestone mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_revised_pmr dform_widget_">
<div>
<label for="dform_widget_bc_approved_revised_pmr">*Revised</label>
</div>
<div>
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
</div>
</div>
</div>
</div>
<div class="box box17 two">
<div class="dform_section_box17">
<div data-type="date" data-name="gate_3_actual1" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_gate_3_actual1 dform_widget_">
<div>
<label for="dform_widget_gate_3_actual1">Actual</label>
</div>
<div>
<input id="dform_widget_gate_3_actual1" type="date" name="gate_3_actual1" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box18 last two">
<div class="dform_section_box18">
<div data-type="date" data-name="bc_approved_planned_bc" data-active="true" data-agentonly="false" class="container dform_widget param mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_bc dform_widget_">
<div>
<label for="dform_widget_bc_approved_planned_bc">holding</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_bc" type="date" name="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
</div>
I'm using the jQuery below to find the value of the input I want to update but I can't help but think that there must be a less long winded way to change this. I can't just reference the input's ID as I need to do this for 20+ fields.
$(this).parent().parent().parent().parent().next().next().find('.param').find('input').val()
This =
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
You can use closest() method instead and find recursive parent() element and then find child level element for siblings.
$(this).closest(".dform_section_area6").find('.param:last input').val()
I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('Some divs and input fields');
However, I also want the option to insert a new child after the focused content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
And the input field in the first content div is in focus, I want to insert an element after that div, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Third div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
How would I do this?
$(':focus') will give you the focused element and closest('.content') gives its ancestor with class content and then you use after to insert the element.
$(':focus').closest('.content').after(whatever_element_you_want_to_add);
As you said
The append function is triggered by pressing enter.
You can try this code. It gets triggered on pressing enter key on input :
HTML:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
JS:
$('#wrapper').on("keyup",'input',function(e){
if(e.keyCode == 13)
{
$(this).closest('.content').after("<div class='content'> <div class='subcontent'>Some div<input type='text' /> </div></div>")
}
});
Fiddle