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;
});
});
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.
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;
}
});
});
I am creating a chat system. I am sending a form data through ajax method in jquery. My first problem is ajax method is not sending data to proccess.php and page goes to redirect to its self.
<div id="chatOutput"></div>
<form id="myform">
<textarea id="chatInput" name="chatInput"></textarea>
<input type="submit" id="send" name="send" value="send" />
</form>
and script is :
$('#send').click(function () {
$('#myform').submit();
$.ajax({
url: 'process.php',
type: 'post',
dataType: 'json',
data: $('#myform').serialize(),
success: function () {
alert("Submitted!"); // for testing
}
});
return false;
});
but script is not working and page goes to refresh and i see the variables and its values in the address bar like get method.
if this problem goes to solve, process.php will create a chat.txt and append data from #chatInput into it. and then will append chat.txt 's data to #chatOutput.
After appending data, div#chatOutput 's size goes to change. I want to fixed/specified width and height of this div. After the fixing size, how to scroll to bottom to see the last chatting?
The problem is here:
$('#myform').submit();
The simulates the "Submit" button click event
You can just do :
$('#myform').submit(function() {
$.ajax({
url: 'process.php',
type: 'post',
dataType: 'json',
data: $('#myform').serialize(),
success: function() {
alert("Submitted!"); // for testing
}
});
return false;
});
You used $('#myform').submit(); which just submits the form in the normal way and thus ignoring the ajax etc after that.
Also, put this code either after the form itself or within $(function(){ ... });
EDIT
You had a syntax error. Make sure u have e.preventDefault(); as the first thing in your event click function. Then the default action will be prevented even when an error occurs later on.
$('#send').click( function(e) {
e.preventDefault(); //disable default action
$('#myform').submit();
$.ajax({
url: 'process.php',
type: 'post',
dataType: 'json',
data: $('#myform').serialize(),
success: function() {
alert("Submitted!"); // for testing
}
});
});
return false; //return something
});
Remove the line:
$('#myform').submit();
It is submitting the form before your ajax call is made.
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",