PHP to AJAX

Question

tqmd1 0 Junior Poster

10 Years Ago

Dear Sir,

I have following codes. These code wok fine. Is it possible to get table data with ajax. If yes then please help me to modify my code. Thanks

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    if(isset($_POST['button1']))
    {
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->
</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="#" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="<?php  echo $productCode ; ?>" title="Enter product code" onkeypress="validate(event)" ;  onfocus="this.select()" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" value="<?php echo $productValue; ?>" title="Enter product name" ></td>
                            </tr>

                        </table>
               <div style="text-align:center;margin-top:20px;">
                        <input type="submit" name="button1" value="Display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

[IMG]http://i41.tinypic.com/2l9l7ux.jpg[/IMG]

php

2 Contributors
28 Replies
266 Views
1 Day Discussion Span
Latest Post 10 Years Ago Latest Post by diafol

All 28 Replies

diafol

10 Years Ago

Yes - if it's possible with POST, it's pretty much possible with Ajax. What do you mean by get table data? Are you talking about getting value from DB on change in product code?

Attach an event listener to textbox and run your ajax call from there.

Edited 10 Years Ago by diafol

diafol

10 Years Ago

It will be more helpfull for me if you write some codes to solveout my problem.

I'm sorry, but that's not really what this site is about. However, I can give you an example, which you may be a ble to tailor to your needs.

I use jQuery (a lot), so my plain js is a bit rusty, so I'll stick to that. With jQ you have the choice of using .change() or .blur(). CHange will be best IMO:

$( ".target" ).change(function() {
  runAjax();
});

Change .target to however you wish to identify your textbox. If you identify it with a classname, then it will be something like .myclassname, if on the other hand you have an id, it will be something like #myid. I believe that you're using id="textsno".

The runAjax() function will do all the relevant work for you.

function runAjax()
{
    //your ajax call
}

Info about ajax calls can be found here... http://api.jquery.com/jQuery.get/ and other places on that site. I refer to the get function as this is probably the one that best fits your needs.

var formVal = $('.target').val();
$.get( "includes/test.php", { id: formVal } )
  .done(function( data ) {
    $( "#txtpro" ).val( data );
  });

You will need to add an id attribute (id="txtpro") to the product input for this to work. The above doesn't check for errors nor does it do anything if no useful data is returned. That's up to you to figure out what you need.

Your php file for retrieving data will be very simple. Use the $_GET['id'] to get the formVal value. Use that (carefully!) to get info from the DB and then once you have that, echo it - something like

echo $row['packing'];

That should be it.

Don't forget to place the scripts and files in the right place (just before the close body tag):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//your jQ/jS here
</script>
</body>

diafol

10 Years Ago

Where have you included the reference to the jQuery library?

You also have an extra brace on line 69

I suggested placing all the js before the close body tag (line 106).

diafol

10 Years Ago

 var formVal = $('.txtsno').val();
$.get( "db/data_find_ajax.php", { id: form1 } )  .done(function( data )

I explained to you that if you refer to a DOM object by 'id' (txtsno), then you need to prefix that name with a hash (#), not a dot (.) - which would be OK if it had a class attribute of 'txtsno'.

var formVal = $('#txtsno').val();

You have 'form1' in your parameters. Where does this come from? We set 'formVal' specifically to capture the value of the textbox for this very purpose.

$.get( "db/data_find_ajax.php", { id: formVal } )

You still have all this inline js going on for some reason...

 <th width="50px"><input type="password" name="txtsno" id="txtsno" value="" title="Enter product code" onkeypress="validate(event)" ;  onfocus="this.select()"   onblur="change()" /></th>

Get rid of it:

 <th width="50px"><input type="password" name="txtsno" id="txtsno" value="" title="Enter product code" /></th>

And BTW, why are you using <th>? Shouldn't they be <td>?
Also you can tidy up the HTML with using CSS instead of inline sizing and center tags. These have been outmoded for some 10 years by now. <center> is not supported in HTML5 and was deprecated in HTML4.01.

Suggest you tidy up the html before anything else.

diafol

10 Years Ago

Is there any point to the submit button now?

$( "#display" ).click(function( event ) {
  event.preventDefault();
  });

Something like that?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tqmd1 0 Junior Poster · Answer 1 · 2013-11-26T08:18:00+00:00

Yes, I want to enter product code in txtsno then want to show product_name in txtpro.

It must call a AJAX function from onkeydown event of textsno.

Please help more

diafol · Answer 2 · 2013-11-26T09:06:37+00:00

I would advise against the onkeydown call as you'd get an ajax call for every character entered. So for a 4 charcater 'code', you'd get 4 calls, most presumably for 'codes' that don't exist. A better option would be to attach a listener to the onblur event (leaving the control).

What further help do you need. A link to an example? I'm assuming you don't want us to write the code for you, so be clear with your needs. Do you need to know how to set up an event listener? Do you want to use a library like jQuery?

tqmd1 0 Junior Poster · Answer 3 · 2013-11-26T09:15:23+00:00

I know JS onlblur but I am listening about event listener first time because i am new to php.

It will be more helpfull for me if you write some codes to solveout my problem.

No matter what technique will you adopt. I shall pick that as a roadmap.

Thanks

tqmd1 0 Junior Poster · Answer 4 · 2013-11-26T12:24:28+00:00

Sir, I have modified my codes as you said but it sitll not working

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    //if(isset($_POST['button1']))
    //{
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            echo $row['packing'];
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    //}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->


<!-- Javascipt starts -->
<script type="text/javascript">
    $( ".txtsno" ).change(function() {
    {
        var formVal = $('.txtsno').val();
$.get( "db/data_find_ajax.php", { id: form1 } )
  .done(function( data ) {
    $( "#txtpro" ).val( data );
  });
}
</script>
<!-- Javascript end -->


</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="#" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="" title="Enter product code" onkeypress="validate(event)" ;  onfocus="this.select()" ;onblur="change()"/></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" value="<?php echo $productValue; ?>" title="Enter product name" ></td>
                            </tr>

                        </table>
               <div style="text-align:center;margin-top:20px;">
                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

Please giude me what i am dowing wrong?

Thanks

tqmd1 0 Junior Poster · Answer 5 · 2013-11-26T14:18:06+00:00

Sir, Now I have folloiwng codes, but it has result. Please modify again.

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    if (isset($_POST['txtsno']))
    {
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->
<!-- Javascipt starts -->
<script type="text/javascript" src="db/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $( ".txtsno" ).change(function() {
         var formVal = $('.txtsno').val();
$.get( "db/data_find_ajax.php", { id: form1 } )  .done(function( data ) 
{
    $( "#txtpro" ).val( data );
  });
});
</script>
<!-- Javascript end -->




</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="#" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="password" name="txtsno" id="txtsno" value="" title="Enter product code" onkeypress="validate(event)" ;  onfocus="this.select()"   onblur="change()" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="" title="Enter product name" ></td>
                            </tr>

                        </table>

                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>
</body>
</html>

tqmd1 0 Junior Poster · Answer 6 · 2013-11-26T16:03:51+00:00

Sir thanks for teaching me everything step by step. It is good technique.
Now I have these code, but submit button still calling php function to get data from table then show it in txtpro textbox. How to force sumit button to call ajax function to do that?

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    if (isset($_POST['button1']))
    {
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->
<!-- Javascipt starts -->
<script type="text/javascript" src="db/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $( "#txtsno" ).change(function() {
         var formVal = $('.txtsno').val();
$.get( "db/data_find_ajax.php", { id: formVal } )  .done(function( data ) 
{
    $( "#txtpro" ).val( data );
  });
});
</script>
<!-- Javascript end -->




</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="#" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="<?php echo $productCode ?>" title="Enter product code" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="<?php echo $productValue ?>" title="Enter product name" ></td>
                            </tr>

                        </table>

                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>
</body>
</html>

tqmd1 0 Junior Poster · Answer 7 · 2013-11-26T17:33:28+00:00

Thanks, Sir I have modified Js Function as you said but this function is still not working. I have added an alert box within function, When I press Display Button then no alert message is displayed. So It mean that result on form is displayed with php not with JS function.

I request you to please finalize my codes.

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    if (isset($_POST['button1']))
    {
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->
<!-- Javascipt starts -->
<script type="text/javascript" src="db/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( "#display" ).click(function( event ) {
  event.preventDefault();
  alert("hello")
         var formVal = $('.txtsno').val();
$.get( "db/data_find_ajax.php", { id: formVal } )  .done(function( data ) 
{
    $( "#txtpro" ).val( data );
  });
});
</script>
<!-- Javascript end -->
</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="#" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="<?php echo $productCode ?>" title="Enter product code" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="<?php echo $productValue ?>" title="Enter product name" ></td>
                            </tr>

                        </table>

                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>
</body>
</html>

diafol · Answer 8 · 2013-11-26T18:48:30+00:00

You have twice ignored my suggestion about placing the scripts at the end of the document.

Don't forget to place the scripts and files in the right place (just before the close body tag):

and

I suggested placing all the js before the close body tag (line 106).

I mentioned it for a reason.

tqmd1 0 Junior Poster · Answer 9 · 2013-11-27T03:16:42+00:00

Sorry for my mistakes, Now I have these codes but it still not calling JS function.

<?php
    require_once("connect.php");
    $productCode = "";
    $productValue="";
    if (isset($_POST['button1']))
    {
        // Get values from form 
        $sno =$_POST['txtsno']; 

        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        //conditional statement starts
        if(!$row)
            die ('No record Found');
        else 
        {
            $productValue = $row['packing'];
            $productCode = $sno;
        }                    
        // Conditional statement ends
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->

</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="data_find_ajax.php" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="<?php echo $productCode ?>" title="Enter product code" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="<?php echo $productValue ?>" title="Enter product name" ></td>
                            </tr>

                        </table>

                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>

<!-- Javascipt starts -->
<script type="text/javascript" src="db/Js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( "#txtsno" ).blur(function( event ) {
  event.preventDefault();
  alert("hello")
  var formVal = $('.txtsno').val();
$.get( "data_find_ajax.php", { id: formVal } )  .done(function( data ) 
{
      alert("Now you will see data in txtpro")
    $( "#txtpro" ).val( data );
  });
});
</script>
<!-- Javascript end -->
</body>
</html>

diafol · Answer 10 · 2013-11-27T07:55:12+00:00

<script type="text/javascript" src="db/Js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( "#txtsno" ).blur(function( event ) {
  event.preventDefault();
  alert("hello")
  var formVal = $('.txtsno').val();
$.get( "data_find_ajax.php", { id: formVal } )  .done(function( data ) 
{
      alert("Now you will see data in txtpro")
    $( "#txtpro" ).val( data );
  });
});
</script>

