I am trying to have my form validate before the ajax runs but can't seem to get the coding right for this to happen.
if i seperate them i can post using ajax with no validation or validation but it posts the default way
here is my current code i am trying
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
if (spry.widget.form.validate('#form') == true)
{
$.ajax({
type: "POST",
url: "localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
});
});
figured it out
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
Spry.Widget.Form.onSubmit = function(e, form)
{
if (Spry.Widget.Form.validate(form) == false) {
return false;
}
{
$.ajax({
type: "POST",
url: "localProxy2.php",
data: $('#consult').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
};
});
});
Related
I am using ajax for handling filters in my custom post type but getting a Bad request on both POST & GET methods don't know why. Here is my Ajax code,
(function($) {
$(document).ready(function(){
$(document).on('submit', '[data-js-form=filter]', function(e){
e.preventDefault();
var data = $(this).serialize();
console.log(data);
var ajaxscript = { ajax_url : '//localhost/experiencecamping/rv-sales/wp-admin/admin-ajax.php' }
$.ajax({
url: ajaxscript.ajax_url,
type: "POST",
data: data,
success: function(result) {
console.log(result);
},
error: function(result) {
console.warn(result);
},
});
});
});
})(jQuery);
add_action('wp_ajax_nopriv_filter', 'filter_ajax');
add_action('wp_ajax_filter', 'filter_ajax');
For this wp_ajax request to work we need to specify action = filter in the data array we send via POST
Also we need filter_ajax() function
Maybe you have it here but you haven't copy it to your question.
Try this version of the code
(function($) {
$(document).ready(function(){
$(document).on('submit', '[data-js-form=filter]', function(e){
e.preventDefault();
var data = $(this).serialize();
console.log(data);
var ajaxscript = { ajax_url : '//localhost/experiencecamping/rv-sales/wp-admin/admin-ajax.php' }
$.ajax({
url: ajaxscript.ajax_url,
type: "POST",
data: {
query: 'test',
action: 'filter'
},
success: function(result) {
console.log(result);
},
error: function(result) {
console.warn(result);
},
});
});
});
})(jQuery);
add_action('wp_ajax_nopriv_filter', 'filter_ajax');
add_action('wp_ajax_filter', 'filter_ajax');
function filter_ajax(){
echo 321;
wp_die();
}
Hello i want to redirect to an url with a parameter recived from ajax response. Here is my script:
<script>
$(function() {
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "engine/app/insert_user.php",
data: $(\'form#inregistrare\').serialize(),
success: function(data){
if (data == "succes") {
window.location=\'profil.php?user=data\';
}
else {
alert("You have something wrong in your form.");
}
},
error: function(){
alert("failure");
}
});
});
});
</script>
Nvm i managed to fix it myself
window.location=\'profil.php?user=\'+data;
I want to submit form throught ajax call in jquery mobile.
My script is that
<script>
function confirm(){
var user_name = $('#login_form').find('input[name="user_name"]').val();
$.ajax({
type: "POST",
url: $('#login_form').find('input[name="action"]').val(),
data: "val=" + user_name,
success: function(data){
alert(data);
}
});
}
</script>
My Form is here....
Name
Email
Password
Please it is urgent..........
function confirm(){
var frm = $('#login_form');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
error: function(xhr,err){
alert(err);
}
});
return false;
});
}
You can use this function to post your data...
You can try this function also...
$("#login_form").submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $("#login_form").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
error:function(xhr,err){
alert(err);
}
});
return false; // avoid to execute the actual submit of the form.
});
I want to display a loading message while retrieving results via AJAX, but I can't. Can anybody help please?
<script type="text/javascript">
$(function() {
$(".search_button").click(function() {
// getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = 'search='+ searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>
I would change the message before firing the AJAX request. So, on click or on submit:
<script>
$('form').on('submit', function(e) {
e.preventDefault();
$('#response').html('<p>Loading…</p>');
$.post($(this).attr('action'), $(this).serialize(), function(response) {
// do something here with the response
$('#response').html('<p>Request successful.</p>');
});
});
</script>
Why not using beforeSend and success methods to show/hide a loading message
beforeSend: function(html) { // this happens before actual call
// DO SOMEHTING HERE TO SHOW YOUR LOADING MESSAGE AS $('#loading').show();
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
// DO SOMEHTING HERE TO HIDE YOUR LOADING MESSAGE AS $('#loading').hide();
$("#results").show();
$("#results").append(html);
}
rgds
I am using ajax to post a form to my localproxy which then posts to affiliate client and also my database. However it keeps either not posting using ajax or coming up with an error. I used this exact code format on other sites without a problem.
my ajax code
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
});
And here is my current form header and submit code
<form id="form" name="form" >
<input type="submit" name="submit" id="submit" value="Enter" />
Either the default submit activates bypassing the ajax or the alert message comes up.
Make sure you have no error in your localProxy script or it does exist. I also noticed you have a missing function enclosure in your code:
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
}); // <--- I just added this and it's submitting properly
});
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.post('/localProxy.php', $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
});
});
});
try with this. this is shorthand version of ajax call. bt im nt sure this is OK or NT.