SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  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,265
    Mentioned
    33 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,265
    Mentioned
    33 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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,265
    Mentioned
    33 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">

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 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;
    }

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

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

  10. #10
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,265
    Mentioned
    33 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.

  11. #11
    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
  •