I have a form with most types of inputs like checkboxes, selectors, file uploads and others. I want to post the form without page to refresh and here is my code:
$(document).ready(function() {
jQuery.noConflict();
var form = $('#form1111');
var submit = $('#submit1111');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '../ajax_comment.php',
type: 'POST',
cache: false,
data: form.serialize(),
beforeSend: function(){
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data) {
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
error: function(e) {
alert(e);
}
});
});
});
But I get an [object Object] in an alert after pressing the submit button. Any suggestions will be appreciated.
Related
I am using PHP/Ajax/serialize to submit a simple form to itself. I use the following JavaScript to set it up to serialize/post the data. You can see the demo at https://www.dottedi.biz/demo/code/public/addtocart.php. There is a link to a .txt version of the script.
$(function() {
var form = $("#addtocart");
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$("#result").html( "" );
$.ajax({
type: "POST",
url: $(form).attr("action"),
data: formData,
success: function(html) { $("#result").html(html); }
})
});
});
Upon clicking the Buy it now button, it should only add a single line to the database. The first time you click on the button it adds a single line. If you click again, it adds two new lines, then three new lines, etc. It is sequentially adding more lines if you click submit. To stop this, you must reload the form.
Place the id of the button in id = "addtocart_id"
$(function() {
var form = $("#addtocart");
var count_btn = true;
form.submit(function(e) {
e.preventDefault();
if(count_btn){
var formData = form.serialize();
$("#result").html("");
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
beforeSend: function () {
$("#addtocart_id").html("Please Wait...").prop("disabled", true);
},
success: function(html) { $("#result").html(html); }
complete: function(){
count_btn = false;
$("#addtocart_id").html("Now Reload from browser");
}
})
}
});
});
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");
},
});
});
what is wrong with this ajax request? the page is still reloading without giving any popups. if i remove everything after the "event.preventDefault();" it will stop page reload so i figure it must something with how i'm using the ajax method. This is for a php-self validating form
<script type="text/javascript">
//attach submit event handler to the form
$('#rsgform1').submit(function(event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function(){
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function(){
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
</script>
You forgot to close the ajax call...
<script type="text/javascript">
//attach submit event handler to the form
$('#rsgform1').submit(function(event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function(){
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function(){
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
});
</script>
Try return false at the end of the callback function.
And don't forget to balance your braces as others have mentioned.
your script has a missing pair of closing brackets }) at the end
$('#rsgform1').submit(function (event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function () {
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error: function () {
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
});// <-- missing this closing pair
You have an error in your JS. When an error occurs, the page refreshes.
<script type="text/javascript">
$('#rsgform1').submit(function(event) {
event.preventDefault();
$("#rsgresult").html('');
var values = $(this).serialize();
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function() {
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function() {
alert("failure");
$("#rsgresult").html('There is error while submit');
}
}); // Missing
});
</script>
The follwing ajax script isn't sending data to php, the page just reloads & form input values are passed onto the url.
Script
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts">
...
</form>
There's already a problem in your code: $("addProducts").serialize(); should be $("#addProducts").serialize();.
I just ran some tests. The problem is because you try to bind your function before your document is ready. Please replace your code by the code below:
$(document).ready(function() {
$("#form1").submit(function(event) {
var str = $("#form1").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "test.php",
data: str
});
});
});
About what Zeeshan Bilal and pvorb said, I'm afraid it's false. submit() is the right function to use (see jQuery documentation).
Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
Perhaps you are trying to bind your function when document is not ready.
$(document).ready(function() {
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})});
});
<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts" action="">
...
<input type="submit" name="submit" value="submit">
</form>
To solve this problem you should modify your code in this way:
<script>
$("#addProducts").submit(function(event) {
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str,
success: function(data){
//perform your success process here
return false;
}
})
});
</script>
Try Setting the Ajax async property to false as shown below
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
async:false
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
Adjust your JS as below
<script>
$("#addProducts").click(function(event) {
$.ajax({
type: "POST",
url: "subAddProduct.php",
dataType : 'json', //data type can be any type like json, html etc.
data:'str='+str
success : function(data) {
//perform your success process here
}
});
});
</script>
I have not tested the above code, but it should work, as i use same codes for my ajax features.
Also check jquery docs for $.ajax http://api.jquery.com/jQuery.ajax/
$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});
Its not ajax issue, actually you are using $("#addProducts").submit that send a page submit request and cause page reload. Use click instead of submit.
The another mistake $("addProducts").serialize(), add # for id selector. Below is the sample code:
$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});
Missing the hashtag when you serialize... your code is having jQuery look for an element called "addProducts" not an element with an id of "addProducts" change this line
var str = $("addProducts").serialize();
to this line
var str = $("#addProducts").serialize();
<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
return false;
</script>
You need to preventDefault, which stops the form being submitted normally, causing the page to reload. You then need to return false after because Firefox doesn't like preventDefault :P
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