I have a form with two buttons that have the same name and id (don't ask me why, I didn't create the form lol). I am trying to use Ajax .click function to run when the buttons are clicked. However, the function is only working with the "Approve" button and not the "Forward" button. Is there anyway to call this function from the Forward button?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnApprove").click(function(){
alert("Button was clicked.");
});
});
</script>
</head>
<body>
<input type="submit" name="btnSubmit" id="btnApprove" value="Approve" tabindex="1102" />
<input type="submit" name="btnSubmit" id="btnApprove" value="Forward" tabindex="1102" />
</body>
</html>
I modified the code from http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click
IDs must be unique. Even if they aren't unique, jQuery only selects the first occurence.
You should change the IDs to be unique.
But anyway, you select per name instead:
$("input[name=btnSubmit]").click(function(){
alert("Button was clicked.");
});
No two elements on a page should have the same id.
$("#btnApprove") maps the the native document.getElementById method which returns the first instance of an element of that id, so the event is only being bound to the first button
add a class attribute to both buttons, putting them in the same class
then you should be able to do something like
$('.NameOfClassHere').click(function(){
or
$('.NameOfClassHere').live('click', function () {
This will work for the click event of all buttons in that class, so saves you from using duplicate code. Also, agreed that you should not use duplicate IDs. Hopefully this helps.
Related
I have a form in a php loop, and if there are 3 elements in the database, there are 3 forms with same name. Those forms do contain a button with the same name. So everything likes like this:
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
The problem appears when I try to call .on or .click function from javascript. It works only once.
This is the JS code:
$(document).ready(function () {
$('#testbutton').on("click", function() {
function();
});
});
The button fades out certain div's which have different names.
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
Give your elements a class instead :
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
Now your selector can use the class:
$('form').on("click", ".testbutton", function(){ // event will bubble up to form
please try to bind event on button type rather than id like this
$(':button').on("click", function(){
// do other stuff
});
Please check here in fiddle
I have solved my problem with this sentence:
$(this).closest("form").find("input[name=testfield]").val()
It is a bit complicated to explain the problem, but the solution is here. Button click finds the closest form and closest value of the field required. So, my problem is gone, but thanks for all the help, you have helped me to clear out some doubts! :)
I am very new to jQuery and HTML. I am trying to create a button in html that uses jQuery to make the button to prompt alert message when clicked (rather than using onclick in html). In other words, I would like to use the jquery to call up the click function for the button and then return a pop up message.
I have my input type as "button" and my value as "Check" for my button in html.
Here's my code in javascript
$(document).ready(function(){
$("button").click(function(){
alert("Pop Out");
});
but nothing is showing up
Here's a fiddle to my code
http://jsfiddle.net/0ynbv233/8/
I have my input type as "button"
Like this?
<input type="button" />
In that case, this won't work:
$("button")
That selector is looking for button elements, not input elements. You can change the element:
<button />
or you can change the selector:
$('input[type="button"]')
I did what you have done and it worked for me.
Here is what my code was.
$(function(){
$("button").click(function () {
alert("Pop Out");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click Me</button>
Hope you figure out what you are doing wrong.
I use jQuery to know my input changes .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id_back_ground_color").change(function(){
alert("hello");
});
$("#salam").click(function(){
alert("hey");
$("#id_back_ground_color").val('changed!');
});
});
</script>
</head>
<body>
<input id="id_back_ground_color" type="text">
<button id="salam" >
</body>
</html>
When I click on the button I get a "hey" alert but I don't get the "hello" alert. Why?
There's no link between a click on the button and an edit in the id_back_ground_color field.
The change event is sent to an element when its value changes. This
event is limited to elements, boxes and
elements. For select boxes, checkboxes, and radio buttons, the event
is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.
From http://api.jquery.com/change/
Change this line
$("#id_back_ground_color").val('changed!');
to this
$("#id_back_ground_color").val('changed!').trigger( "change" );
I have a page in which buttons are dynamically generated by PHP based on a MySQL table. Each button is inside an anchor tag. When the anchor tag is clicked, it calls a Javascript function which performs several operations.
For one of these operations, I need to get the value of the button and pass it as a parameter. AFAIK, I can't use an ID because the buttons are dynamically generated and there may be any number of them.
Here's the button/anchor code:
<button type="button" class="regbutton" value="'.$row['instance_id'].'">'.$row['DATE'].'</button></span>';
It seems that jQuery functions like .next() only apply to sets of elements like li as opposed to two dissimilar element types. Any ideas?
Maybe it's not valid HTML, but you can make it work.
I made a JSFiddle example, by selecting the button element of the children i retrieve the value.
<script>
function updateDetails(a, b, c){
alert(c);
}
</script>
<button type="button" class="regbutton" value="test">click</button>
I hope this solution fits for you :).
Stefan
I hope this works fine if you are using JavaScript.
<!DOCTYPE html>
<html>
<head>
<script>
function test()
{
alert("Hiii");
var x=document.myForm.click.value;
alert(x);
}
</script>
</head>
<body>
<form name="myForm" action="html_form_action.asp" method="get">
<input type="button" name="click" value="click" onclick="test()"/>
</form>
</body>
</html>
I have a problem with javascript. I have downloaded a rating star plugin , this one to be exact: http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I have multiple things to rate on one page, so i thought i could use an onclick to send it to a function, that sends it to my database with ajax. The problem is, when a rating star is clicked nothing happens, ive tried it on a regular submit button and the function gets executed.
Here is the code :
<script type="text/javascript">
function postform(){
alert('Thing is clicked');
};
</script>
And the star is actually a radio button:
<input name="adv1" type="radio" class="star {split:4}" value="0.50" onclick="postform()"/>
I can't see what is wrong with the code, because when i test it on a regular button like this :
<input type="submit" value="testbutton" onclick="postform()"/>
It gives me the alert Thing is Clicked.
Somehow the star doesn't like the onclick stuff..
Ive tested it in IE, Chrome and FF, nothing ever happens
could someone help me out here?
Thanks alot!
Edit:
As requested by Lukas , i have this in my head :
<script type='text/javascript' src='jquery.min.js'></script>
<script src='jquery.MetaData.js' type="text/javascript"></script>
<script src='jquery.rating.js' type="text/javascript"></script>
That library is handling the onclick event of the radio button for you, so you cannot handle it by adding an attribute onclick to the input element.
According to their documentation you need to put some code like this in a script:
$('.auto-submit-star').rating({
callback: function(value, link){
alert(value);
}
});
Then add the class auto-submit-star to the class list of your radio button:
<input name="adv1" type="radio" class="auto-submit-star {split:4}" value="0.50" onclick="postform()"/>