I am trying to insert a textarea's text to my MySQL database, but my problem is when my program tries to submit empty text to the database.
When I remove e.preventDefault(); it is working just fine. What am I doing wrong?
var frm = $('#newsform');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('Submission was successful.');
console.log(data);
//clear all fields
$('#newsform').trigger("reset");
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
//clear all fields
$('#newsform').trigger("reset");
},
});
});
<form action="updatenews.php" method="POST" id="newsform">
<textarea name="news"></textarea>
<input type="submit">
</form>
var frm = $('#newsform');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: frm.attr('action'),
data: {'frm':frm},
success: function (data) {
alert('Submission was successful.');
console.log(data);
//clear all fields
$('#newsform').trigger("reset");
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
//clear all fields
$('#newsform').trigger("reset");
},
});
});
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();
}
I am having the code with the below format.
PHP file :
<form action="http://clientwebapi.com/createEvent" id="form_createEvent" method="post" enctype="multipart/form-data">
<input type="text" name="image_title" />
<input type="file" name="media" accept="image/*,video/*"/>
</form>
JQUERY file:
$('#form_createEvent').submit(function () {
var form = $(this);
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
xhrFields: {
withCredentials: true
},
data: form.serialize()
}).done(function () {
showCurrentLocation();
alert('Event created successfully..');
location.reload();
}).fail(function () {
alert("fail!");
});
event.preventDefault();
});
The above Jquery code is submitting. Also While I am submitting the below format, It will redirect to the "http://clientwebapi.com/createEvent" and Event created successfully.
Form Submit and redirect to client page:
$('#form_createEvent').submit(function () {
var fd = new FormData();
fd.append('media', input.files[0]);
$.ajax({
url: form.attr("action"),
data: fd,
processData: false,
contentType: false,
type: form.attr("method"),
success: function (data) {
alert(data);
}
});
event.preventDefault();
});
Here How can I prevent while submit the form and create the event with the given image. Kindly help
You forgot to add event as argument to the submit function:
$('#form_createEvent').submit(function (event) {
I found the Answer for this. I made some mistake here. I resolved by using the below code..
$('#form_createEvent').submit(function() {
var form = new FormData($(this)[0]);
$.ajax({
url: 'http://clientwebapi.com/createEvent/',
type: 'POST',
xhrFields: {
withCredentials: true
},
async: false,
cache: false,
contentType: false,
processData: false,
data: form,
beforeSend: function () {
$("#output_process").html("Uploading, please wait....");
},
success: function () {
$("#output_process").html("Upload success.");
},
complete: function () {
$("#output_process").html("upload complete.");
},
error: function () {
//alert("ERROR in upload");
location.reload();
}
}).done(function() {
alert('Event created successfully..');
}).fail(function() {
alert("fail!");
});
event.preventDefault();
});
you can stop the form submission by return false;
$('#form_createEvent').submit(function () {
// some code
$.ajax({
// some code/objects
});
return false; // here, it will stop the form to be post to the url/action
});
I have a html link with a value inside like this.
<a data-toggle='modal' data-id='1' href='#myModal' class='marker' title='Edit'>Link</a>
I have a Js script that trigger a php that I want to send the value data-id
<script>
$(document).on("click", ".marker", function () {
var myBookId = $(this).data('id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg) {
$("#thanks").html(msg)
},
error: function() {
alert("failure");
}
});
});
</script>
And in my php I have this
if (isset($_POST['myBookId'])) {
$emp_id = strip_tags($_POST['myBookId']);
echo $emp_id;
But something is wrong the value is not pass.
Your problem is on the params of the AJAX call. Try this way:
data: { myBookId: myBookId },
try
$('.marker')click(function(){
var myBookId = $().attr('data-id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg){
$("#thanks").html(msg)
},
error: function(){
alert("failure");
}
});
return false;
});
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.
});
Currently I have this, which works nicely - it's an email signup list which returns a successful response or error, as appropriate.
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.fadeIn(500, function() {
$('#display_block').html(response)
});
}
});
return false;
});
The form is in a div with ID "emailform" and the "display_block" is the response. What I need is for the response to automatically disappear after a short time and for the form to fade back in. I've tried a few things but nothing that has worked yet.
Any help on what to add to the above code would be appreciated.
Assuming your initial html is like,
<div id="emailform">
<form>
...
</form>
</div>
you can proceed like this,
.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backupHtml = $('#emailform').html();
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response)
.fadeIn(500, function() {
$(this).fadeOut(5000,function(){
$('#emailform').html(backupHtml);
});
});
}
});
There is nothing inside display_block when you fade it in. Its just empty, I changed the code:
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response) // New line!
.fadeIn(500,function (){ // After we finsish the fadeIn
$('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in
});
}
});
return false;
});
I created a JSFiddle for you http://jsfiddle.net/XHkWr/1/
To do instead of all mumbo jumbo.
$('#emailform').html("<div id='display_block'></div>");
$('#display_block').hide().html(response).stop().fadeIn(500);
I would say, that this would be a correct solution:
$.ajax({
url: 'mailing_list/mailing_list_add2.php',
type: 'post',
data: dataString,
success: function(data, textStatus, jqXHR) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
},
error: function(jqXHR, textStatus, errorThrown) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
}
});
Result here: http://jsfiddle.net/p9URt/2/