Develop Reference

How to stop and start ajax submit form again when using onkeyup javascript?

I am attempting to stop the previous AJAX request when a new keyup event fires. The patten is like this:
User enters A, my code will submit the form using AJAX with a test_value of A.
When user enters B I want to stop the AJAX request from the first step and make a new request with test_value of AB.
<input type="text" id="xxx" onkeyup="test_fn(this.value)" autocomplete="off">
<div id="loading" style="display: none;">please wait.....</div>
<span id="myplace_test"></span>
<form id="test_fid" method="POST" action="" style="display: none;">
<input type="text" name="test_value" id="test_value">
</form>
function test_fn(val) {
document.getElementById("loading").style.display = "block";
document.getElementById("test_value").value = val;
$.ajax({
url: "test.php",
type: "POST",
data: $('#test_fid').serialize(),
cache: false,
success: function(data) {
$('#myplace_test').html(data);
document.getElementById("loading").style.display = "none";
}
});
}

To achieve what you require you can save a reference to the previous AJAX request in a variable and then call abort() on that if a new keyup event fires.
Also note that you shouldn't be using on* event attributes. As you've included jQuery in the page, you can use that to attach unobtrusive event handlers. You can also use jQuery to select your elements and work with them more succinctly. Try this:
<input type="text" id="xxx" autocomplete="off">
<div id="loading">please wait.....</div>
<span id="myplace_test"></span>
<form id="test_fid" method="POST" action="">
<input type="text" name="test_value" id="test_value">
</form>
var activeRequest;
$('#xxx').on('keyup', function(e) {
$("l#oading").show()
$("#test_value").val(this.value);
activeRequest && activeRequest.abort();
activeRequest = $.ajax({
url: "test.php",
type: "POST",
data: $('#test_fid').serialize(),
cache: false,
success: function(data) {
$('#myplace_test').html(data);
$("#loading").hide();
}
});
});
#loading,
#test_fid {
display: none;
}
Also note the use of CSS to contain the styling rules instead of placing them inline in the HTML.

Form submitting on return false

I have the following form:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
Which I'm trying to submit using ajax but the form is posting, here's the JQuery:
$("#sizeForm").submit(function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
Any ideas where I'm going wrong?

The issue may be with your PHP script (which you haven't provided), but here are some ideas.
HTML:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
javascript:
$("#sizeForm").on('submit', function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
In your PHP script add something like this so you know the value is received. This will show in the network tab in the browser developer tools.
if (!empty($_POST['comments'])) {
echo "form submitted!";
exit;
}
In the network tab, you should see an entry like POST editSize.php. If you don't see it, the form was not sent. If you do see it, open it up and look at the "post" tab. This will show you what was sent. Then, your "response" tab will show you the output from your PHP script.

input value data is not passing using jquery/ajax to Php

I'm trying to get result from Mysql database but I'm getting warning message it's because it's not passing the html field value to jquery/ajax method. I think issue is on this line data : SearchValue,. So that In my php page it's not getting $search = $_POST['SearchValue']; value and showing warning message.
Can anyone tell what is wrong in my code ? Thank You.
Html Page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#display").click(function() {
var SearchValue = $('#txt_name').val();
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "doSearch.php",
data : SearchValue,
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
<h3 align="center">Manage Student Details</h3>
<table border="1" align="center">
<tr>
<td> <input type="text" name="search" id="txt_name" /> </td>
<td> <input type="button" id="display" value="Display All Data" /> </td>
</tr>
</table>
<div id="responsecontainer" align="center">
Php page:
$search = $_POST['SearchValue'];

Please Use Below Code :
$(document).ready(function() {
$("#display").click(function() {
var SearchValue = $('#txt_name').val();
var str = $( "#form_id" ).serialize();
$.ajax({
//create an ajax request to load_page.php
type: "POST",
url: "doSearch.php?searchValue="+SearchValue,
data : str,
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});

You are submitting the form via native method. That means if you click on your submit button the page will be reloading (since in your case you haven't included the form action).
One thing you could do is make a button and a textfield outside of the form and declare its onClick attribute like this:
<input type="text" id="search">
<button onclick="doSearch(document.getElementById('search').value)"> Search <button>
OR
<input type="text" id="search">
<button onclick="doSearch($("#search").val())"> Search <button>

Some PHP process should be done while Jquery toggle button is clicked without redirecting the page

i have a toggle button on Jquery which has to show some extra info. it works good and i wanna to do some process on PHP in order to do in back end without redirecting the toggle page (which shows some extra info). i am breaking my head too long . kindly help me out please... here is my Jquery code
<div class="hidetext"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".hidetext").click(function () {
$(".text").toggle("slow",function(){
});
});
});
$('#hidetext').change(function() {
this.form.submit();
});
</script>
<form action="http://localhost/test/test/index.php" method="post" id="doSite">
<input type="hidden" name="credits" value="<?php echo $email;?>">
<input type="hidden" name="credits" value="<?php echo 2;?>">
<button class="hidetext">Click More Info</button>
</form>

You can use ajax for this.
$.ajax({
dataType: "json",
data: {"x": $x},
url: 'php/x.php',
type: 'post',
beforeSend: function(){
//What is done before to send
},
success: function(respuesta){
//what is done after send
$("x").html(respuesta.html);
},
error: function(xhr,err){
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\n \n responseText: "+xhr.responseText);
}
});

ajax on submit no refresh form using php

ok so i know this ajax works, but i cant seem to understand why it's not submitting here.
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(){
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
submit form
<form action="" method="post" onsubmit="return false;" id="myform">
submit button
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
i'm pretty something is wrong with the button, but i want to keep the way the button is because alot of my other forms use this same button, thanks if you can explain to me why click this submit button does nothing.

You are selecting an <input> instead of a <button>. I had success by changing your jQuery selector from this:
$('input[type=submit]')
to this:
$('button[type=submit]')
http://jsfiddle.net/H3Bcc/

Not all browsers interpret a click attached to a submit button as submitting the form so you are effectively just negating the click of that button.
Preventing a form submission should preferably be captured by attaching the submit handler to the <form> when you have a <input type="submit"> or <button type="submit> so this is the best way to assure success:
jQuery
$(function(){
$('#myform').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
HTML
<form action="postitem.php" method="POST" id="myform">
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
</form>

try this :
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});