SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face PHP with AJAX Scripting.

    Dear friends,
    I need help on this problem please.
    I have an AJAX function that calls data from mysql with a php file, then onChange event of a dropdown item, the function is executed. The called data to be loaded on other text box controls in the calling php page.

    However, the script below works well with loading data to dropdown listbox but does not work with text boxes.
    Pls find code below:

    AJAX script:

    Code:
    <script>
    function showDetails(str2)
    {
    if (str2=="")
      {
      document.getElementById("txtAddress").innerHTML="";
      document.getElementById("txtpic").innerHTML="";
      document.getElementById("txtphone").innerHTML="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtAddress").innerHTML=xmlhttp.responseText;
    	document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
    	document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
    xmlhttp.send();
    }
    </script>
    HTML that has the controls
    HTML Code:
    HTML Code:
    <select name="parish" id="txtparish" size="1" onchange="showDetails(this.value)">
    </select>
    
    <b style="color:#990000"> Parish Address : *</b><br />
    <input type="text" name="pic" id="txtAddress" class="passwordEntry" />
    <b style="color:#990000"> Name of PIC : *</b>
    <input type="text" name="pic" id="txtpic" class="passwordEntry" />
    <br />
    <br />
    <b style="color:#990000">Contact Phone Numbers :</b> <br />
    <input type="text" name="pic" id="txtphone" class="passwordEntry" />
    PHP file getparish-details.php

    PHP Code:
    PHP Code:

    <?php session_start();



    include_once (
    "../db/connString2.php");







    if (!
    $con=mysql_connect($server,$server_user,$server_pass)) {



    die(
    'Could not connect: ' mysql_error()); } 



    elseif(!
    mysql_select_db($db_name$con)) {



    die(
    "Could not connect to the database: " mysql_error()); }







    else {







    }



    ?>







    <?php



    $q
    =$_GET["parish"];



    //$q="CTL Central Parish";


    $parish mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
    while(
    $row mysql_fetch_array($parish))
    {

    //echo "This is the address of the Church<br />";

    echo $row['address'];
    echo 
    $row['pic_name'];
    echo 
    $row['phone'];

    //echo $row['address'];

    //echo '<input name="txtaddress" type="text" size="75" Readonly value="'.$row['address'].'">';

    }

    mysql_close($con);
    ?>

  2. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Hi again, Easytime.

    If you have an <input> tag, and you try to set the innerHTML property, like this:
    Code JavaScript:
    document.getElementById("txtAddress").innerHTML= "myNewValue";
    the result will be this:
    HTML Code:
    <input type="text" name="pic" id="txtAddress" class="passwordEntry">myNewValue</input>
    and the input will stay blank.

    What you need to do is set the value property, like this:
    Code JavaScript:
    document.getElementById("txtAddress").value = "myNewValue";
    and then the result will be:
    HTML Code:
    <input type="text" name="pic" id="txtAddress" class="passwordEntry" value="myNewValue">
    which works.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand what you mean. But that is not my concept. My concept is: The input box is updated automatically. That is, when I make a selection from a dropdown box, the onChange event calls a function. The function reads data and updates the input box with the data using the elementID of the input box.

    Pls more ideas.
    Thanks.

  4. #4
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    I think there is a communication problem here.. I understand exactly what you're saying, and I'm trying to explain to you why your code isn't working, using examples.

    Take a look at the code that you posted earlier:
    Code JavaScript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtAddress").innerHTML=xmlhttp.responseText; // Here is the problem
    	document.getElementById("txtpic").innerHTML=xmlhttp.responseText;  // and here
    	document.getElementById("txtphone").innerHTML=xmlhttp.responseText; // and here
        }
      }

    Do you not see what I'm talking about? You're setting document.getElementById("txtAddress").innerHTML but it will not give you the result you want, and I explained why in my previous post.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at the code below
    Code:
    <script>
    function showDetails(str2)
    {
    if (str2=="")
      {
      document.getElementById("txtAddress").innerHTML="";
    //  document.getElementById("txtpic").innerHTML="";
    //  document.getElementById("txtphone").innerHTML="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtAddress").innerHTML=xmlhttp.responseText;
    //	document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
    //	document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
        }
    code below
    HTML Code:
    <select name="parish" id="txtparish" size="1" onchange="showDetails(this.value)">
    </select>
    <b style="color:#990000"> Parish Address : *</b><br />
    <select name="address" id="txtAddress" class="passwordEntry"></select>
    Commenting out two lines,
    and using select boxes in the html below, and adjusting the php code below,
    PHP Code:
    <?php 



    $q
    =$_GET["parish"]; 



    //$q="CTL Central Parish"; 


    $parish mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'"); 
    while(
    $row mysql_fetch_array($parish)) 


    //echo "This is the address of the Church<br />"; 

    echo '<option value="'$row['address']. '">'$row['address']. '</option>';




    mysql_close($con); 
    ?>
    works well with combo boxes. But it does not work with text boxes. Why?

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Easytime,

    Maybe it would help if we could see what is being returned by your AJAX call.
    Please log responseText to the console and let us know what you get.

    E.g.

    Code JavaScript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
     
    console.log(responseText); 
     
    //     document.getElementById("txtAddress").innerHTML=xmlhttp.responseText;
    //	document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
    //	document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
    }

  7. #7
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Easytime View Post
    works well with combo boxes. But it does not work with text boxes. Why?
    Because if you have a <select> tag then setting the innerHTML property makes sense. Lets say you have the following HTML:
    HTML Code:
    <select id="fruit" name="fruit"></select>
    and in your JS, you do this:
    Code JavaScript:
    document.getElementById("fruit").innerHTML = "<option value='oranges'>Oranges</option>";
    You'll end up with HTML that looks like this:
    HTML Code:
    <select id="fruit" name="fruit">
        <option value='oranges'>Oranges</option>
    </select>
    Setting innerHTML in an input tag doesn't work because the tag works differently. Inputs don't have opening and closing tags:
    HTML Code:
    // This is wrong
    <input type="text">My value</input>
    
    // This is correct
    <input type="text" value="My Value">

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so, with your explanation, what can be done to parse data from a variable to an input box? What should I do to overcome this problem? You know that if I were to design a desktop app, this will work very well without any itches...but I dont want to design a desktop app for the application that I am designing. I need to make it a browser-based app... that''s y am using php and mysql to develop it. Pls help, thanks.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Easytime,

    fretburner has answered your question several times now.
    What part of his answer are you having trouble with?

    Quote Originally Posted by Easytime View Post
    what can be done to parse data from a variable to an input box?
    This:

    Code JavaScript:
    document.getElementById("txtAddress").value = "myNewValue";

    Just use the value attribute, not innerHTML

    N.B. Where I have written "myNewValue", you will have to retrieve the appropriate value from xmlhttp.responseText.

    If you need help doing this, please post what xmlhttp.responseText is returning, as per my previous post.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Oh! I now get what you are saying.
    I have done that (pls see code below); but it has not changed anything... No response, no errors, no actions, nothing.
    Pls see script code and php codes below.

    Thanks
    Code:
    <script>
    function showDetails(str2)
    {
    if (str2=="")
      {
      document.getElementById("txtAddress").value="";
      document.getElementById("txtpic").value="";
      document.getElementById("txtphone").value="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtAddress").value=xmlhttp.responseText;
    	document.getElementById("txtpic").value=xmlhttp.responseText;
    	document.getElementById("txtphone").value=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
    xmlhttp.send();
    }
    </script>
    php form that calls the function
    HTML Code:
    <b style="color:#990000"> Parish Address : *</b><br />
    <input type="text" name="address" id="txtaddress" value="" class="passwordEntry" />
    <b style="color:#990000"> Name of PIC : *</b>
    <input type="text" name="pic" id="txtpic" value="" class="passwordEntry" />
    <br />
    <br />
    <b style="color:#990000">Contact Phone Numbers :</b> <br />
    <input type="text" name="phone" id="txtphone" value="" class="passwordEntry" />
    getparish-details.php
    PHP Code:
    <?php session_start();
    include_once (
    "../db/connString2.php");

    if (!
    $con=mysql_connect($server,$server_user,$server_pass)) {
    die(
    'Could not connect: ' mysql_error()); } 
    elseif(!
    mysql_select_db($db_name$con)) {
    die(
    "Could not connect to the database: " mysql_error()); }

    else {

    }
    ?>

    <?php
    $q
    =$_GET["parish"];
    //$q="CTL Central Parish";

    $parish mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
    while(
    $row mysql_fetch_array($parish))
    {
    //echo "This is the address of the Church<br />";
    echo '<input type="text" name="address" value="'$row['address']. '" />';
    echo 
    '<input type="text" name="pic" value="'$row['pic_name']. '" />';
    echo 
    '<input type="text" name="phone" value="'$row['phone']. '" />';
    }
    mysql_close($con);

    ?>
    I tried it again, here is the output:

    <input type="text" name="address" value="1-5, Admiral Road, Lekki Phase 1" />

    It is the same output for all three input boxes.

  11. #11
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    In the other thread, I gave you one possible solution to this using JSON. You could also do it like this:

    getparish-details.php
    PHP Code:
    while($row mysql_fetch_array($parish)) 

       echo 
    $row['address'] . '|' $row['pic_name'] . '|' $row['phone'];  

    (Note that I've only shown the code that needs to be changed)
    This will output a string, with all three pieces of data separated by the pipe (|) character.

    Then, in your JS, you would make this change:
    Code JavaScript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var values = xmlhttp.responseText.split('|');
        document.getElementById("txtAddress").value = values[0];
        document.getElementById("txtpic").value = values[1];
        document.getElementById("txtphone").value = values[2];
    }
    This takes the string that is returned by the server, and splits it into an array. The correct values are then assigned to each input.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have copied your code as is and pasted it in my code, it does not show any change.
    Pls see the code below:
    Code:
    <script>
    function showDetails(str2)
    {
    if (str2=="")
      {
      document.getElementById("txtaddress").value="";
      document.getElementById("txtpic").value="";
      document.getElementById("txtphone").value="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
     /* if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtaddress").value=xmlhttp.responseText;
    	document.getElementById("txtpic").value=xmlhttp.responseText;
    	document.getElementById("txtphone").value=xmlhttp.responseText;
        }*/
    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var values = xmlhttp.responseText.split('|');
        document.getElementById("txtAddress").value = values[0];
        document.getElementById("txtpic").value = values[1];
        document.getElementById("txtphone").value = values[2];
    }
      }
    xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
    xmlhttp.send();
    }
    </script>
    getparish-details.php
    PHP Code:
    <?php
    $q
    =$_GET["parish"];
    //$q="CTL Central Parish";

    $parish mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");

    while(
    $row mysql_fetch_array($parish))  
    {  
       echo 
    $row['address'] . '|' $row['pic_name'] . '|' $row['phone'];   
    }  
    mysql_close($con);

    ?>
    What else should I do please?

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally, I tried something else like the code below and it worked; but the output was replicated to all the input boxes defined in the script.
    Code:
    <script>
    function showDetails(str2)
    {
    if (str2=="")
      {
      document.getElementById("txtaddress").value="";
      document.getElementById("txtpic").value="";
      document.getElementById("txtphone").value="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtaddress").value=xmlhttp.responseText;
    	document.getElementById("txtpic").value=xmlhttp.responseText;
    	document.getElementById("txtphone").value=xmlhttp.responseText;
        }
    /*	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var values = xmlhttp.responseText.split('|');
        document.getElementById("txtAddress").value = values[0];
        document.getElementById("txtpic").value = values[1];
        document.getElementById("txtphone").value = values[2];
    }*/
      }
    xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
    xmlhttp.send();
    }
    </script>
    PHP Code:
    <?php
    $q
    =$_GET["parish"];
    //$q="CTL Central Parish";
    $parish mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
    //$parish_add = mysql_query("SELECT address FROM parish WHERE parish_name='$q'");
    //$parish_pic = mysql_query("SELECT pic_name FROM parish WHERE parish_name='$q'");
    //$parish_phn = mysql_query("SELECT phone FROM parish WHERE parish_name='$q'");


    while($row mysql_fetch_array($parish))  
    {  
       echo 
    $row['address'];// . '|' . $row['pic_name'] . '|' . $row['phone'];   
    }  

    mysql_close($con);

    ?>
    Pls can u help from this point? Thank you. Here is the output below:

    on txtaddress input field:
    '1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673'

    on txtpic input field:
    '1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673'

    on txtphone input field:
    '1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673'

  14. #14
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Are you using Internet Explorer, by any chance?

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NOO! I use chrome, firefox new released versions.

  16. #16
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Easytime View Post
    NOO! I use chrome, firefox new released versions.
    OK, just checking

    The problem is a small typo.
    You need to change back to the JS that I gave you, but make sure that the first ID is 'txtaddress' not 'txtAddress':
    Code JavaScript:
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var values = xmlhttp.responseText.split('|');
        document.getElementById("txtaddress").value = values[0]; // Needs to be a lowercase 'a' to match your HTML
        document.getElementById("txtpic").value = values[1];
        document.getElementById("txtphone").value = values[2];
    }
    I've tested this in my browser, so I know it works.

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's correct! It works. Thanks so much. But, there is a problem! Do I always have to split the values into an array before I can echo it? What if I have more than 5 input boxes to, is there no way I can create a counter to check for number of input boxes? Thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •