admin管理员组文章数量:1321059
I have a form on my page that I do not want to submit. Here is an example of what I'm trying to do basically. When I click a button, I want an ajax request to be sent but without submitting the form. This is an example format of the function which will run when my button is clicked:
function clicked()
{
try {
var url = "test.php?t1=1&t2=2"
var postData = $("#myForm").serializeArray();
$.ajax(
{
url : url,
beforeSend: function (request)
{
request.setRequestHeader('Content-Type', 'text/html; charset=utf-8');
},
type: "POST",
data : postData,
contentType: false,
processData: false,
success:function(data, status, xhr)
{
if(status == "success")
{
alert(data);
// Do something on page
}
else
{
// Do something on page
}
},
});
}
catch (e)
{
alert("Error Adding POI:\n" + e);
}
}
When I disable the form submit using the preventDefault function, the form is not submitted. However, the form simply sends an ajax post request to my url "test.php?t1=1&t2=2" without any of the input values of my form. Without preventDefault, the form submits and navigates away from the page. No ajax request is sent. Is there any way to send the form data to the url "test.php?t1=1&t2=2" with an ajax request without submitting the form?
Thanks in advance. Any help is greatly appreciated.
I have a form on my page that I do not want to submit. Here is an example of what I'm trying to do basically. When I click a button, I want an ajax request to be sent but without submitting the form. This is an example format of the function which will run when my button is clicked:
function clicked()
{
try {
var url = "test.php?t1=1&t2=2"
var postData = $("#myForm").serializeArray();
$.ajax(
{
url : url,
beforeSend: function (request)
{
request.setRequestHeader('Content-Type', 'text/html; charset=utf-8');
},
type: "POST",
data : postData,
contentType: false,
processData: false,
success:function(data, status, xhr)
{
if(status == "success")
{
alert(data);
// Do something on page
}
else
{
// Do something on page
}
},
});
}
catch (e)
{
alert("Error Adding POI:\n" + e);
}
}
When I disable the form submit using the preventDefault function, the form is not submitted. However, the form simply sends an ajax post request to my url "test.php?t1=1&t2=2" without any of the input values of my form. Without preventDefault, the form submits and navigates away from the page. No ajax request is sent. Is there any way to send the form data to the url "test.php?t1=1&t2=2" with an ajax request without submitting the form?
Thanks in advance. Any help is greatly appreciated.
Share Improve this question asked Jul 10, 2015 at 9:43 Sammy JaafarSammy Jaafar 5231 gold badge5 silver badges21 bronze badges 3- Serialize the input values in a Json string, and send it along the json request – Samy S.Rathore Commented Jul 10, 2015 at 9:46
- Instead of making a form (which you seem to not want to use), why don't you just create a div containing all your inputs with a button at the end. Then in JS, you link the button to an ajax request. – tektiv Commented Jul 10, 2015 at 9:48
- Thanks tektiv. That would work but is there any simple way to serialize the values of the inputs? Does the serialize method work on a div that has inputs in it? – Sammy Jaafar Commented Jul 10, 2015 at 9:54
2 Answers
Reset to default 3TRY:
$('input [type="submit"]').on('click',function(e){
e.preventDefault();
var url = "test.php?t1=1&t2=2"
var postData = $('this').serialize();
$.ajax(
{
url : url,
beforeSend: function (request)
{
request.setRequestHeader('Content-Type', 'text/html; charset=utf-8');
},
type: "POST",
data : postData,
success:function(data, status, xhr)
{
if(status == "success")
{
alert(data);
// Do something on page
}
else
{
// Do something on page
}
},
});
})
The below dirty hack may work when I dig out some details for you. Please also continue to use preventDefault
to prevent the form from submiting.
//Change
var url = "test.php?t1=1&t2=2"
var postData = $("#myForm").serializeArray();
//To
var url = "test.php"
var postData = "t1=1&t2=2&" + $("#myForm").serialize();
本文标签: javascriptHow to send form data using jquery ajax without submitting the formStack Overflow
版权声明:本文标题:javascript - How to send form data using jquery ajax without submitting the form? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742092667a2420361.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论