What I want to do is pretty simple.
I've a form, with a submit button
<form accept-charset="UTF-8" action="/some_url" id="some-form" method="post">
...
<button class="btn" id="remove-selected" type="submit">Send</button>`
</form>
I want to change the html of the button with jQuery when the form is submitted but can't achieve that, seems like the form submission occurs before I can change it.
My code right now, dead simple:
$("#some-form").on("submit", function(e) {
$("#remove-selected").html("Sending...");
});
Thanks for advises!
Your stuff seems working for me, just submit the form via JS to have more control about the sequence and error cases.
$("#some-form").on("click", function(e) {
e.preventDefault();
$("#remove-selected").html("Sending...");
$(this).submit();
});
http://jsfiddle.net/GDAhe/1/
$("#remove-selected").click(function(){
$(this).html("Sending...");
});
You code is correct, you may have forgotten to embed it inside a $(document).ready() method.
Related
i got currently an issue which i cant solve, i have a form which is submitted via Javascript, but i cant prevent it, could you help me. I provided smallest reproducible script.
Thanks in advance.
<form name="f" id="f" action="asd" method="post" enctype="multipart/form-data"></form>
<script>
document.getElementById('f').addEventListener("submit", function(evt) {
evt.preventDefault();
}, true);
window.addEventListener('load', () => {
document.getElementById('f').submit()
}, false )
</script>
I search the documentation of HTMLFormElement.submit and i found that submit event is not fired by using the form.submit. You must use form.requestSubmit See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit and https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
the issue is the code execution flow. It submit the form before the event listener is added.
To let time for you code to add event listener. I recommand you to execute your submit in the document.onready event.
Here is a quick example: https://jsfiddle.net/7453uvt6/7/
I'm trying to submit a form by clicking on a link. I disabled the redirection, but for some reason .submit() is not working...
Here is what I have tried:
Effect: redirection stops, no form submission, no error message, stuck on the form page:
$('.jsubmit').click( function(e) {
e.preventDefault();
$('form#fadmin').submit();
});
Effect: URL redirection, form not submitted, no error message
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
});
Effect: redirection stops, no form submission, no error message, stuck on form page:
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
return false;
});
The form:
<form action="" method="post" name="fadmin" class="inputform" id="fadmin">...</form>
And a bunch of other combination including trigger(), reversing the preventDefault() with unbind(). The only way I was able to submit the form was to trigger a click on the submit button but that is not really a solution in my case, because I need to use this on multiple pages and adding the button then hiding it is not something I would like to do on every page...
I have tried to run them in Firefox and IE with the same result.
Some other JS, jQ codes being used are: default bootstrap and respond provided by ZendFramework2 and ZFTables.
Any help would be much appreciated!
EDIT:
The form had the following submit button:
<input id="mysubmit" type="submit" value="Register" name="submit" />
After removing this my first example above worked perfectly.
Strange because there was no other forms or submit buttons on the page and nothing with the same name, id, type...
The issue is probably that you are trying to call submit() on a jQuery object, not the form DOM element.
Try this as your second line of code:
$('form#fadmin')[0].submit();
I prefer submitting form values with AJAX by hitting "Return" and all my setups, which I did before, are working, but today it stopped working. Here are the the steps, which I have been following for a quite a long time.
Include jQuery
Setup my form
Preventing it form submitting
$(document).ready(function(){
$(document).on('keyup', myFormSelector, function(event){
if ( event.keyCode === 13 ) {
event.preventDefault();
}
});
});
change the event to keydown and it will work.
try to disable the default behaviour from the submit event and add a SUBMIT-element (display:none).
If a form does have a submit-element, the return key does work like you want it.
Howto disable the submit event:
$('#myForm').submit(function(e) {
e.preventDefault(); // disabling default submit with reload.
// ajax code here
});
if this does not work, u may try this also:
<form id="myForm" onsubmit="return false"> ... </form>
Returning false does stop submitting too.
When using submit elements instead of keyup/keydown, you will be able to add multiple forms on your page with the desired behaviour.
I have a form that ends with
input type='submit'
That is used to submit the form and also trigger validation script.
Now I don't like this submit button. I want submit to be just an tag but with submit function to trigger validation normally.
Is there any way out of this problem ?
it's just like this:
Submit
or better:
Submit
<script type="text/javascript">
$(function(){
$('.submit').click(function(){
$(this).closest('form').submit();
});
});
</script>
note that this solutions requiore jQuery and will only work if javascript is enabled while the traditional submit-button works everytime.
I think something like this should work:
$('.anchor').click(function() {
$('#form').submit();
});
I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.
What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.
$(document).ready(function(){
$('#submit').click(function() {
$('#suzuki_scb').submit();
});
$('#suzuki_scb').validate({
submitHandler: function(form) {
form.submit();
}
});
});
Even this doesn't work and returns form.submit() is not a function.
I think this is what you're trying to accomplish
<script type="text/javascript>
$(document).ready( function(){
$('#suzuki_scb').validate({
// validation arguments go here
});
});
</script>
...
<form id="suzuki_scb">
<!-- Your form goes here -->
<button id="submit">
<img src="[image url goes here]" />
</button>
</form>
From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won't actually submit the form.
Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form
This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:
This method sets up event handlers for
submit, focus, keyup, blur and click
to trigger validation of the entire
form or individual elements.
Hope it helps.