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
Related
I have a form as follows:
<form name="dummyform" id="dummyform">
<input type="text" name="dummyname">
<input type="submit" name="save_as_draft" id`="save_as_draft">
<input type="submit" name="send" id="send" hidden>
<button name="Dummysend" id="Dummysend">SEND DUMMY</button>
</form>
I want to trigger only the button with id send automatically when I click on the button with id Dummysend. I can do this by doing this JavaScript code:
document.getElementById("dummyform").submit();
The problem is that there are two submit buttons in this form. How can I only trigger the submit button with id send?
By input name, ID, context...
For example:
document.getElementById("send").click();
Watch out for your HTML too it has some syntax errors:
The 'action' attribute is required for elements.
'id`' is not a valid attribute of the element.
I am using node.js/express to create a webpage.
I currently have a form with some input and a submit button which is trigger by the click of another button currently on the page
This is the code for my form:
<form name= "form" id="form-id" action="http://localhost:1337/process_post" method="POST">
<input type="hidden" name="hiddentext" id="textarea"/>
<input hidden type="submit" name="submitbutton" id="submit_button"/>
</form>
This is my button (which triggers the submit for the form to be clicked during the onclick event)
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id')" />
This is my JS script to click the submit button
function load_page(formId){
document.getElementById("submit_button").click();
}
The issue I have is that the form is being submitted twice. I am unsure why this happens and how to fix the issue. Any tips?
You need to return false in your onclick attribute so as to prevent the default action, which is to submit the form (which you're already doing). Like this:
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id');return false;" />
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.
In jQuery-Mobile I'm submitting a form programmatically and I want to capture the submit event to perform some validations before. I have already tried the following solution provided in other questions about jQuery:
$(document).ready(function(){
$('#my_form').bind('submit', function() {
alert('before submit');
...
});
});
But I cannot get the function executed and the alert displayed. Does anyone know any other way to achieve this?
My form is something like:
<form id="my_form" method="POST" action="..." data-theme="b">
And the way I am calling it programmatically, from another section of the same page is like this:
<input type="submit" onclick="document.forms['my_form'].submit(); return false;" value="Submit" data-theme="b"/>
Thank you in advance for your help.
The submit handler of the form is NOT executed when you submit the form programatically.
NOTE: Do NOT use a submit button to programatically submit a form. Instead use button or allow the submission from the submit button to be handled, i.e.
<input type="button" onclick="document.forms['my_form'].submit()" value="Submit another form" data-theme="b"/>
(the above is not correct anyway since it needs the form to have a NAME, not just an ID)
So
<input type="button" onclick="document.forms['my_form_NAME'].submit()" value="Submit another form" data-theme="b"/>
OR
<input type="button" onclick="document.getElementById('my_form_ID').submit()" value="Submit another form" data-theme="b"/>
OR since you have jQuery:
<input type="button" onclick="$('#my_form_ID'].submit()" value="Submit another form" data-theme="b"/>
OR if you can put the button in the form (best way):
<input type="submit" value="Submit THIS form" data-theme="b"/>
But since you want to bind - here is how to submit using another button instead of the better way using the form's own submit button:
<form id="actualForm">...
.
.
</form>
<input type="button" id="subbut" value="Submit another form on this page" data-theme="b"/>
$(document).ready(function(){
$('#subbut').bind('click', function() {
alert('before submit');
...
$("#actualForm").submit();
});
});
If there is hardcoded inline behaviour you cannot change, use the jQuery to remove it too
How can I remove an inline onclick attribute with a bookmarklet?
$(document).ready(function(){
$('#subbut').attr('onclick',""); // or $('#subbut').onclick=null;
$('#subbut').bind('click', function() {
alert('before submit');
...
$("#actualForm").submit();
});
});
Changing the return value of onClick to TRUE does the job:
<input type="submit" onclick="document.forms['my_form'].submit(); return ***true***;" vakue="Submit" data-theme="b"/>
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);
});