I have the following javascript that's using ajax with jquery to submit a form.
$(function() {
$("#signform").submit(function() {
alert();
$.ajax({
type: "POST",
url: "page/sign.php",
data: { mail: $("#inputEmail").val(),
pass: $("#inputPassword").val(),
nick: $("#inputNick").val(),
date: $.datepicker.formatDate('yy/mm/dd', new Date()) },
sucsess: handler,
error: function(err) { alert('error: ' + err.status) }
});
});
function handler(var){
$('#message').html(val);
}
});
and html code is here, using bootstrap !
<form class="form-horizontal" id="signform">
// ... something codes
<div class="form-group">
<div class="col-offset-2 col-lg-10" align="center">
**<button type="submit" class="btn btn-default">Sign in</button>**
<button type="button" class="btn">Cancel</button>
</div>
</div>
</form>
When I pressed the submit button, it went to the index page.
I don't know what is wrong.
js code is in the same page in sign.php
You are not preventing the default action of the submit button, you can either call event.preventDefault(), or return false from the submit handler to fix this
Also in the handler method the parameter was called var which is invalid
$(function() {
$(document).on('submit', "#signform", function(e) {
$.ajax({
type: "POST",
url: "page/sign.php",
data: {
mail: $("#inputEmail").val(),
pass: $("#inputPassword").val(),
nick: $("#inputNick").val(),
date: $.datepicker.formatDate('yy/mm/dd', new Date())
},
success: handler,
error: function(err) {
alert('error: ' + err.status)
}
});
return false; //this will prevent the default action and will stop the event propagation
//if you do not want to stop event propagation you can use
//e.preventDefault();
});
function handler(val){ //also invalid variable name var here
$('#message').html(val);
}
});
Try this, It will help you better, Here U=page URL, F=Page method,D=Data
U=sign.php,
F=page,
D="mail: '+$("#inputEmail").val()+',pass: '+$("#inputPassword").val()+',nick: '+$("#inputNick").val()+',date: '+$.datepicker.formatDate('yy/mm/dd', new Date())+'"
// function for call page method using ajax
function Operation(U, F, D) {
$.ajax({
type: "POST",
url: U + '/' + F,
data: D,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
success: function (r) {
var str = r.d;
});
}
Related
So I am messing with very stupid issue,There is normal HTML form which I am opening in Modal Box for updating the values.When I change the values of any Text Box and click on button for Ajax Call, there is Old values coming in POST instead of changed value.
For example if there is Value 5 and i changed it to 10 and fire Ajax but in POST data there is still 5.I am using on for getting current values.
Here is part of my HTML code :
<form action="" id="UpdateBind_data">
<input type="text" id="weightage" name="weightage" value="<?php echo $mapping_data->weightage; ?>">
<button type="button" class="btn btn-primary UpdateBind">Update</button>
</form>
Jquery :
$("body").on("click", ".UpdateBind", function() {
var Datastring = $("#UpdateBind_data").serialize();// Retrive the old values not the changed ones.
$.ajax({
type: "POST",
url: updatedbindlink,
data: Datastring,
datatype: "json",
cache: false,
success: function(response) {
if(response.res)
{
alert("Mapping data successfully Inserted");
}
else
{
//error
}
return false;
}
});
});
Thanks in advance.
Maybe it because your forms submits before executing the JQuery bind? Try this:
$("body").on("click", ".UpdateBind", function(e) {
e.preventDefault();
var Datastring = $("#UpdateBind_data").serialize();// Retrive the old values not the changed ones.
$.ajax({
type: "POST",
url: updatedbindlink,
data: Datastring,
datatype: "json",
cache: false,
success: function(response) {
if(response.res)
{
alert("Mapping data successfully Inserted");
}
else
{
//error
}
return false;
}
});
});
trying to send POST request to script via ajax, not calling the script
<script>
function claimitem() {
var val=document.getElementById('itemid').value;
alert(val); //shows as 4 correct
$.ajax({
type: "POST",
url: "scripts/claim.php",
data: {id: val},
dataType: "json",
success: function(data) {
alert("success"); //does not show
}
});
window.location = "profile.php";
}
</script>
here i am calling the javascript function
<input type="submit" onclick="claimitem()" class="btn" value="claim - <?php echo $ebase;?> PP">
my claim.php looks like this what is wrong with my ajax call???
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['id'])) {
...
}
When you call $.ajax, you're starting an asynchronous task. This task, involving a request, doesn't stop the script so the following line is immediately executed.
As the following line replaces the page, it ends the script, including the ajax request. You must call this line in the callback to let the time for the ajax request :
$.ajax({
type: "POST",
url: "scripts/claim.php",
data: {id: val},
dataType: "json",
success: function(data) {
alert("success"); //does not show
window.location = "profile.php";
}
});
code looks ok better add some alert to error as if some problem with your ajax helper.
something like.
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
Hope you have added this to your head tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
then try to change input type="button"
<input type="button" onclick="claimitem()" class="btn" value="claim - <?php echo $ebase;?> PP">
I am trying to create a post using Ajax and jQuery.
But it isn't working. It just refreshes the current page.
HTML :
<form name="update_text_post" action="" id="update_text_post" method="post">
<textarea name="textbox" class="textbox" maxlength="600"></textarea>
<input type="submit" name="submit" value="Update" class="update_post_submit">
</form>
jQuery :
$('#update_text_post').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "post_ajax2.php",
data: dataString,
cache: false,
success: function (html) {
$("#wallwrap").prepend(html);
close_box();
$('#update_text_post').resetForm();
}
});
return false
});
The e.preventDefault(); is not working aswell.. it actually is not even performing the MYSQL query . Seems like it is not even sending the form or targeting the post_ajax2.php file.
You need to use .preventDefault() to stop the default form submit behavior with page reload.
$(function() {
$('#update_text_post').submit(function(e) {
e.preventDefault(); // e.preventDefault() for prevent form submisson with page reload
$.ajax({
type: "POST",
url: "post_ajax2.php",
data: dataString,
cache: false,
success: function(html) {
$("#wallwrap").prepend(html);
close_box();
$('#update_text_post').resetForm();
}
});
});
});
function afterSuccess() {
$('#update_text_post').resetForm(); // reset form
close_box();
}
// 1. you missed $ here, so it will not be a dom ready callback.
// your case is just define a function, and without executing it.
$(function () {
$('#update_text_post').submit(function (e) {
// 2. you need to prevent the default submit event.
e.preventDefault();
$.ajax({
type: "POST",
url: "post_ajax2.php",
data: dataString,
cache: false,
success: function (html) {
$("#wallwrap").prepend(html);
close_box();
$('#update_text_post').resetForm();
}
});
});
});
function afterSuccess() {
$('#update_text_post').resetForm(); // reset form
close_box();
}
You have to stop the default behavior of the submit button (form posting).Otherwise the form will be submitted again and you will see the page loading again ( you won't notice the change ajax brought to your page- some partial page updates ). You can use the preventDefault function to do this.
$(function(){
$('#update_text_post').submit(function(e) {
e.preventDefault(); // prevent the default submit behaviour
$.ajax({
type: "POST",
url: "post_ajax2.php",
data: dataString,
cache: false,
success: function(html)
{
$("#wallwrap").prepend(html);
close_box();
$('#update_text_post').resetForm();
}
});
});
});
Add return false.
$('#update_text_post').submit(function(e) {
$.ajax({
...
})
return false;
});
Clicking on a submit button does just that - it submits the form. If you want to replace the form submission with an AJAX POST request, you'll need to stop the form from also being submitted (and the page therefore reloading), by preventing the default behaviour of that event.
You can do this by calling return false; at the end of the callback function bound to the submit event handler, or by passing a reference to the event to the callback function and calling e.preventDefault() (where e refers to the event).
The key difference between the two methods is that return false, in a jQuery callback function, will also prevent the event from bubbling. In this case, that's not really a big deal.
You have to call e.preventDefault(); in your function to prevent the form submit.
$('#update_text_post').submit(function(e) {
// prevent form submit
e.preventDefault();
$.ajax({
type: "POST",
url: "post_ajax2.php",
data: dataString,
cache: false,
success: function(html)
{
$("#wallwrap").prepend(html);
close_box();
$('#update_text_post').resetForm();
}
});
});
I'm using jQuery and Codeigniter to update the database via AJAX. The following code does not seem to do anything or send anything to my controller when the button is clicked...
jQuery:
$("#button_submit1").click(function(e) {
$.ajax({
type: "POST",
url: window.location.href,
dataType: "json",
data: $('#writereview_form').serialize() + '&ajax=true',
cache: false,
success: function(data) {
alert("yay");
//$("#writereview_box").fadeOut(1000);
}
});
return false;
});
HTML:
<form action="http://mysite.com/places/writereview/2107" id="writereview_form" method="post" accept-charset="utf-8">
...
...
<input type="submit" name="submit" value="Submit Review" class="button_submit" id="button_submit1">
Any ideas why the ajax data is not being sent?
In this case its better to bind to the 'submit' event on the form and then use preventDefault() to stop the HTML submission and use Ajax instead.
You should also use the form's action instead of window.location
$("#writereview_form").submit(function(e) {
var $this = $(this);
e.preventDefault();
$.ajax({
type: "POST",
url: $this.attr('action'),
dataType: "json",
data: $this.serialize() + '&ajax=true',
cache: false,
success: function(data) {
alert("yay");
//$("#writereview_box").fadeOut(1000);
}
});
});
Try withiut using window.location.href and giving url as url: "page.php",
I am at a loss here with some simple jQuery. I have the following code in a separate file:
$(document).ready(function(){
//$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
//});
});
That works just fine, on page load it returns the expected data to the alert window.
But, if I remove the comments from this line:
$("#trackit").click(function() {
to capture the form's submit button, I get no return data.
Here is the abbreviated form info:
<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" name="tForm" id="tForm" method="post">
<button type="submit" class="buttonTracking" id="trackit" name="trackit">Track It!</button>
</form>
Am I just overlooking some simple error here?
Correct working code would be this:
$(document).ready(function(){
$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
return false; // to cancel form submission and subsequent page refresh
});
});
I'd say it's because the #trackit button is also a submit button. The click action is executing your javascript AND submitting the form. You need to change the code to:
$(document).ready(function(){
$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
return false;
});
});