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.
Related
My question is about react, onSubmit and preventDefault.
I've got a form, which handles between 2 - 4 steps of user input depending on certain cases.
<Form>
{StepRendersHere}
</Form>
The form has a onSubmit event that prevents default (and stopPropagation).
When using the button for "next step" the event fires, and the form is NOT submitted.
But when using the enter key, the event is fired, but the form is posted. This results in the site refreshing with the form data as url parameters.
The weird thing is that if none of the buttons in the form has type="submit". The onSubmit doesn't even fire on enter key.
isDefaultPrevented returns true in both cases.
Any hints/thoughts on how I can prevent the form from posting when pressing enter? My issue is with Enter key posting the form, despite preventDefault.
Have tried binding the enter key to a event that prevents default, doesn't work. Might have done it the wrong way though.
UPDATE (implementation)
<Form onSubmit={this.inc_step} id="applicationform">
{FormStepRenderedHere}
</Form>
inc_step = e => {
e.preventDefault();
e.stopPropagation();
alert( e.isDefaultPrevented() )
let new_step = this.state.current_step + 1;
alert('INSIDE INC STEP');
if (this.validateForm()) {
this.setState({
current_step: new_step
})
}
}
UPDATE (FIXED IT)
I found a solution, and want to share if anyone else has the same problem.
My solution however might be unique to semantic ui, which i'm using. I solved it by putting as={Form.Group} on the form, mening it wont render as a form, with its standard events, such as enter key submit. Now the enter key does nothing, as I wanted it.
Thank you for the comments!
A much easier way to accomplish this is to add a button element to your form and add the display none css attribute (if you don't want to see the button).
The button automatically adds the ability to use the enter key with onSubmit.
I found a solution, and want to share if anyone else has the same problem.
My solution however might be unique to semantic ui, which i'm using. I solved it by putting as={Form.Group} on the form, mening it wont render as a form, with its standard events, such as enter key submit. Now the enter key does nothing, as I wanted it.
So actually not rendering the form as a form to begin with was the solution.
I want to submit a form using ajax. So I am not using the type=submit. I am using a onClick event on a link(<a>) to send the form data using ajax. I also want to take advantage of HTML5 form validation capabilities.
So before sending the data, I used the function .checkValidity to check the validity of the form.
If it returns true then I send the data. But when it return false I want to show user that the form is invalid using HTML5 default notifying scheme. But I don't know how to trigger that.
Is there is any way to show the validation of the form programmatically.
One way to do is trigger the submit event if checkValidity return false. But this will refresh the page. I don't want to change the state of the page.
checkValidity only checks validity and inform the program. It doesn't inform the user interactively.
We have exactly the same problem and we tried very different things and a lot of them were hacks like pseudo submits and event.preventDefault() approaches. All in all i must say that HTML5 validation is nice in general but really bad in practice because its not possible to display backend validation errors the same way as frontend validation errors.
And only god knows why the HTML5 folks didnt thought about a simple API where we can trigger the validation like this element.triggerValidationMessage('my message');
You can do it if you let your form have a submit button and return false!
And you cán do it in the same event handler as the non-submits!
So, first test if you are part of a form and if so, make it check Validity and never return true (even if valid)!
$('.ajx')
.on("submit click", function(e) {
var $this = $(this)
//Force native form validating and notification
form = $this.closest('form')[0]
if (form) {
//Follow through with form submit (element must be of submit type!)
if(!form.checkValidity()) {
//don't ask me!
sleep(3000);
return false
}
}
//only preventDEfault AFTER possible form element click
e.preventDefault()
//...your project further ajax code
//Makes sure your form never submits
if (e.type=='submit') return false
}
Small downside: You have to do this on the submit button, but it's always possible to change your <a> into type=submit. You don't have to change the non form <a>'s though!
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.
We have a couple of textboxes in a form. All of which are validated onblur. The form is submitted onclick of an anchor tag.
<script>
function validateMyText(){
// do field validation
// if success
return true;
// else {
alert("Please check the text box value");
return false;
}
}
</script>
<form name="myform" action="mytestpage.jsp">
<input type="text" name="myText" id="myText" onblur="return validateMyText()"/>
Submit
</form>
Windows platform browsers (Firefox, Safari, Chrome, IE): When validateMyText() returns false, onclick is not triggered. This is the expected and existing behaviour.
Mac platform browsers (Firefox, Safari): Even after validateMyText() returns false, onclick event is triggered, which submits the form.
Background: This is a legacy application that was supported only on Windows platform and IE browser. Now it has to be enhanced to work on all the browsers (Firefox, Safari, Chrome, IE) on Windows and Firefox, Safari on Mac.
If I read this correctly, it looks like the app is relying on the false returned after the blur event of any field with "invalid" data to interrupt the form submission. Baked in, then, is the assumption that any other field that is not focused is valid, you cannot leave a text field without making it valid, and that the only way you'd ever be clicking the anchor tag is while leaving a previously selected text field. A lot of assumptions. The kindest thing to say is that it's brittle -- and what about users hitting Enter?
At minimum, I would create a new function to handle form submission. I don't know what's going on in that anchor tag right now. For clarity, add an ID to your form tag. Then:
<a href="#" onclick="document.getElementById('myform').submit(); return false;">
Now the default click will be suppressed, and you'll run the "natural" submit behavior of the form. Since we want validation before submission, let's add an onsubmit event handler at the form level:
<form name="myform" id="myform" action="mytestpage.jsp" onsubmit="return submitForm();">
Now we'll run through a form-level validation, and return true for submission, false for none. Add something like this to your JavaScript:
function submitForm() {
// identify fields eligible for validation
// validate them according to your rules
// then submit the form
if( all_your_fields_are_valid ) { // for you to figure out
return true;
} else {
// dialog explaining problem?
// highlight bad fields?
return false;
}
}
You'll still have your field-by-field warnings of invalid data, but now at least you're trapping the form submission explicitly, and looking at the form as an entity with its own overall valid and invalid states. A setup like this should work fine in any reasonably modern browser on any platform.
All that being said, I'd highly recommend adding one of the great JS frameworks. They'll make things much easier, especially if you're looking to clean up and graft behaviors onto lots of existing code.
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!