I use this code to submit a form
<script type="text/javascript">
var frm = $('#blogform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
ev.preventDefault();
});
</script>
<form id="blogform" action="/my_url" method="post">
...
</form>
My problem is that if the submission is successful I want to be able to empty the form field.
var frm = $('#blogform'); must be var frm = $('#myform'); according to the form sample you provide in the question. And in order to reset your form, Use trigger or reset before alert(data):
$('#myform').trigger("reset");
or
$('#myform')[0].reset();
In your php code you can check whether the submission is successful or not and process that data the jquery like below:
if(data){
$('#myform')[0].reset();
alert(data);
}else{
return false;
}
Hope this may help you.
You can use JavaScript reset() method.
Related
I have code send from to mail, and I don't broke this code.
i don't know the page action receive the form info .. I wont code send to tow direction, in the same time like this .
<from action ="firstdiraction.php" action="seconddirction.php" >
Using jQuery and AJAX:
<form id="my_form" action="javascript:sendForm()">
Form...
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function sendForm() {
var form = $('#my_form');
$.ajax({
type: "POST",
url: 'firstdiraction.php',
data: form.serialize(),
success: function(response) {
console.log(response);
}
});
$.ajax({
type: "POST",
url: 'seconddirction.php',
data: form.serialize(),
success: function(response) {
console.log(response);
}
});
}
</script>
Okay so you want to send form data to two different php scripts, this can be done via ajax like :
$(document).ready( function(){
$('#SubmitButton').click(function(){
//Send data to the email script
$.post( 'firstdiraction.php', $('form').serialize(), function(data, textStatus) {
//data is the result from the script
alert(data);
});
//Send data to the other script
$.post( 'seconddirction.php', $('form').serialize(), function(data, textStatus) {
//data is the result from the script
alert(data);
});
});
});
Above will get triggered on press of submit button inside your form tag <form> </form>
jQuery aslo required, include it on your page.
I am using ajax validation in URL field, I getting correct message (after a check from database), but still form is submitting
I want if I getting an invalid message then the form should not submit, how can I do this ?
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
}
console.log(data);
}
});
});
// return false;
});
</script>
<form name="myForm" id="myForm">
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
$("form").submit(function(e){
e.preventDefault();
});
}
console.log(data);
}
});
});
// return false;
});
</script>
Your tests are placed in the success callback, which is fired after the $.ajax() call has successfully POSTed data and received a response. No matter what you put in there, it is only ever going to happen after the form has been submitted.
If you are trying to do validation before your POST, you need to add that separately. Depending on what kind of validation you need, you could write your own simple tests, or use a plugin - jQuery Validation is a great option.
add this in your footer file
<script>
var burl="<?php echo base_url('') ?>";
var surl="<?php echo site_url('') ?>";
</script>
and then use this surl on ajax url...
like this
<script>
$(document).ready(function(){
$("#Url").blur(function(e) { // add e
e.preventDefault();// prevent other events
var element = $(this).val();
$.ajax
({
url: surl+"Welcome/check_user_status",
type: 'POST',
data: {"url":element}, // check the change
success: function(data){
if($.trim(data) === "Emailvalid"){ // instead of jQuery use $
alert("Emailvalid");
$('#emailInfo').html(data); // put here
}else{ // remove the space between if and else
alert("Email Invalid");
return false; // add here
}
console.log(data);
}
});
});
});
</script>
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