value of button using javascript - javascript

I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?

<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.

What about:
var buttonValue = document.getElementById('IdOfYourButton').value

have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?

There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});

Related

HTML/PHP change the button used when enter is pressed

so i have 2 buttons
<button type="submit" name="print">print</button>
<button type="submit" name="search">search</button>
beside the button search there is a textbox
<input type="text" name="txtSearch" autofocus>
now what i want to do is whenever I press enter i'd like to submit using the button search. but what happens is the button print is always getting submitted because it is on top of button search. I cant put button search on top of print because of the design. Is it possible to do it in php? or do I need javascript? i'm just starting to program and trying to learn more. thank you very much for the help!
You can't do that with php , you should use javascript or jquery .
add an id for your search input like this :
<button id='search' type="submit" name="search">search</button>
then you can use this code in jquery :
$('#search').keydown(function(e) {
var key = e.which;
if (key == 13) {
$('#your-form').submit();
}
});
You can...
Separate into two forms:
<form>
<button type="submit" name="print">print</button>
</form>
<form>
<button type="submit" name="search">search</button>
<input type="text" name="txtSearch" autofocus>
</form>
Or change the print button to:
Print or
<button type="button">print</button>
Or you could put your search button first, and use float or some kind of position:absolute and margin-top CSS.
Or use JavaScript, as Parsa suggests.

how to get which <html:submit> button is clicked in javascript

I have two <html:submit> buttons for validating both buttons by using common method form on submit(), both submit buttons are same value "save" how can I get which button is clicked in JavaScript for the purpose of separate validations..
using onclick attribute to check different validation:
<input type="submit" value="save" onclick="validate1();"/>
<input type="submit" value="save" onclick="validate2();"/>
and do different validation in two function.
With eg. jQuery you can utilize the target attribute that gets sent in the click()-function:
$( 'button' ).click(function( event ) {
console.log(event.target.nodeName );
});
Try this:
<form onsubmit="alert(this.submited); return false;">
<input onclick="this.form.submited=this.value;" type="submit" value="save" />
<input onclick="this.form.submited=this.value;" type="submit" value="save" />
</form>
JSFIDDLE DEMO

Jquery / Ajax - How to determine which form to .serialize if all forms have same class?

On my mainPage.html, I dynamically created multiple forms each with different values in their input tag.. this is my mainPage.html:
<form class='voteForm' method="post" action="/post/likePost/">
<button class="voteButton" type="submit">
</button>
<input type="hidden" name="postID" value="1" />
</form>
<form class='voteForm' method="post" action="/post/likePost/">
<button class="voteButton" type="submit">
</button>
<input type="hidden" name="postID" value="2" />
</form>
<form class='voteForm' method="post" action="/post/likePost/">
<button class="voteButton" type="submit">
</button>
<input type="hidden" name="postID" value="3" />
</form>
As you can see, all three forms are similar, just their value is different. Now, this is my JS function
<script type='text/javascript'>
$('.voteForm').click( function() {
event.preventDefault();
alert($('.voteForm').serialize());
});
</script>
The problem is, whenever I click on any of the forms, it keeps automatically assuming that the form clicked is the last form which has a value of '3' in input, so it keeps altering the number 3 regardless of which form I click. I'm assuming this is because I did
$('.voteForm').click
and all three forms have the same class so it automatically takes the last form and runs the function. How do I make it so that it takes the form who's button I clicked and alerts the input-value of the clicked form WITHOUT changing the class or adding an ID to the form? Is there a way? I need all the forms to be the same (except for their input-value's).
Your click event handler is given a reference to the button that was clicked as the this context for the callback function. Use that to select the correct form:
$('.voteForm').click( function() {
event.preventDefault();
alert($(this).closest('form').serialize());
});
Better yet, rearchitect your markup so you have a single form, or no form at all, and just use the value of the thing which is being clicked. Using three forms for this which all submit to the same URL is a little odd.

multiple submit buttons on same form with onsubmit function

I have 3 sumbit buttons in myform and i need different 3 actions based on which buttton it clicked. so i need to write javascript function to do the same. how i can get to know in javascript which button is clicked.
Javascript:
<script type="text/javascript" language="javascript">
function submitform(){
//do something
}
HTML:
form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"
Any help will be appreciated
Edit:
You could also have a hidden input which tells you which button was pressed, then handle it on the server. When a button is clicked it will change that input before submitting.
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='forward';return true;" id="linkName" value="Forward" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='back';return true;" id="back" value="Back" />
Demo: http://jsfiddle.net/Homeliss/vperb/
Note: the demo uses jquery to show a message instead of posting the form, but that is just for demo purposes. The solution is plain javascript
In modern browsers, you can use the submitter property of a SubmitEvent.
function submitForm(submitType)
{
switch (submitType)
{
case 'Submit 1':
console.log('Submit 1');
break;
case 'Submit 2':
console.log('Submit 2');
break;
}
return false;
}
<form onsubmit="return submitForm(event.submitter.value)">
Name: <input name="name" required /><br />
<div>
<input type="submit" value="Submit 1" />
<button type="submit" value="Submit 2">Submit 2</button>
</div>
</form>
If you could use jQuery, then this could be much easier.
One solution however would be to remove the submitform() from the form and add it to the onclick event of each of your submit buttons. This way, you can alter it to pass a parameter denoting which button called it.
Good luck.
we can submit a form once in html pages. So we use only one submit button in a form. But for calling more functions we can use onClick event and input type should be button.
I have a question. is there any other input field inside your form?
If there is another field such as text field, which buttons action will be call when we press Enter inside the text field?
My suggestion is this:
<form name="myform" method="get,post" onsubmit="return false;">
<input type="button" value="Home" onclick="submitform(1)" />
<input type="button" value="Reschedule" onclick="submitform(2)" />
<input type="button" value="Cancel" onclick="submitform(3)" />
</form>
in this code, user must click on a button to submit the form and pressing the enter will not cuse to doing any action.

lock all submit button before page fully rendered

may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?
Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).
By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');
jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">
<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});
Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.

Categories

Resources