No need for the 'type' attribute for the file and use a recent minimised cdn version if possible...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

or even

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Use the 'change' listener and get rid of 'event' parameter:

$( "#txtsno" ).change(function() {

Get rid of the event.preventDefault(); altogether

Change the classname identifier (.) to an id (#) as mentioned previously:

var formVal = $('#txtsno').val();

Make sure that your php file can be found at the address given (currently same directory as this file)

"data_find_ajax.php"

Ensure that the file outputs something. I'd have a test script something like this before trying to mess with any MySQL:

if(isset($_GET['id'])){
    echo "found" . $_GET['id'];
}else{
    echo "not found";
}

The result of all output of this file is your 'data' variable in the javascript here...

 .done(function( data )

So the following could be useful...

 alert(data);

In addition, I notice that you use alerts for debugging. This is all well an good, but it can get quite tedious. Have a go at logging to the console instead. This will be found somewhere in your browser. In Chrome: right-click to get the shortcut menu and choose "Inspect element" and then click on the "console" tab. Use it exactly like the alert().

console.log("hello");

console.log(data);

tqmd1 0 Junior Poster · Answer 11 · 2013-11-27T08:31:01+00:00

Sir, I need more help about your following codes

if(isset($_GET['id'])){
    echo "found" . $_GET['id'];
}else{
    echo "not found";
}

I have modify my codes as

  if (isset($_POST['data']))
    {
        // Get values from form 
        $sno =$_POST['data']; 
        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        if(!$row){
            echo "<script>alert('No record Found')</script>";
        }else{
            $productValue = $row['packing'];
            $productCode = $sno;
        } 
    }

Am I right?

diafol · Answer 12 · 2013-11-27T09:35:43+00:00

No. We're using $.get so your server-side code needs to use $_GET - that's why I used it in the example.

The only parameter passed is 'id':

$.get( "data_find_ajax.php", { id: formVal } )

So $_GET['data'] should never exist, only $_GET['id']

Also you're running javascript alerts for some reason within the ajax call. That will not work.

In addition, you are vulnerable to SQL injection as you have not used a suitable method for binding your input variable to the SQL statement. This is fundamental to security. Please research how to bind parameters with mysqli.

I don't see the $con resource link being declared anywhere, but I assume you've got an include file for that and have included prior to the code you've shown. If not, be aware that no php from page load will be carried over to this ajax script - you have to include db includes again.

    if(!$row){
        echo "<script>alert('No record Found')</script>";
    }else{
        $productValue = $row['packing'];
        $productCode = $sno;
    }

This really doesn't make any sense. The only data that you want to return is the $row['packing']

So,

...
$row = mysqli_fetch_array($result); 
echo (!$row) ? "error!" : $row['packing'];

That's it. Nothing else.

Your original js will deal with that data now...

$.get( "data_find_ajax.php", { id: formVal } ) .done(function( data ) 
{
    $('#txtpro').val(data);
});

That should be it.

tqmd1 0 Junior Poster · Answer 13 · 2013-11-27T10:20:20+00:00

Sir I have modified my codes as you said, but I am very sorry to say that these code will never work because I have very low knoweldge to deal with it.

<?php
    require_once("connect.php");
    if (isset($_GET['id']))
    {
        $sno =$_GET['id']; 
        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        echo (!$row) ? "error!" : $row['packing'];
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<!-- Style Sheet part start -->
<style type="text/css">
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style>
<!-- Style Sheet part end -->
</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="ajax_diafol.php" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <th>Code</th>
                                <th width="50px"><input type="text" name="txtsno" id="txtsno" value="" title="Enter product code" /></th>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="" title="Enter product name" ></td>
                            </tr>
                        </table>
                        <input type="submit" name="button1" value="Display" id="display">
                        <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>
<!-- Javascipt starts -->
<script src="db/Js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( "#txtsno" ).change(function() {
var formVal = $('#txtsno').val();
$.get( "ajax_diafol.php", { id: formVal } ) .done(function( data ) 
{
 $('#txtpro').val(data);
});
});
</script>
<!-- Javascript end -->
</body>
</html>

diafol · Answer 14 · 2013-11-27T11:46:34+00:00

Well, it works for me. Just to check, you did put the php into a diffrent file right? The php you show on top of the file is not in with the rest of the html/js?

<?php
    require_once("connect.php");
    if (isset($_GET['id']))
    {
        $sno =$_GET['id']; 
        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        echo (!$row) ? "error!" : $row['packing'];
    }
?>

That should be in a file by itself, with nothing else.

The file mentioned here:

$.get( "ajax_diafol.php", { id: formVal } ) .done(function( data )

should contain just this php code.

An issue I don't think you resolved was the submit button. Either have the submit button do the ajax call OR have the txtsno change event do it. If you do the latter, you still need to disable the submit button from submitting (preventdefault).

Another possible isssue is your MySQL routine. If there is an error, you may get the default php error message showing in the textbox. They usually start with...

<b>...

tqmd1 0 Junior Poster · Answer 15 · 2013-11-27T14:15:46+00:00

Sir now I am faching this error message
[IMG]http://i44.tinypic.com/2m83vnt.jpg[/IMG]
This is appearing for this line

$("#txtsno").change(function() {

I am using 3 files

1-connect.php
2-ajax_diafol.php
3-ajax_diafol2.php

Complete codes are as follows.

Connect.php

<?php
// Connection variables
$host="localhost";
$username="root";
$password="";
$db_name="asia"; 
// Connect to host
$con=mysqli_connect($host, $username, $password);

// Connect result
if(!$con){
die ('<script type="text/javascript">alert("Error Connecting to host")'. mysqli_connect_error($con).'</script>'); 
}
else
{
//echo( '<script type="text/javascript">alert("Connected")</script>');
}

// Database Selection
$sel =mysqli_select_db($con,$db_name);

// Database Selection result
if(!$sel){
die ('<script type="text/javascript">alert("Error Connecting to database")'. mysqli_connect_error($con).'</script>'); 
}
else
{
//echo ('<script type="text/javascript">alert("Database selected")</script>');
}
?>

ajax_diafol.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Display data in textboxes</title>
<style type="text/css"><!-- Style Sheet part start -->
html {
    overflow:auto;
}
body {
    background-color:#FFFFFF;
    margin:0 auto;
}
#mypopup
{
    float: left;
    width: 250px; height: 350px;
    background-color:#d5eef4 ;
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:100px;
    overflow:auto;
}
#header
{
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
}
</style> <!-- Style Sheet part end -->
</head>
<body>
    <center>
        <div id="mypopup">
            <div id="header">Search Data</div>
                <div style="margin-top:80px;">
                    <form name="form1" action="ajax_diafol2.php" method="post">
                        <table border=0; cellpadding="1" cellspacing="1" bgcolor="#CCFFFF" align="center" >
                            <tr>
                                <td>Code</td>
                                <td width="50px"><input type="text" name="txtsno" id="txtsno" value="" title="Enter product code" /></td>
                            </tr>
                            <tr>
                                <td>Product</td>
                                <td><input type="text" name="txtpro" id="txtpro" value="" title="Enter product name" ></td>
                            </tr>
                        </table>
                         <input type="reset" name="button2" value="Clear" >
                    </form>
                </div>
            </div>
    </center>

<script src="db/Js/jquery-1.7.1.min.js"></script><!-- Javascipt starts -->
<script type="text/javascript">
$("#txtsno").change(function() {
var formVal = $('#txtsno').val();
$.get( "ajax_diafol2.php", { id: formVal } ) .done(function( data ) 
{
 $('#txtpro').val(data);
});
});
</script><!-- Javascript end -->
</body>
</html>

ajax_diafol2.php

<?php
    require_once("connect.php");
    if (isset($_GET['id']))
    {
        echo("hello")
        $sno =$_GET['id']; 
        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        echo (!$row) ? "error!" : $row['packing'];
    }
?>

Please let me know what I am doing wrong now?
Thanks for providing lot of help.

diafol · Answer 16 · 2013-11-27T15:52:04+00:00

I'm assuming that the issue is with this...

<script src="db/Js/jquery-1.7.1.min.js"></script>

Are you sure that the path and filenames are correct? It sounds as though jQuery-flavoured javascript is not being recognised.

Which browser are you using? It looks suspiciously like Internet Explorer to me :(

tqmd1 0 Junior Poster · Answer 17 · 2013-11-27T16:03:26+00:00

Sir, jquery-1.7.1.min.js is on this location.
C:\wamp\www\db\Js
[IMG]http://i39.tinypic.com/2a4sqhv.jpg[/IMG]
Please check whether my pasth is correct or not.

I am using Google Chrome Browser.

diafol · Answer 18 · 2013-11-27T16:38:08+00:00

seems ok.

Have a look in the Console area of "Inspect Element" (right click) on page in Chrome.

Show what it says.

tqmd1 0 Junior Poster · Answer 19 · 2013-11-27T18:02:30+00:00

Sir, here is console

[IMG]http://i41.tinypic.com/2ywilfk.jpg[/IMG]

diafol · Answer 20 · 2013-11-27T19:05:45+00:00

As I thought, your jquery.js is not being loaded (3rd line) and therefore the jquery isn't being recognized (4th line). THis is why I suggested using a cdn version:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The reason for the failure is that it was trying to load db/db/Js/jquery... which was why I asked if the path was right or not.

You do have a frightening number of failed loads in your console. :(

tqmd1 0 Junior Poster · Answer 21 · 2013-11-27T19:39:38+00:00

Sir, I have use js refrerence as

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Now txtpro is showing this error message:

syntax error, unexpected '$sno' (T_VARIABLE), expecting ',' or ';' in C:\wamp\www\Test\ajax_dialfol2.php on line 6

and ajax_dialfo2.php is as

<?php
    require_once("connect.php");
    if (isset($_GET['id']))
    {
        echo("hello")
        $sno =$_GET['id']; 
        $record_check ="SELECT * FROM test WHERE sno = '$sno' ";
        $result=mysqli_query($con, $record_check);
        $row = mysqli_fetch_array($result); 
        echo (!$row) ? "error!" : $row['packing'];
    }
?>

I hope we are near to get solution.

tqmd1 0 Junior Poster · Answer 22 · 2013-11-27T19:49:47+00:00

CONGRATULATIONS...
Finaly we got the solution
The error was in this line

 echo("hello")

Thanks sir for helping me. May GOD give you reward. I learnt many new techniques by your helping stuff.

Thanks again

diafol · Answer 23 · 2013-11-27T20:16:08+00:00

diafol

10 Years Ago

No problem. :)

PHP to AJAX

Recommended Answers Collapse Answers

All 28 Replies

Recommended Answers