I have some javascript that ends up programatically clicking on a button:
document.getElementById("myButton").click();
This in turn results in the form being submitted using a function call:
<form onsubmit="submit_this_form(this);return false;" action="" method="POST">
It seems that a good percentage of the time either the actual button click is not going through or the form is not being submitted. I think the button click is going through and I know the code is being called because I have a counter embedded and I can see it is executing.
My question is...is there an event or a way to verify that the form actually posted? By the way, I don't have control of the HTML code so I can't change the tag content.
<form onsubmit="submit_this_form(this);return false;" action="" method="POST">
return false after submit_this_form() essentially stops the form from actually submitting. I believe if you change it to:
<form onsubmit="submit_this_form(this);" action="" method="POST">
It should work as you want.
Using return false after an event handler will essentially 'hijack' the default functionality. Basically, whatever your event handler function script does replaces the default behavior, which in this case, is submitting the form data to the server.
I don't think you can verify that form is actually where submitted.
But you can submit it by hand via XMLHTTPRequest and check for server responce.
This way you will be sure thet form is submitted. And you can have an event (your custom event) that says about form submission if you need to...
BTW do not forget to prevent forms default submit if you go AJAX way.
Check jquery.form plugin to make a fast rollout of AJAX form submission and look is it what you want or not.
Good luck!
Related
I have a form with a inline onsubmit event (that sends a simple alert for testing purposes). That alert fires OK when submiting information from this page.
This form has an iframe which have a button that takes the form parent, and submits it. The "postback" on the parent is firing OK but the alert not.
Maybe I'm doing something wrong because the alert is not firing or it cannot be possible?
Parent Form:
<form name="form1" method="post" action="mipagina.aspx"
onsubmit="javascript:alert('hola');" id="form1">
Iframe JS:
formulario = window.parent.document.forms.item(0);
formulario.submit();
That's the normal behavior. From MDN:
The HTMLFormElement.submit() method submits a given .
This method is similar, but not identical to, activating a form's submit . When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
The only workaround I may see is:
add your code before formulario.submit();
very bad idea: overwrite document.getElementById('form1').submit method (please avoid this)
Say we have got a form with an action for example : <form id="form" name="form" action="test.php"> Is there a way to control when will the action occur even if i hit the submit button using Javascript?
you can control it by deciding when you hit the button.
the action attribute of the form tag just dictates what handles the submitted info. For a delay, or other fancy stuff you may want to incorporate some javascript into your front-end design.
here is a link
Try something like this:
$(document).ready(function() {
$('form').on('submit', function(e){
e.preventDefault();
// other actions
})
})
You should call event.preventDefault() when form submit, it function will cancel sumbmiting of the form, later in your scipt you can sumbit it from Javascript.
I have a search form:
<form class="searchForm" id="topSearchForm" action="/search.ds">
that has an onsubmit-event attached to it, triggering a javascript. The purpose of this javascript is to empty certain form-fields before submission of the form based on certain criteria.
To be clear, what needs to happend is:
User input -> User clicks search button (or presses "enter") -> Javascript runs -> fields are cleared -> form is submitted
This works exactly as intended in all browsers except in IE7 and IE8. The javascript runs but for some reason the form submission is done before the fields are being cleared by the javascript. This causes the submitted page to include the data from fields that were supposed to be cleared.
I only have control of (certain parts of) the UI and cannot handle anything after the submission of the form. For usability purpose it is important that these fields (that should be cleared) are filled out up until the user submits the form.
Why is the internal logic different in IE7 & IE8 (it works fine in IE9 and "all other browsers)? Is there a way for me to circumvent this issue?
Here are some more code to clarify:
I attach the event to the form:
var formElement = document.getElementById("topSearchForm");
[...]
formElement.attachEvent('onsubmit', function() {clearForSubmit()});
and clearForSubmit is defined and is triggered.
You can try something like this in the js
<form onsubmit="clearForSubmit(); return false;">
this will NOT submit the form, you can submit the form after you clear it with
form_name.submit();
Use an onclick event instead of onsubmit, then submit the form at the end of the function in code.
so I'm trying to intercept a javascript form submission using jquery, and having some issues. I put Spring in the tags because I wonder if the issue could be that I'm using a spring form:form tag, rather than just a straight html form. Basically, the handler seems to be totally ignored, with the submission going on regardless.
The relevant code is as follows:
function submitForm(functionName){
var form = document.getElementById("evalAdminForm");
//does some stuff
form.submit();
}
$('form').submit(function(){
alert("SUBMITDETECTED");
});
<form:form commandName="evaluation" id="evalAdminForm" name="evalAdminForm" method="post">
//the form is in here
</form:form>
Thanks!
Submit events fire when forms are submitted manually, not in response to JavaScript calling the submit method.
If you are going to trigger form submission using JS (and there is almost never a time when doing so is better than having a submit button) then you need to manually fire any other functions you want to run at the same time.
I am looking for the neatest way to create an HTML form which does not have a submit button. That itself is easy enough, but I also need to stop the form from reloading itself when submission-like things are done (for example, hitting Enter in a text field).
You'll want to include action="javascript:void(0);" to your form to prevent page reloads and maintain HTML standard.
Add an onsubmit handler to the form (either via plain js or jquery $().submit(fn)), and return false unless your specific conditions are met.
Unless you don't want the form to submit, ever - in which case, why not just leave out the 'action' attribute on the form element?
Simply add this event to your text field. It will prevent a submission on pressing Enter, and you're free to add a submit button or call form.submit() as required:
onKeyPress="if (event.which == 13) return false;"
For example:
<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
an idea:
<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
<input id="pwset" type="text" size="20" name='pwuser'><br><br>
<button type="button" onclick="CheckPassword()">Next</button>
</form>
and
<script type="text/javascript">
$("#pwset").focus();
function CheckPassword()
{
inputtxt = $("#pwset").val();
//and now your code
$("#div1").load("next.php #div2");
return false;
}
</script>
When you press enter in a form the natural behaviour of form is to being submited, to stop this behaviour which is not natural, you have to prevent it from submiting( default behaviour), with jquery:
$("#yourFormId").on("submit",function(event){event.preventDefault()})
Two way to solve :
form's action value is "javascript:void(0);".
add keypress event listener for the form to prevent submitting.
The first response is the best solution:
Add an onsubmit handler to the form (either via plain js or jquery
$().submit(fn)), and return false unless your specific conditions are
met.
More specific with jquery:
$('#your-form-id').submit(function(){return false;});
Unless you don't want the form to submit, ever - in which case, why
not just leave out the 'action' attribute on the form element?
Writing Chrome extensions is an example of where you might have a form for user input, but you don't want it to submit. If you use action="javascript:void(0);", the code will probably work but you will end up with this problem where you get an error about running inline Javascript.
If you leave out the action completely, the form will reload which is also undesired in some cases when writing a Chrome extension. Or if you had a webpage with some sort of an embedded calculator, where the user would provide some input and click "Calculate" or something like that.
Try preventDefault() method inside event listener for submit in this form