i wrote a code that will add records to data base then return the message to a specific div
now I need to know how to clear text boxes after I get the result to the div?
$(document).ready(function() {
$('#message').submit(function(e) {
e.preventDefault()
$.ajax({
url: 'processmsg.php',
data: $(this).serialize(),
method: 'POST',
success: function(resp) {
$('#error_msg').html(resp);
}
})
})
})
$(document).ready(function() {
$('#message').submit(function(e) {
e.preventDefault()
$.ajax({
url: 'processmsg.php',
data: $(this).serialize(),
method: 'POST',
success: function(resp) {
$('#error_msg').html(resp);
$('#FullName').html("");
$('#Email').html("");
$('#PhoneNumber').html("");
$('#Message').html("");
}
})
})
})
$(document).ready(function() {
$('#message').submit(function(e) {
e.preventDefault()
$.ajax({
url: 'processmsg.php',
data: $(this).serialize(),
method: 'POST',
success: function(resp) {
$('#error_msg').html(resp);
let frm = document.getElementsById('#message')[0];
frm.reset(); // Reset all form data
}
})
})
})
if it's a regular html form then from.reset();
$(document).ready(function () {
$('#message').submit(function (e) {
e.preventDefault()
$.ajax({
url: 'processmsg.php',
data: $(this).serialize(),
method: 'POST',
success: function (resp) {
$('#message')[0].reset();
}
});
});
});
Related
I am new to wordpress, i make a ajax request on click button and it print the data, but ajax is not giving me any response. Please help me to find out the error.
Here is my code
add_action("wp_ajax_delivery_options", "delivery_options");
add_action("wp_ajax_nopriv_delivery_options", "delivery_options");
function delivery_options()
{
echo json_encode(array('type' => 'success'));
wp_die();
}
wp_enqueue_script("my-ajax-handle", get_stylesheet_directory_uri() . "/js/custom.js", array('jquery'));
wp_localize_script('my-ajax-handle', 'the_ajax_script', array('ajaxurl' => admin_url('admin-ajax.php')));
Ajax
(function($) {
$(document).ready(function() {
$('#delivery_option button').on('click', function(e) {
e.preventDefault();
var data = e.currentTarget.id;
$.ajax({
type: 'POST',
dataType: 'json',
url: the_ajax_script.ajaxurl,
data: { delivery_option: data },
success: function(response) {
console.log(response);
}
});
});
});
})(jQuery);
Any solution appreciated!
you have to pass "callback function name" in data: { action: 'delivery_options', delivery_option: data },
(function($) {
$(document).ready(function() {
$('#delivery_option button').on('click', function(e) {
e.preventDefault();
var data = e.currentTarget.id;
$.ajax({
type: 'POST',
dataType: 'json',
url: the_ajax_script.ajaxurl,
data: { action: 'delivery_options', delivery_option: data },
success: function(response) {
console.log(response);
}
});
});
});})(jQuery);
I made an ajax request to get the name of each button I click...
Then I want to put everything in that url into "#Container".(url define a page that has some codes)
It works for me at the first time...but for the other times I have to reload the page to show me the details of each button and it doesn't show me details of other buttons that clicked after first desired button..
$(function () {
$('button').click(function () {
var data= $(this).val();
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {
data: data
},
success: function (data) {
$('#container').html(data);
}
});
});
});
What should I do?
Is there something preventing of running the ajax for next times ?
Try with $(document).on('click', instead of $('button').click like below
$(function () {
$(document).on('click','button',function () {
var data= $(this).val();
alert(data);
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);}
});
});
});
You will need to re-bind ajax event because of its re-rendering DOM after an ajax request completes. All those elements under #container are not virtual part of DOM and your click event only works for pre-existed elements.
Try this
Wrap ajax event in a separate function
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
clickEvent(); //note this function attachment I added below
}
});
}
You can wrap your click event into a function
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
Now js looks like
<script>
$(function(){
clickEvent();
});
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
}
});
}
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
</script>
Also I see you are passing ajax data as $('button').val() which is not correct. Use a input type text if you want to send a data to server.
i have a div that shows the total sum of some products:
<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>
with ajax, i'm adding products to cart ... se the page is not reloading.
How to refresh the div after I add the product to cart?
The ajax that i'm using:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
$(".total-price").something...;
}
});
})
</script>
Thank you!
You can do something like this:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
var oldPrice = $('.total-price').text() * 1;
var itemPrice = "15"; //the price that should be added
$('.total-price').text(oldPrice + itemPrice);
}
});
})
</script>
You should be returning a total basket value from your /tdt/order path.
In the PHP script you should echo some JSON data with all the required information, for example
echo json_encode(array("totalPrice" => "£10.01"));
Then you need to parse this information into your Javascript and update the pages elements;
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
$(".success-message").slideDown().delay(5000).slideUp();
$('.total-price').val(data.totalPrice);
}
});
})
</script>
The above ajax request will expect the data returned to be JSON, you will then use this to update the total-price element.
You can use something like angularjs or knockoutjs - for angular you would update your model - for knockout you would use the self.object.push(value) i.e.,
function OrderViewModel() {
var self = this;
self.myOrder = ko.observableArray([]);
self.addOrderItem = function () {
$.ajax({
type: "post",
url: "yourURL",
data: $("#YOURFORMFIELDID").serialize(),
dataType: "json",
success: function (value) {
self.myOrder.push(value);
},
headers: {
'RequestVerificationToken': '#TokenHeaderValue()'
}
});
}
}
ko.applyBindings(new orderViewModel());
</script>
</pre>
Hello all I would like to send a request after my first request succeeds
The following is what I am using to make the initial request
$('#registerUser').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'GM/checkUserExists',
data: $('form').serialize(),
success: function () {
}
});
return false;
});
In order to make the second requewst I am using the following that is not working, it is loading the page but it is loading the page which I don't want. I am sure I am doing this wrong but any help getting me past this would be great.
$('#registerUser').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'GM/checkUserExists',
data: $('form').serialize(),
success: function () {
type: 'get',
url: 'GM/checkUserExists',
data: $('form').serialize(),
}
});
return false;
});
Any reason why do you get twice checkUserExists ?
$('#registerUser').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'GM/checkUserExists',
data: $('form').serialize(),
success: function () {
// IF YOU WANT TO CALL A SECOND AJAX REQUEST
$.ajax({
type: 'get',
url: 'GM/checkUserExists',
data: $('form').serialize()
// success: function ....
});
}
});
// return false; // DONT NEED IT IF YOU HAVE e.preventDefault();
});
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.
});