I am working on a school website, where you can make an assignment. I have a submit button, which is the one that should redirect. I also have some other buttons within this form which are not submit buttons. The problem is, When i click those buttons that i don't want to redirect, it still redirects. What i thought i should do is:
form.addEventListener("submit", (e) =>{
e.preventDefault();
}
But have realised that that would stop me from submitting at all.
I am not sure what to do.
I have tried event.preventDefault for each button, but that doesn seem to work either.
How do i fix this please help I need answers pronto!
The HTML buttons can be of three types:
button The button is a clickable button
submit The button is a submit button (submits form-data)
reset The button is a reset button (resets the form-data to its initial values)
You might want to try setting the type of the button to clickable and have just the one submit button.
Hopefully that helps you.
Reference:
https://www.w3schools.com/tags/att_button_type.asp
You can set the button type to 'button' instead of 'submit', but if you insist on using submit you can also use this function to prevent the page from reloading after submitting the form.
<form onsubmit="handleSubmit()">
Type Something: <input type="text" name="example">
<input type="submit" value="Submit">
</form>
<script>
function handleSubmit(e) {
e.preventDefault();
}
</script>
Related
Imagine this :
<form id="form">
<input type="text">
<button type="submit" name="submit1" value="1">something1</button>
<button type="submit" name="submit2" value="2">something2</button>
<button type="submit" name="submit3" value="3">something3</button>
</form>
First of all when I write $('#form').submit() which submit value will be sent? the first one?
Second of all How can I submit the form without the click trigger event with the value I want? Is it possible at all? For example submitting the form with the 2 submit value.
The reason I want do this is to have confirmation popup with sweetalert before sending my form so here it is :
$('form').on('submit',function(e){
form = $(this);
e.preventDefault();
swal({'some dialog'},function(isConfirm)
{
if(isConfirm)
form.submit;
\\If I use the click trigger I will get stuck in here again.
})
});
There is an alternative - use the FormData You can create an instance of a FormData, add your html form, modify entries, and send it. Everything is under your control here then.
EDIT: Based on your edit, it seems you have the problem of resubmitting the form. You can handle it like this.
var form = document.querySelector('form');
form.addEventListener('submit', {
confirmed: false,
handleEvent: function (event) {
if (this.confirmed)
return;
event.preventDefault();
doconfirm((confirmed) => {
if (confirmed) {
this.confirmed = true;
form.submit();
}
})
}
}, false);
Or you can solve your problem by unbinding the submit handlers after validation and submit it again: $('form').off('submit').submit()
As #Scott Marcus explained, the value of named buttons will be submitted when the form is sent to the server. However in your case, this won't help because you want to perform some logic before submitting it to the server.
The issue is that jQuery has no way to determine which button was clicked because it doesn't provide the submit button values when you look at the form data via $.serialize(), and there is no easy cross-browser friendly way to check the button that triggered the $.submit() event without using click.
So, the only workaround would be to handle the click event of the 3 buttons and store some value that is checked before you submit the form as described in this answer: How can I get the button that caused the submit from the form submit event?
Example: http://codeply.com/go/Wj85swRyfX
Let's take your questions one at a time...
First of all when I write $('#form').submit() which submit value will
be sent? the first one?
When a form is submitted, ALL form elements that nave a NAME attribute will submit their value (even if the value is an empty string) to the form's ACTION destination. So, in your case, all 3 of your buttons have a name attribute and so all 3 buttons will submit their name/value pairs.
Usually, we don't put a name attribute on the submit button because we only want it to trigger the submit, not actually use it as a data container. And, we usually include only a single submit button under most circumstances.
Second of all How can I submit the form without the click trigger
event with the value I want? Is it possible at all? For example
submitting the form with the 2 submit value
You would use:
$('#form').submit()
to manually cause the submit, but you'd need to have an if() statement that has logic that determines which value is appropriate to submit. Instead of the value being stored in a button, you could use a hidden form field, like this:
<form id="form">
<input type="text">
<input type="hidden" name="hidden" value="">
<button type="submit">something3</button>
</form>
JavaScript:
$("#form").on("submit", function(evt){
// Stop the form submission process
evt.preventDefault();
// Logic that sets hidden input field to correct value:
if(condition1){
$("input[type=hidden]").attr("value", "1");
} else if(condition2) {
$("input[type=hidden]").attr("value","2");
} else {
$("input[type=hidden]").attr("value","3");
}
// Manually submit the form
$("#form").submit();
});
I suggest to use hidden input tag to make the logic clear.
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 have a form that is validated by a PHP script after it is submitted. When the user clicks submit, the button text is changed to disabled What I need though is to enable it if they use the back button. I don't want to refresh the page though! This is so they don't have to fill everything back in. What I have so far.
<script type="text/javascript">
$(window).bind("pageshow", function() {
document.form.submit1.innerHTML = "Submit Report";
});
</script>
HTML
<input id="submit1" type="submit" value="Submit Report" onclick="this.disabled=true;"/>
I'll submit a jQuery solution as it seems like you're already using this with $(window).bind().
I'd bind two events to your form element:
When the form is submitted, the submit button is disabled.
When any form element is changed (for instance when invalidated fields are updated by the user), the submit button is reenabled.
Would this work for you?
$('form').on({
change: function(){
$('#submit').prop('disabled',false);
},
submit: function(){
$('#submit').prop('disabled',true);
}
});
You can check out an example on JSFiddle.
I use this to invoke a function when a form on the page is submitted:
$$("form").invoke("observe", "submit", submitForm);
I'm having a problem getting this to work in IE when a text field has focus and the enter key is pressed. Firefox submits the form in this case but not IE.
The form has one submit button:
<input type="submit" value="Submit"/>
Clicking the submit button works fine in both browsers using this method.
I had the form inside of a <div style="display:none"> and for some reason just removing the display none did the trick. This was actually a JSP with other hidden forms using AJAX calls to control which form was displayed.
I should have posted more code than I did. Thanks to all who responded.
I think in Jquery what you might want is:
$(yourInputElem).keypress(function(e) {
if(e.keyCode === 13){
document.forms["yourFormHere"].submit();
}
}
This then should submit the form for that input elem in IE.
I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled I have more Nativities, it triggers the submit button and prematurely submits the form.
The form is in dev right now, but it can be found here.
The code I am using for the toggle button is:
<script type="text/javascript">
$(function() {
$("#schedule").accordion({ header: "h5", collapsible: true });
$("#more-nativities").hide();
$("#toggle").click(function() {
$("#more-nativities").slideToggle("slow");
});
});
</script>
The code for the submit button is pretty basic:
<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>
The code for the toggle button is:
<button id="toggle">I have more nativities</button>
Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?
Thanks!
Try adding a type, i.e.:
<button type="button" id="#toggle">Text</button>
http://www.w3schools.com/tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.
Esteban has one solution. A better one is described in the jQuery tutorial:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Try
return false;
after the slide toggle on the click function fro the toggle button.
From W3Schools:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
http://www.w3schools.com/tags/tag_button.asp
Be sure to specify type="button"