I'm trying to use a form validator from ink.sapo.pt http://ink.sapo.pt/index.php/js/ui#formvalidator
I want to intercept the submit event to write my own code but the following event is always called:
$("#myform").submit(function() {
alert('Handler for .submit() called.');
});
even if the onsubmit attribute is false.
Basically I want ink.sapo.pt to validate my form but I want to use my own code every time the form is validated.
Pure java-script
<form id="myform" class="ink-form block" method="post" action="#"
onsubmit="submitForm(this);">
function submitForm(formObj)
{
if(SAPO.Ink.FormValidator.validate(formObj))
{
//Button Action
}
}
Try this:
$("#myform").submit(function(ev) {
ev.preventDefault();
alert('Handler for .submit() called.');
});
Basically, what the added line is doing is, as you can guess, avoiding the default behavior on the specified event.
Related
I have the following form on a page:
<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
</form>
I am trying to use the following jquery snippet to submit the form. The jquery code resides outside of the form and the form is the only form on the page.
$("#SelectedMonth").change(function () {
alert(this.value);
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
});
The first alert is triggered and shows the selected value but the submit is never triggered.
It seems like this is pretty straight forward but it is not working. What am I missing?
TIA
change action and make it blank
and change function like this
$("#SelectedMonth").change(function () {
$('form').submit();
});
and it will work
That's because, while you can change the selected element in the drop down (thus causing the first alert() to fire), you have no mechanism for submitting the form, so the second one doesn't.
You need to add a submit button so that the submit event of the form can be triggered.
Also, the way you have the code, the submit event handler won't actually fire unless you change your selection in the drop down first. You probably don't want that behavior. The two event handlers should be set up independent of each other.
$("#SelectedMonth").change(function () {
alert(this.value);
});
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
<button type="submit">Submit</button>
</form>
you are putting the submit event inside change event try and also add a submit button to submit the event
$("#SelectedMonth").change(function () {
alert(this.value);
});
$('form').submit(function (event) {
event.preventDefault();
alert("Submitted");
});
if you want to submit on date chaneg then try this
$("#SelectedMonth").change(function () {
$('form').trigger('submit');
});
$('form').submit(function (event) {
event.preventDefault();
alert("Submitted");
});
The answer to the question "why it does not work" is that .submit(function(){}) not actually submits form but add submit handler - function that will be executed when form will be submitted
This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.
Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
So if you pass function to it, it will BIND handler. When you will trigger it without params, it will actually submits form.
You dont need button to submit form.
So actually code must be something like this
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
$("#SelectedMonth").change(function () {
$('form').submit();
});
Lets say I have this form
<form onsubmit="submitData();">
<input type="text" pattern="^[A-z]+$" required>
<button type="submit">OK</button>
</form>
Upon clicking the submit button, I don't want the form to post any data in the address bar or navigate anywhere, I just want it to run the submitData function and thats it. The reason I want to use the form is because of its validating functionality (it wont let you submit if the input text is missing or doesn't match the pattern).
If I switch the value of onsubmit on the form to "return false;" then it won't navigate but "submitData(); return false;" doesn't work. Any other ideas?
Try adding e.preventDefault(); at the beginning of your code, with the event being passed to your function submitData(e) {, like this:
function submitData(e) {
e.preventDefault();
...
}
See: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
Just add event.preventDefault that is automatically pass by the form to the function:
function submitData(event){
event.preventDefault();
//your code will be here
}
read more : https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
Use event.preventDefault().
Learn more: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
add this to your code:
document.getElementById("addYourTagHERE").addEventListener("onsubmit", function(event){
event.preventDefault()
});
or this in your function:
function submitData(event) {
event.preventDefault();
}
You'd want to cancel the default action of the submit event handler, so:
function submitData() {
// whatever logic you have...
return false;
}
I believe this works too:
function submitData( e ) {
e.preventDefault();
// whatever logic you have...
}
I have multiple forms on the same page with the class form_delete.
How do I iterate over those forms in jQuery adding a submit event that will uniquely apply to each form?
I've tried this using $('.form_delete').each(...); but when I add $(this).submit(...) events it's not working (event does not register).
Forms:
<form class="form_delete">
</form>
<form class="form_delete">
</form>
<form class="form_delete">keep adding n forms to infinity ;)
jQuery:
$('.form_delete').each(function() {
$(this).submit( function(event) {
// Nothing gets registered here
});
}
$('.form_delete').each(function() {
$(this).on("submit", function(e) { // submit button pressed
// prevent form from doing what it normally does when submit button is pressed
e.preventDefault();
// do anything else that you want to do when the submit button is pressed
alert( "Hi");
});
});
jQuery's event delegation is also an option.
$('body').on('submit', '.form_delete', function submitCB(e) {
e.preventDefault();
});
When the event bubbles up to the body then jQuery will check the target element against the string selector (parm 2), and only call the callback (parm3) if it matches.
This way you only have on event listener on the page, as opposed to many.
I don't know why you use .each(); anyway if all forms with same class just use
$('.form_delete').on('submit',function(e){
e.preventDefault();
alert($(this).index());
return false;
});
in that case you will need something like data-selectForm to define which form you submited
<form class="form_delete" data-selectForm="firstform">
</form>
<form class="form_delete" data-selectForm="secondform">
</form>
and then use
$('.form_delete').on('submit',function(e){
e.preventDefault();
alert($(this).data('selectForm'));
return false;
});
In my HTML I've got a form without an onsubmit event listener:
<form action="contact.php" method="post" id="contact">
...
<input type="submit" value="Send" />
</form>
As a result, the form is always posted whenever I click the "Send" button. However, I'd like to validate the input first, so I'd like to attach an event listener and intercept the post. This is how I attach the event listener to the form:
window.onload = function() {
function validate() {
return window.confirm("Confirm");
}
var form = document.getElementById("contact");
form.addEventListener("submit", validate);
}
While the event listener is being executed, if I go by above approach the form is always posted! However, if I make the validate() function global and use onsubmit="return validate();" in the <form> tag, then the form is only being submitted conditionally, as expected.
Why does this not work by adding the validate() function as above? It seems the false return value gets lost?
Modern event handling has a more complex API, it gives more flexibility but that comes at the cost of not being able to tie behaviour to a simple boolean result.
For your use case, you need to capture the event object:
function validate(ev) {
Then you can prevent the default action on it:
if (!confirm('Confirm')) {
ev.preventDefault();
}
I have function that submitted two forms at once. And last (the second) post method does not take effect without alert().
Could you please show me my mistake.
function formFunction() {
...
$.post($("#form1").attr("action"), $("#form1").serialize() );
$.post($("#form2").attr("action"), $("#form2").serialize() );
//alert('done');
}
UPD
this is how function is calling
<form id="form0" name="form0" onsubmit="formFunction()">
<input id="mainFormValue" type="text">
The reason why it is failing is you are not cancelling the original form submission. That means the page is posting back to the server when you click the button. What you need to do is prevent that origial form submission from completing.
If you are adding the event handler with jQuery, you can use preventDefault() to cancel the form submission.
function formFunction(e) {
e.preventDefault();
$.post($("#form1").attr("action"), $("#form1").serialize() );
$.post($("#form2").attr("action"), $("#form2").serialize() );
}
Change the form submission to unobtrusive JavaScript to get the correct event object set by jQuery.
$("#form0").submit(formFunction);
The other solutions is add a return false to the submisison. Just ignore the preventDefault line I suggested above. [bad idea, but will work]
<form id="form0" name="form0" onsubmit="formFunction(); return false">