Here is my html code:
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow();">Contact Now</a>
</td>
my javascript function is as follow's:
function contactnow()
{
var id=$(this).parent('.user_id').val();
alert(id);
}
I need to get the value of hidden field on click on this anchor, these anchor's are multiple on same page as looping data from database.
Pass reference in onclick attribute.
<a class="contactnow" href="#" onclick="contactnow(this);">Contact Now</a>
use this
function contactnow(e)
{
var id=$(e).parent().find('.user_id').val();
//or
var id=$(e).siblings('.user_id').val();
alert(id);
}
However instead of using javascript in html attributes you can separate your javascript entirely which is lot more cleaner and you don't have to repeat onclick everytime for it to work in multiple elements. Remove onclick attribute
Html
<a class="contactnow" href="#">Contact Now</a>
JS
$('.contactnow').click(function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
// if you are using dynamically added element use
$(document).on('click','.contactnow', function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
Remove the inline event handler and use:
$('a.contactnow').click(function() {
console.log($(this).prev('input').val())
})
jsFiddle example
As I commented above, $(this) isn't what you think it is since you pass nothing to your function. The you need the .prev() element, not the .parent().
If you want to continue to use the inline event handler you need to pass the this keyword.
Change:
onclick="contactnow();"
to:
onclick="contactnow(this, event);"
function contactnow(ele, e)
{
var id=$(ele).siblings('.user_id').val();
alert(id);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow(this, event);">Contact Now</a></td>
</tr>
</tbody>
</table>
I see that you tag jquery, here is an simple example of it.
$('button').on('click', function () {
var answer = $(this).prev().val();
alert(answer)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" value="4">
<button>click me</button>
Related
<div id="radiodiv1">
<ul id="span1" data-role="listview">
<li>value1</li>
<li>value2</label></li>
</ul>
</div>
<br>
<table style="border:none;">
<tr>
<td>
<input type="text" id="item" />
</td>
<td>
<input type="button" value="Add params to list" onclick="appendToList()"/>
</td>
</tr>
</table>
script
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product);
});
});
when clicked the button am getting in log as
Object[li.ui-li-static.ui-body-inherit.ui-first-child]
Object[li.ui-li-static.ui-body-inherit.ui-last-child]
i have to get the values as value1 and value2
can someone say what was wrong here
You want to get the text() property, not the entire object, change this:
console.log(product);
to this:
console.log(product.text());
Use
console.log(product.text());
(it is plain vanilla jQuery)
problem is with this line
var product = $(this);
You have to extract text
var product = $(this).text();
$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
jquery get the id/value of LI after click function
you should use :
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product.text());
});
});
bur before that add the id="bizParams" to your button.
<input type="button" id="bizParams"value="Add params to list" />
i want this code to be reusable ,instead of this :
$(this).closest("tr").find("td input").eq(1).val()
i was hoping for calling it by name using :
(($(this).closest("tr").find("td input").attr("name")) so i dont have to set every .eq(n)
but its not working :
here's my jquery code :
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input").eq(1).val() == "ADD") alert("add");
else alert("change");
});
see this working FIDDLE for my first code.
id attributes should be unique. Also you're looking for the attribute selector in jQuery. EG.
$(this).closest("tr").find("td input[type='text']").val();
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find("td input[type='text']").val();
alert(inputVal);
});
UPDATE FIDDLE
UPDATE BASED ON COMMENTS
It appears that you could have more than one input of type text in your table cell. As such i would suggest adding a class to the input element you are looking to get the value from.
HTML
<table class="tdiv">
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="ADD" />
</td>
</tr>
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="CHANGE" />
</td>
</tr>
</table>
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find(".getVal").val();
alert(inputVal);
});
EXAMPLE FIDDLE
First of all you should not use id for multiple elements, so change id="tddelete" to class="tddelete" for all button elements.
<input type="button" class="tddelete" />
You can find for input element present in next td of button's parent td. Don't forget to put name attribute for input elements.
$('.tdiv').on("click", ".tddelete", function () {
var val = $(this).closest("td").siblings().find("input[name=flag]").val();
alert(val);
});
Demo
Instead of using attr, use an attribute selector in your find method .find("td input[name=somename]")
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input[name=somename]").eq(1).val() == "ADD") alert("add");
else alert("change");
});
Here is a normal HTML file that contain a form and it has some children label, part of codes:
<form name="search" action="/cgi-bin/MAPSEARCH2" method="get" onsubmit="var the_result = checkMapNumbers();
return the_result;">
<input type="hidden" name="LOCAL" value="ALE">
<table width="700">
<tbody>
<td width="20">
<input type="radio" name="ORDER" value="NAM" checked=""></td>
<td width="100" valign="top"><font style="color:#330099;">Owner´s Name:</font></td>
</tbody></table>
</form>
And all I want to do is that Add a click function on this all type of "input" labels: and return two values:
"method" and "action" attribute of its father "form".
Following is my JS codes:
$(document).ready(function(){
$("input").click(function(){
var a=$(this).parents("form").method;
var b=$(this).parents("form").action;
$("#test1").text("parents.name:"+ a+ "parents.action"+b);
});
});
But after I click any input element in browser, the output for method and action's values are "undefined". How to return right function.
var a=$(this).parents("form").method;
Either use simple native DOM:
var a = this.form.method;
or proper jQuery:
var a = $(this).parents("form").prop('method');
Same for the action property.
Use .prop(), it fetches the value of a property
var a=$(this).closest("form").prop('method');
var b=$(this).closest("form").prop('action');
Try this,
$(document).ready(function(){
$("input").click(function(){
var a=$(this).closest("form").attr("method");
var b=$(this).closest("form").attr("action");
$("#test1").text("parents.name:"+ a+ "parents.action"+b);
});
});
FIDDLE
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<table id="question">
<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>
</form>
In the code above I am able to replace an image with another image when the if statement is met. But my problem is that when the image is replaced, it does not disable the on click event. My question is that when the image is replaced, how do I disable the onclick event onclick="return plusbutton();?
You disable from within the plusbutton function itself. First, pass the element into the function, like so:
<a onclick="return plusbutton(this);">
Then disable it in the function:
function plusbutton(element) {
element.onclick = '';
/* then do whatever plusbutton did before */
}
But since you are using jQuery, it's better to use handlers. So give the link an id but not an onclick, like this:
<a id="plusbutton" href="#">
And use jQuery.one() to bind a click handler that happens just once:
$(document).ready(function() {
$('#plusbutton').one('click', function(ev) {
plusbutton();
return false;
});
});
event.preventDefault();
Will prevent the element from proceeding its normal function.
try this code:
$('#addQuestionBtn').bind("click",function(){
$('#addQuestionBtn').unbind("click");
insertQuestion(document.form);
});
And your html:
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" />
I have multiple textareas in my HTML form followed by an edit link for each. When I click an
edit link, the corresponding textarea should be enabled. My code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$(this).attr("id").removeAttr("disabled");
});
});
</script>
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1" >edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2" >edit</a>
Why is the textarea not being enabled when the corresponding link is clicked?
ids can only be used once in a page. you can't have 2 elements (or more) having the same id.
instead, do this:
<form id="myform">
<!-- group each in divs -->
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
</form>
<script>
$(function(){
$('#myform').on('click','.edit',function(){
$(this) //when edit is clicked
.siblings('textarea') //find it's pair textarea
.prop("disabled", false) //and enable
return false;
});
});
</script>
if you can't use divs, then you can use prev('textarea') instead of siblings('textarea') to get the preceding textarea.
You're re-using ID values - this is a big no-no. If you're going to give these an ID, you need to do something to differentiate the txt1 link from the txt1 textarea. In the code below, I've added a _link suffix to the links.
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1_link">edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2_link">edit</a>
With that small change, we can now modify the disabled property of the textarea:
$(".edit").on("click", function(e){
$( "#" + this.id.replace("_link", "") ).prop("disabled", false);
e.preventDefault();
});
The selector, unfortunately, includes a use of the replace() method. If you remove the ambiguity in ID's between the links and the textareas, you can do away with this.
Demo: http://jsbin.com/unebur/edit#javascript,html
You are trying to remove disabled attribute of anchor tag by $(this). Try this.
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$("#"+$(this).attr("rel")).removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a>
<textarea id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a>
Hello please make some changes as mentioned below
<script type="text/javascript">
$(document).ready(function () {
$('.txtAreas').attr('disabled', true);
$("#txt3").click(function () {
$('#txt1').removeAttr("disabled");
});
$("#txt4").click(function () {
$('#txt2').removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtAreas"></textarea>edit
<textarea id="txt2" class="txtAreas"></textarea>edit
Since that's an onclick handler, $(this) is going to point at the element you clicked on, which is the <a> tag. That doesn't have a disabled. You need to move up the dom tree to the parent node, which'd be the textarea, and remove the disabled attribute there:
$(this).parent().removeAttr("disabled");