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"/>
Related
I need to submit the form data to backend (using python flask), but I'm not allowed to use button with type="submit", I can only use a regular button (with type="button"), and implement the submit logic in Javascript. How to do this?
Use onclick event on the <button> and the <form> DOM submit method
function submitForm() {
let form = document.getElementById("simple-form");
// do something here before submitting the form
form.submit();
}
<form id="simple-form">
<label>Name</label>
<input type="text" />
<button id="btn-submit" type="button" onclick="submitForm()">Submit</button>
</form>
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 an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.
While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };
Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});
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.
I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George
You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks
<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.
If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>
<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.