how to pass whole data using ajax in php using keypress event - php

I am passing empcode using key press event, but my whole empcode is not transfered and the last digit is cut.
Here is my code:
$(document).ready(function(){
$("#e_code").keypress(function(){
//var dataString=document.getElementById("e_code").value;
var dataString = 'e_code='+ $(this).val();
$.ajax({
type: "POST",
url: "getdata.php",
data: dataString,
cache: false,
success: function (html) {
$('#details').html(html);
$('#custTrnHistory').show()
}
});
});
});
on getdata file code is

write code in keyup instead of keypress
$("#e_code").keyup(function(){

You can bind your keypress on document --- try this
$(document).on('keypress',"#e_code",function(){

Try this
$(document).ready(function(){
var minlength = 5; //change as per the the length of empcode
$("#e_code").keyup(function () {
var inputvalue= $(this).val();
if (inputvalue.length >= minlength ) {
var dataString = 'e_code='+ $(this).val();
$.ajax({
type: "POST",
url: "getdata.php",
data: dataString,
cache: false,
success: function (html) {
$('#details').html(html);
$('#custTrnHistory').show()
}
});
}
});
});

Related

How can I send a response in Ajax through php script

I need to send a response from the ajax to the php code. Alert msg as to be displayed when success.. I have to get entered date should be displayed in the url and response as to be sent..
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
success: function() {
alert(data);
}
});
});
});
</script>
Two error:
1:
date = $(this).val();
to
var date = $(this).val();
2:
url: "http://localhost/data/check_date.php?date=" +date ",
to
url: "http://localhost/data/check_date.php?date=" +date ,
3:
success: function() {
to
success: function(data) {
All script:
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
success: function(data) {
alert(data);
}
});
});
});
</script>
Remove " mentioned at the end of the url because date is variable to be passed through url.
To overcome all mistakes change your whole code to
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date,
success: function(date) {
alert(date);
}
});
});
});
</script>
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
dataType: 'text',
success: function(data) { //add data in the function which is returned from the file
alert(data);
}
});
also try opening your network tab by clicking F12 in your browser before doing ajax request, if there's some error in your php file you can view it here in network tab, see if it helps

Got Twice trigger on change paste keyup

So i have scanner and input text, if scanner get value max 9 digit, is will insert ot my database (automacly). These my coding
$(window).load(function(){
$( "#scannerinput" ).focus();
$('#scannerinput').bind("change paste keyup", function(){
var barcode = $(this).val();
var judul = $(this).attr("target-judul");
var dataString = "judul=" + judul + "&barcode=" + barcode;
if(this.value.length ==9){
$.ajax
({
type: "POST",
url: url+"ajax",
data: dataString,
cache: false,
success: function(data)
{
//window.location.href = url;
}
});
$( "#scannerinput" ).blur();
//console.log(dataString);
}
});
});
My problem is my code make insert twice or get trigger twice. How to make it just once trigger??? Any idea??
add array of exist data:
var exists_dataString_arr=[]; //array of exist data
$(window).load(function(){
$( "#scannerinput" ).focus();
$('#scannerinput').bind("change paste keyup", function(){
var barcode = $(this).val();
var judul = $(this).attr("target-judul");
var dataString = "judul=" + judul + "&barcode=" + barcode;
if((this.value.length ==9)&&(exists_dataString_arr.indexOf(ataString)<0)){ //if not in array
$.ajax
({
type: "POST",
url: url+"ajax",
data: dataString,
cache: false,
success: function(data)
{
//window.location.href = url;
exists_dataString_arr=[];
}
});
exists_dataString_arr.push(dataString); //add data in array
$( "#scannerinput" ).blur();
//console.log(dataString);
}
});
});

ajax post with PHP

why isn't this working?
jQuery AJAX Code:
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
});
});
PHP Code(Just a test Code):
if($_POST["search"]) {
echo "TEST MESSAGE!";
}
It doesn't show The echo :/
thanks for ur help ;)
You need to display the data you receive from the ajax call.
Example, to put the result into a <div> called YourresultDiv:
Try with this
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#YourresultDiv').html(data);
alert("Successful");
}
});
});
Hopes this will help you....
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
async: false
},success: function (data) {
$('div#posteddata').append(data);
}
);
});
<html>
<head>
</head>
<body>
<div id="posteddata"></div>
</body>
</html>
You need to specify an element you want to update.. for example
<div id="result"> </div>
and then append a success event handler to your ajax call
$("header input").bind("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
}).success(function (data) {
$("#result").html(data);
}).fail(function () {
alert("Ajax failed!");
});
});
Try with this
In js add
success: function (data) {
// success handler
}
as your response handler
if($_POST["data"]) {
// search = search string available here in $_POST['data']
echo "TEST MESSAGE!";
}
where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..
So try this.
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#Yourdiv').html(data); // or $('#Yourdiv')text(data);
}
});
});
Without success function,you can see the echoed statement in your network segment in console.
for that, press F12,then you will get a link like
XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement..
try it.

How to use jquery VALUE in an ajax success function

I cannot use value div name in fourth-last line
I want to use div name in Ajax function in $("divname").html(data);
$('.edit').click(function() {
var object = $(this);
var rowvalue = object.attr('id');
var rowvalue_array = rowvalue.split('_');
var id = rowvalue_array[1];
var comment = $('#comment_'+id).val();
var divname = '#'+id;
var varData = 'id='+id+'&comment='+comment;
console.log(varData);
$.ajax ({
type: "POST",
url: "edit_field.php",
data: varData,
success: function(data) {
$("divname").html(data);
}
});
return false;
});
Use the following code..
$.ajax ({
type: "POST",
url: "edit_field.php",
data: varData,
success: function(data) {
$(divname).html(data);
}
});
Please replace your line as below :
$(divname).html(data);
remove quata (")
divname is variable
or you can use as below :
$("#"+id).html(data);
Try this:
$.ajax ({
type: "POST",
url: "edit_field.php",
data: varData,
success: function() {
$("divname").html($(this).data);
}
});
Why are you accessing the element by id when u have the element.....try
$(object).html(data);

send each element with class name via AJAX to php

Hi i'm using the below code to take data and send it to a php page, it works as i want it to but its only sending the first ".order" it comes across, ie. i need to send every element with class="order", would this be some sort of .each()?
$('#submit').click(function(){
var order=$('.order').html();
var dataString = 'order='+ order;
$.ajax
({
type: "POST",
url: "order.php",
data: dataString,
cache: false,
success: function(html)
{
$("#response").html(html);
}
});
});
Did this instead and it now works, bizarre!
$('#submit').live('click',function(){
var order=$('.order').text();
var dataString = 'order='+ order;
$.ajax
({
type: "POST",
url: "order.php",
data: dataString,
cache: false,
success: function(html)
{
$("#response").html(html);
}
});
});
Try var order = $('form').serialize() as explained here http://api.jquery.com/serialize/
Other than this, you must do something like:
$('.order').each(function(){
// Get values from order here... something like: order += $(this).html();
// Also, note that if '.order' are inputs you should use $(this).val() instead of $(this).html();
});
Hope it helps.
I believe this should do it:
var order=$('.order')
.map(function(){ return this.innerHtml; })
.get().join('');
var dataString = 'order='+ order;

Categories