I have written code like this to prevent form submit. But it is not working. What is the possible reason
$('#signUpForm').submit(function (event) {
debugger;
console.log('test');
event.preventDefault();
$('#signUpForm').unbind().submit();
//IsValid();
return false;
})
Try this solution:
$(document).ready(function() {
$("#signUpForm").on("submit",function(e){
e.preventDefault(e);
console.log("form submission canceled");
});
});
Supposing you have only 1 form in your html page
$(document).ready(function() {
$("form").submit(function(e){
e.preventDefault(e);
console.log("form submission canceled");
});
});
According to the jQuery documentation your syntax seems to be wrong.
Also, .unbind() is deprecated. Prefer .off()
try
$('#signUpForm').unbind('submit')
Related
I have some code where I'm trying to prevent a form from being submitted multiple times. I found this code on another Stack thread but it doesn't work. Instead it submits the form infinite times and lags the entire server!
$(document).ready(function() {
$('form').submit(function() {
console.log("hi")
if ($(this).valid()) {
$(this).submit(function(){
return false;
});
return true; //Tried with an without
}
});
});
Here is a picture of the output in the console:
This keep submitting the form. I just took a picture at that number.
The thread that I found the code above from is the accepted answer on this question and it has many upvotes.
Note that I have multiple forms per page, and many pages with many forms! A solution to one specific form is not sufficient. I need a global solution. Also I'm using Codeigniter.
Try passing in the event and using e.preventDefault()
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
console.log("hi")
if ($(this).valid()) {
$(this).submit(function(){
return false;
});
}
});
});
Correct me if I'm wrong but, shouldn't you just return; if it's valid, else stop submission like in the jQuery documentation's example.
$(document).ready(function() {
$('form').submit(function(event) {
console.log("hi")
if ($(this).valid()) {
return;
}
event.preventDefault();
});
});
You need to cancel the initial form submission so that you only do it after you've validated it. But frankly, HTML5 won't submit if a form is not valid, so your code seems redundant.
Here is a working example that takes most of the JQuery out of the mix. It only submits the form one time.
You can also test it here: https://jsfiddle.net/5oyp6aa0/6/
$(function() {
var theForm = document.querySelector("form");
theForm.addEventListener("submit",function(evt) {
// First, cancel the form's submission:
evt.preventDefault();
evt.stopPropagation();
console.log("Navitve Submit Cancelled")
if (theForm.checkValidity()) {
// Then, only if it's valid, submit
console.log("Manual Submit Triggered");
theForm.submit();
}
});
});
After none of these answers worked I decided to give it another shot. This works for me.
$(document).ready(function() {
$("form").submit(function (e) {
var attr = $(this).attr('submitted');
if (typeof attr === typeof undefined || attr === false) {
if ($(this).valid()) {
$(this).attr('submitted', 'submitted');
$(this).submit();
} else {
e.preventDefault();
}
} else {
e.preventDefault();
}
});
});
I'm using jQuery 1.9.1 in my project.
I've following HTML :
<button type="button" id="btn_add" class="btn btn-primary">Add</button>
<a class="btn_delete" href="#"><i class="icon-trash"></i></a>
I want to display the same alert message if user clicks on a icon enclosed in anchor tag with class "btn_delete" or click on a button having id "btn_add".
For this I tried following code but it didn't work out for me.
$(document).ready(function() {
$("button#btn_add.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Can someone please help me in this regard please?
If you want any more information regarding the issue I'm facing please let me know.
Thanks in advance.
**Approach #1**
function doSomething(){
//your code
}
$('#btn_add').click(doSomething);
$('.btn_delete').click(doSomething);
**Approach #2**
$("#btn_add,a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
</script>
Your code is quite close to what it should be. Change:
$("button#btn_add.btn_delete")
To:
$("#btn_add,a.btn_delete")
You can use , to have multiple selectors.
$(".btn_delete i,#btn_add").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
You can have both the HTML Tag in the jQuery selector as below:
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Hope this helps!
$(document).ready(function() {
$("#btn_add,.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Additionally to the other answers:
Your current selector will find elements like this:
<button id="btn_add" class="btn_delete">Foo</button>
There is a form and a button.
submit
<script>
function myFunc()
{
//some actions here
var myForm = document.getElementById(formId);
myForm.submit();
}
</script>
Now I want to bind another function to submit event of the form without modifying the first part:
<script>
$('formSelector').on('submit', function(){
alert(123);
});
</script>
The above function is not executed. The form is submitted by myFunc()
Is there a way to alert(123) before form submit?
UPD: myFunc(). sorry, my mistake
Perhaps you could try listening on the "onclick" event of the a element. However, it itsn't a good practice to use the href attr to call for arbitrary functions.
<a id="forsubmitter" href="#">submit</a>
<script>
jQuery(document).on('click','#formsubmitter',function() {
if (myFunc()) {
alert('conditions met, submitting');
$('formSelector').submit();
} else {
alert('conditions not met, but submitting anyway!');
$('formSelector').submit();
}
});
function myFunc() {
if (some conditions are met) {
return true;
} else {
return false;
}
}
</script>
The best practice in this cases, is to rise custom event, something like that
function myFunc()
{
//some actions here
$('formSelector').submit().trigger('customSubmitEvent');
}
then listening to the same event:
<script>
$('formSelector').on('customSubmitEvent', function(){
alert(123);
});
</script>
It is possible, that you are assigning submit handler before the DOM is ready and selector does not match any form. Try wrapping event handler with DOM ready function:
$(function() {
$('formSelector').on('submit', function(){
alert(123);
});
});
For some reason the postback event keeps firing for my button. If I place a break point on the function(e) part with Firebug, the code just skips right over the function.
Return false does not work either.
<script>
$(document).ready
(
$('#<%:FilterButton.ClientID %>').click
(
function (e)
{
e.preventDefault();
$('#Filter').toggle();
}
)
);
</script>
Edit:
Kundan and others have pointed out that I skipped passing in an anonymous function for the document.ready() event. Careless on my part.
Try this
<script>
$(document).ready(function() {
$('#<%= FilterButton.ClientID %>').click(function (e){
e.preventDefault();
$('#Filter').toggle();
return false;
});
});
</script>
I think you have a few issues with your code, unless it was just a bad copy/paste job. Should be:
$(document).ready(function(){
$('#<%=FilterButton.ClientID %>').click(function(e){
e.preventDefault();
$('#Filter').toggle();
});
});
Change
$('#<%:FilterButton.ClientID %>').click
to
$('#<%=FilterButton.ClientID %>').click
I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the apropriate JavaScript takes place without reloading the page. The problem is that the page keeps reloading. Here is my latest attempt:
$("searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
$("#buttonSrch").click();
return false;
}
});
<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />
Don't bind to the inputs; bind to the form. Assuming the form has an ID of searchForm:
$("#searchForm").submit(function() {
search($("#searchText").get(0));
return false;
});
Try it out.
It can also be done with plain JavaScript:
document.getElementById('searchForm').addEventListener('submit', function(e) {
search(document.getElementById('searchText'));
e.preventDefault();
}, false);
I know its a little late but I ran into the same problem as you. It worked for me using "keypress" instead of bind.
$('#searchText').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
//do something
}
});
You are missing # in the selector. Try this
<input type='text' id='searchText' />
JS
$("#searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
//$("#buttonSrch").click();
search(this.value);
}
});
Add onSubmit="return false;" on your form tag
<form onSubmit="return false;">
/* form elements here */
</form>`
$('#seachForm').submit(function(e){
e.preventDefault();
//do something
});
You could set the form action attribute to javascript:void(0); that way the form doesn't post/get so the page wont refresh.
$(document).ready(function () {
$('#form1').attr('action', 'javascript:void(0);');
});
Just use the "action" attribute in <form> tag.
Like this
<form action="#"> // your content </form>
$("searchText").keypress(function(event){
if(event.keyCode == 13){
$("#buttonSrch").click();
return false;
}
});
Does your JS execute immediately or on document ready? If it's not in a document ready the button won't exist at the time you're trying to call bind.
This is what ended up working for me. Please note that my struggle was to find the object that triggered the form submit:
$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);
});
You just need to add this:
<form #submit.prevent="search">
whatever function is triggered for search. When I press that search button search() func is triggered. That is why: #submit.prevent="search"
async search() {
let yuyu = document.getElementById('search').value
console.log('lsd', yuyu)
try {
let newRecipes = await this.$axios.$get(
`/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
)
this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
} catch (e) {
console.log(e)
}
},