My html code is
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
I gave jquery like
$('.clrPric').click(function(){
console.log($(this).index());
});
It shows only 7 in console. No other elements with this class.
I want to get the number of the clicked button.
Thanks in advance.
You need to do this:
$('.clrPric').click(function () {
console.log($(this).index('.clrPric'));
});
FIDDLE
Related
I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.
You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
I want to have the btnDisableFilteredList disabled during the initial page load. Then I want to enabled the enable it after the btnSearch button is click. How do I do it using jQuery?
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" /><input type="submit" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
You need to give the btnDisableFilteredList the disabled prop first:
disabled="disabled"
Then setup an on click event listener on the btnSearch input to remove the disabled prop from the btnDisableFilteredList input.
$(function() {
$("#btnSearch").on("click", (e) => {
e.preventDefault();
$("#btnDisableFilteredList").prop("disabled", false);
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" />
<input type="submit" id="btnSearch"value="Filter"/>
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" disabled="disabled"/>
</form>
Try in this way:
$(document).ready(function() {
$("#btnSearch").click(function () {
$("#btnDisableFilteredList").css("display", "inline-block");
});
});
#btnDisableFilteredList {
display: none;
}
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search:
<input type="text" name="SearchString" />
<input type="button" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
Look at this codepen
I used type="button" instead of type="submit" to avoid reloading the page, then to submit the form you can use jQuery's AJAX Function
Actually I have two divs available on my page with buttons and I am passing the hidden field attached with that button to the jquery function But when I click on the second div it pass the value of the first div. Below is the html code
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="42" id="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="11" id="poll-id">
</div>
And I am using this jquery :
$(document).on('click','#vote-btn', function() {
console.log( $("#poll-id").val());
});
NOTE: The Div ids are not same all the time
The id attribute should be unique in the same document, it will be better if you're using global classes instead :
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
Then use siblings to target the related field :
$(this).siblings(".poll-id").val();
Hope this helps.
$(document).on('click','.vote-btn', function() {
console.log( $(this).siblings(".poll-id").val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
You can select the DIVs with the class "wp-polls-ans" and then the buttons inside
$(".wp-polls-ans #vote-btn").click(function(){
var val = $(this).parent().find( "#poll-id").val();
alert(val);
})
This is the fiddle
Here is the working javascript code:
$(document).on('click','#vote-btn', function() {
console.log( $(this).siblings("#poll-id").val() );
});
i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to.
<html>
<head><title>test</title></head>
<body>
<script> function num(id) { return document.getElementById(id); } </script>
<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>
Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="←" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>
</body>
</html>
is there a way of making one number key pad that i call from any page or do i need to make the above for each input?
thanks
One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it.
I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.
Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.
If I have three functions A(),B(),C()
<input type="button" value="text" id="Button" onclick="A()"></input>
What should I write in function A() to make it into
<input type="button" value="text" id="Button" onclick="B()"></input>
after I click the button.
Change attribute after click:
<input type="button" value="text" id="Button" onclick="B();this.setAttribute('onclick','A()')"></input>
http://jsfiddle.net/ye87k/