I have this html code
<div class="sub-middle-column">
<div class="div-header">Grandsire
<a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a>
<ul class="table-controls hide side-action-items">
<li>
<a data-remote="true" data-box-no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>
</li>
<li>
Go to the Next Horse
</li>
</ul>
</div>
<input type="text" name="search" id="search" class="search_horse">
</div>
on clicking on find_or_add_horse link I want to get the value of the text field using jquery. I tried parent, child and closest but could not get the result. How can I get the value of text field?
$(document).on('click', '.find_or_add_horse', function(){
// on clicking on find/add horse link I need the value of text field here
});
http://jsfiddle.net/jFIT/pyPtW/
You can use parents to find the root element, then use find on that element to get the input.
console.log($(this).parents('.sub-middle-column').find('.search_horse').val());
Try this
$(document).on('click', '.find_or_add_horse', function(){
var value = $('#search').val();
});
JsFiddle
use .val():
$(document).on('click', '.find_or_add_horse', function(){
alert($('#search').val());
});
if you have multiple sub-middle-column div then try this:
$(document).on('click', '.find_or_add_horse', function(){
alert($(this).closest('.sub-middle-column').find('.search_horse').val());
});
You can try the code below
$(document).on('click', '.find_or_add_horse', function(){
var textValue= $('#search').val();
});
.val(); is for input fields, .text() for other html containers like p, div..
AND dont forget to $.trim(); the input, cos hopefully you dont want whitespaces around the input text
try this:
$(document).on('click', '.find_or_add_horse', function(){
var inputtextvalue = $.trim($("#search").val());
});
Related
I have hyperlink containing `class="candidate_type". I want click on a button
and show the id of the anchor with the id of candidate_type.
<script>
$(document).ready(function(){
$("#continue").click(function(){
candidate_type = $(".candidate_type").attr('id');
alert(candidate_type);
});
});
</script>
<a class="candidate_type" id="Employer">I`m Employer</a>
<a class="candidate_type" id="Consultant">I`m Consultant</a>
Continue
Thank You
You have more than one candidate_type elements, to get id of all elements you can iterate over it using .each as shown below
$(document).ready(function(){
$("#continue").click(function(){
$(".candidate_type").each(function(){
var candidate_type = $(this).attr('id');
alert(candidate_type);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="candidate_type" id="Employer">I`m Employer</a>
<a class="candidate_type" id="Consultant">I`m Consultant</a>
Continue
How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.
in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").
You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});
The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});
I want to get input field value. Only based on class and id name.
I am getting undefined in alert box.
Not getting any value which i have entered in input box.
HTML
<div id="tab1" class="tab-pane active">
<div class="input-text">
<div class="input-append">
<input id="textData" class="input-xxlarge" type="text" name="inputName" />
<button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
</div>
</div>
</div>
JS
$('#pressme').on({
'click': function () {
var data = $(".tab-pane active #textData").val();
alert(data);
}
});
.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:
$("#textData").val();
You can use the selector as your text box id enough
var data = $("#textData").val();
Your selector is incorrect as the div has both classes, so you need to join them together like this:
var data = $(".tab-pane.active #textData").val();
Note that id selectors should be unique, so in effect the class selector is redundant anyway.
It will be like
$('#pressme').on({
'click': function () {
var data = $(".tab-pane.active #textData").val();
alert(data);
}
});
Makesure that you have enclosed it on DOM ready
TRY THIS:
$('#pressme').on('click',function () {
var data = $("#textData").val();
alert(data);
});
I have this HTML markup:
<a title="Hide comments" hreflang="1" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
<a title="Hide comments" hreflang="2" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
I'll like to change the title and HTML to "Show comments" on slideToggle but didn't know how. I write this code to show/hide a DIV:
$('.comment-show-link').click(function(e) {
$('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
e.preventDefault();
});
But not know how to check if DIV is hidden or visible and in each case change title and HTML. Also I know that I can use text() or html() jQuery functions to achieve this but how? Any help?
Thanks in advance
Try this:
$('.comment-show-link').click(function(e) {
var $this = $(this);
var num = $this.attr('hreflang');
$('#comment-show-'+num).slideToggle('slow', function(){
if ($(this).is(':hidden')) {
// do something here
// $this.attr('...', '...')
}
});
e.preventDefault();
});
I am trying to remove some elements using a link. The elements that I am trying to remove are in a link's parent div, but i cannot seem to remove them.
Here is the HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="javascript:void(0)">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="javascript:void(0)">Remove Answer Space</a>
Here is the JQuery:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent.$(".QR-answer-holder").$(".QR-answer-label").remove();
$(this).parent.$(".QR-answer-holder").$(".QR-answer-input").remove();
});
Is there anyway to make it so the remove button removes the label and input closest to the end of the div? (or does it do that automatically)?
You're accessing the .parent() node from that anchor .new-qr-answer-space.
Infact, you need to get the .sibling(), since the div.QR-answer-holder is not the parent node:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).siblings(".QR-answer-holder").find(".QR-answer-label:last, .QR-answer-input:last").remove();
});
try
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent().find($(".QR-answer-holder").remove();
});
and it should remove the lable and input as those are inside the placeholder
see siblings:
$(this).siblings('.QR-answer-holder .QR-answer-label').remove();
this would remove the elements '.QR-answer-holder .QR-answer-label' from the same dom node as this.
Try using this
HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="#">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="#">Remove Answer Space</a>
JavaScript:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function(e) {
e.preventDefault();
$(this).siblings(".QR-answer-holder").find(".QR-answer-label,.QR-answer-input").remove();
});
parent is a method, not a property. There is no $ method in the jQuery object, you use the find method to locate children:
$(this).parent().find(".QR-answer-holder .QR-answer-label").remove();
$(this).parent().find(".QR-answer-holder .QR-answer-input").remove();
Edit:
As you actually want to get the closest sibling before the link, you should use the prev method instead:
$(this).prev().find(".QR-answer-holder .QR-answer-label").remove();
$(this).prev().find(".QR-answer-holder .QR-answer-input").remove();
Or if you want to remove all elements in the div, simply:
$(this).prev().empty();