I have this simple code here, nothing too advanced.
$("input#send").submit(function(event){
event.preventDefault();
$.ajax({
type: 'POST',
url: add.php,
data: data,
success: success,
dataType: dataType
});
});
Whever I click on the "send" button, the event.preventDefault function doesn't work, and the page loads.
Any ideas why?
A form has the submit event, not a button. Plus, an ID should be unique so tag#id can just be #id.
$("#theform").submit(function(event) {
event.preventDefault();
// ...
});
You need to bind to the form's submit event or to the button's click event and call event.preventDefault() if you want to stop the form from submitting:
$('form').bind('submit', function (event) {
event.preventDefault();
});
$('form').find(':submit').bind('click', function (event) {
event.preventDefault();
});
I believe the submit event is for the form element. For an input[type='button'] you might want to use the click event.
Add quotes around 'add.php'
Change the selector in the first line to the id attribute of the form which contains input#send.
The advantage of handling the submit() handler on the form rather than the click handler on the input is that some forms can be submitted by pressing the enter key (when the user is focused on one of the form fields). If you don't have an id attribute, add one or use a different jQuery selector to target the form tag.
$("#myform").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'add.php',
data: data,
success: success,
dataType: dataType
});
return false;
});
Try using return false instead
$("input#send").submit(function(event) {
$.ajax({
type: 'POST',
url: add.php,
data: data,
success: success,
dataType: dataType
});
return false;
});
If you're using preventDefault I assume that means you do NOT want the default submit action. I would just use a different event instead of using .submit. To me, it's not the submit action that you want to intercept, but rather the click that would normally cause the submit.
$('#inputSend').on('click', function(event) {
event.preventDefault();
//the rest
});
If both return false and event.stopPropagation() don't work, try the following method. Using .on() will make the submit function accessible. Once you change the .submit() to .on("submit"..), you can either use return false or e.stopPropagation().
$(document).on("submit", "input#send", function(event) {
event.stopPropagation();
$.ajax({
type: 'POST',
url: add.php,
data: data,
success: success,
dataType: dataType
});
return false; });
Related
Consider the following code:
$('.saveCheck').on('click',function()
{
var frm = $(this).parents('form');
frm.submit(function (ev)
{
$.ajax
({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data)
{alert("hooray!");}
});
ev.preventDefault();
});
});
This will not submit my form, however:
frm.submit();
On its own works fine, but wont have any of the AJAX goodness.
Is there any glaringly obvious reason for this?
You code is set up so that when saveCheck is clicked it will bind a submit handler so that when the form is later submitted, it will call the Ajax function.
It sounds like what you want to do is to just run the Ajax function when saveCheck is clicked. Get rid of your submit handler binding entirely.
$('.saveCheck').on('click', function(ev) {
var frm = $(this).parents('form');
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function(data) {
alert("hooray!");
}
});
ev.preventDefault();
});
That said, you should probably be using a submit handler on the form instead of a click handler on a button.
i'm developing a jquery mobile app. In the app there is a form which the user has to submit and i've placed the submit button in the right side in the header. when the user is done with filling of the form and taps on the submit button with a class of "ui-btn-right", it fails to submit.
$(document).ready(function(){
$('.ui-btn-right').on('click', function(event) {
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
});
HTML
<a href='#' class='ui-btn-right' id="button" >Register</a>
Just taking a guess here, as we can't see your markup. But it looks like you're not actually submitting the form when you click the button, you're just wiring up the submit event. Try this?
$(document).ready(function(){
$('.ui-btn-right').on('click', function(event) {
$('#form1').submit();
});
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
Try this?
$(document).ready(function(){
$("#form1").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "register.php",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
$('.ui-btn-right').on('click', function(event) {
$("#form1").submit(event);
});
});
If your button is not in the form and you want to fired the submit event you have to do something like:
$('.ui-btn-right').on('click', function(event) {
$("#form1").submit(function(event){
event.preventDefault();
stuff();
});
});
Probably I need more data to give answer,but we can go this way.
$('.ui-btn-right').on('click', function(event) {
check here any alert/console message is working
}
now you have create $("#form1").on('submit
but to submit it you need to do
$("#form1").submit();
manually as I assume this button is outside of your form.
I did a script and he are submitting forms twice. Someone can help?
PS: I need that any element can send forms
$('*').bind('click', function(event) {
if ($(this).attr('href') && $(this).attr('href') != '#') {
.....
} else if ($(this).attr('form-name')) {
$(this).attr('disabled', true);
var FormId = '#' + $(this).attr('form-name');
var Target = $(this).attr('action-url');
$.ajax({
type: 'POST',
dataType: 'html',
url: Target,
data: $(FormId).serialize(),
success: function(response) {
eval(response);
}
}).always(function() {
$(this).attr('disabled', false);
});
}
}
You are submitting your form once via the $.ajax call, and once via the <button>'s default behaviour. Add:
event.preventDefault();
to the end of your click handler.
Also, if you want a click handler on every element on your page, I'd highly recommend looking into event delegation.
i have nested records of a table that i insert to a different table of a database with ajax, when i click on a particular button the value changes to data sent and so forth for the descending buttons. i perform this with two scripts that works perfectly, one insert data without refreshing and the other disables the particular button on click and changes the value to data sent. Now i want to put it all together so it becomes one.
Insertion
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function() {
Disable button
$(function(){
$(".btn-style").click(function(){
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
$(function(){}); is just a shortcut for $(document).ready(function(){});
Just place both pieces of code inside a single DOM ready handler. e.g.
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {});
});
$(".btn-style").click(function () {
$(this).val('data sent');
$(this).attr('disabled', true);
});
});
Assuming ".btn-style" matches your submit button you can simplify this to:
$(function () {
$("form").on('submit', function (event) {
event.preventDefault();
// Disable submit button on this specific form
$('.btn-style', this).val('data sent').prop('disabled', true);
data = $(this).serialize();
$.ajax({
type: "POST",
url: "calls/insert_fryd.asp",
data: data
}).success(function () {
});
});
});
The subsequent issue found (not working in Chrome) is down to using disabled via attr. For genuine properties (like checked and disabled) always use prop instead of attr.
I have this link:
$('.popup-window').click(function (e) {
e.preventDefault();
$.ajax({
...
})
});
which is a .NET LinkButton (a link that call a javascript, not a real href). I want to prevent Default if ajax return some (let say, false). Else, if true, continue with that link handler.
How can I do it?
P.S. I need that e.preventDefault(); at the beginning, else .NET handler will act immediatly.
You can use the __doPostBack() js function to trigger the postback in your AJAX callback.
The only thing is that you need to pass in the id of the control causing the postback, e.g.
__doPostBack('btnPopup', null);
you can see more on this function in this question: How to use __doPostBack()
I think I understand what you're looking for.
Here's my idea on it: use a data attribute on the DOM element to decide weither default event should be prevented or not. Initially, the event is prevented but the ajax has the power to "unlock?" it, then fire it again. It's a little bit of custom work but it may do the trick:
var $popupWindow=$('popup-window');
// initially "tell" the LinkButton to prevent default
$popupWindow.data('prevent-default', 1);
// the click event (initially prevents default)
$popupWindow.click(function(e){
var $this=$(this);
if ($this.data('prevent-default')==0) { // if "unlocked"
// "lock" it again (default isn't prevented)
$this.data('prevent-default', 1);
} else { // if "locked"
// default is prevented
e.preventDefault();
// test if it should be unlocked
$.ajax({
// ...
}).done(function(data){
if (data.length>0 && data.response==false) {
// set the attribute so it shouldn't prevent default
$this.data('prevent-default', 0);
// trigger this click (should let the event fire completely)
$this.trigger('click');
}
});
}
});
UPDATE:
An alternative could be to add a Page Method.
(See: Using jQuery to directly call ASP.NET AJAX page methods)
This would reduce the mechanics to somethink like this:
$('popup-window').click(function(e){
e.preventDefault();
$.ajax({
// ...
}).done(function(data){
if (data.length>0 && data.response==false) {
$.ajax({
type: "POST",
url: "YourPage.aspx/YourMethod",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
}
});
});
$('.popup-window').click(function (e) {
data = '?sample=1' //serialized data here
callback = function(json){
if(json.returnVar!=true){ //check if returnVar is not true
e.preventDefault(); //prevent redirect if not true
}
};
$.ajax({
type: 'POST',
url: "../ajaxcall.php", //the url to call for ajax here
data: data,
success: callback,
dataType: 'json'
});
});
Try this, let me know if you can't understand the code