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">
Related
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>
I have very mess html code like this and i cant influence the structure.
<div class="head">
<p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
</div>
I need for every input with class "mand" the next above text from p in the head-div.
For example: For the input field with value"3", I need the p text "something 3".
$(".mand").each(function(){
console.log( $(this).prev(.head).find('p').text() ); // not working
});
How can i get this content? Thank you!
You can try something like this, this will loop through each parent until it has a prev element with the class head
function parent(obj) {
if ($(obj).prev(".head").length) {
return $(obj).prev(".head").find("p").text()
} else {
return parent($(obj).parent())
}
}
$.each($('.mand'), function() {
console.log(parent($(this)));
})
function parent(obj) {
if ($(obj).prev(".head").length) {
return $(obj).prev(".head").find("p").text()
} else {
return parent($(obj).parent())
}
}
$.each($('.mand'), function() {
console.log(parent($(this)));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
</div>
please try this
console.log( $(this).prev('.head').find('p').text() );
If you really can't fix your code, and it will always be like that (which, of course we both now it can be improved), you can code it like this:
$.each($('.mand'), function(){
console.log($(this).parent().siblings().children('p').text());
})
If you could be able to have ".foo" div parent for every ".mand", it would look like this.
$(".mand").each(function(){
console.log( $(this).closest('.foo').prev('.head').find('p').text() );
});
it would work for this html
<div class="head">
<p class="any-else">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<div class="another-needless-div">
<input type="text" class="mand" value="3">
</div>
To solve this problem, first you need to structure your html codes as follows (Your original codes use different structure for each input, which makes hard for the selector to find the correct contents in the p tag. Also, it is a good practice to name the similar components with the same class name.):
<div class="head">
<p class="any">something 1</p>
</div>
<div class="foo">
<input type="text" class="mand" value="1">
<div>
<div class="head">
<p class="any">something 2</p>
</div>
<div class="foo">
<input type="text" class="mand" value="2">
</div>
<div class="head">
<p class="any">something 3</p>
</div>
<div class="foo">
<input type="text" class="mand" value="3">
</div>
Then, you could simply use the following jQuery codes to get the contents:
$(".mand").each(function(){
console.log($(this).parent().prev().children(".any").text());
});
Hope this could help!
I want to instantly display the user's input so each input has a corresponding display div.
the html:
<div class="row">
<div class="col-lg-3">
<?php echo $this->Form->input('contact_person'); ?>
</div>
<div class="col-lg-3">
<?php echo $this->Form->input('mobile'); ?>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Contact Person'); ?></label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Mobile'); ?></label>
<div id="test2"></div>
</div>
</div>
the javascript:
$('#PostContactPerson').keyup(function(){
$('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
$('#test2').html(this.value);
});
I am new to Javascript.. is there a way to combine all these same scripts so one key function handles all instant input display?
$('input').keyup(function(){
var outputId = null;
switch ($(this).attr('name')) {
case 'contact_person': outputId = '#test1'; break;
case 'mobile': outputId = '#test2'; break;
}
$(outputId).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Consider this (I changed the HTML for the example to work, but your HTML is just fine)
But you may want to change the ID of your output fields:
$('input').keyup(function(){
$('#output_'+$(this).attr('name')).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="output_contact_person"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="output_mobile"></div>
</div>
</div>
In this case the ID of the output field is the same as the name of your input field, but with a prepended "output_"
Or if you have some fields which shoudl not work with output field, consider telling the input-fields that they have an output field:
$('input').keyup(function(){
var outputId = $(this).data('output');
if (outputId) {
$(outputId).html($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" data-output="#test1" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" data-output="#test2" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Notice the data-output-attribute to link to output-div.
You can find out the source of the event of the handler function two ways: this or event.target:
<div>first</div>
<div>second</div>
<script>
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; ++i) divs[i].addEventListener("click",function(e) {
alert(e.target.innerHTML);
alert(this.innerHTML);
});
</script>
Try clicking the divs on the fiddle.
There are many methods for DOM traversal, but if you want to use ids, you can create dictionary:
var targets = {
"PostContactPerson": "test1",
"PostMobile": "test2"
};
and the handler function would be
function(e) {
$('#'+targets[this.id]).html(this.value);
}
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
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);