SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

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

    PHP with AJAX Scripting.

    Dear friends,
    I am coding with PHP and using AJAX to read post data read from MySQL to controls on PHP page.
    But I have a small problem.

    I can connect to MySql and read a field in a table, post the entire data of that field to the ComboBox Control on PHP page without re-loading the page (i.e., isPostBack=false).
    Pls see the code below:

    Explanation:
    From an AJAX script, it uses a php file (getparish-details.php) with a string variable (strPar) and a key (parish_d).
    When you select an item in a combo box, the onChange() event of the combo box calls the AJAX function and passes the value of your selection to the key of the function.
    The function opens the php file getparish-details.php and reads the specified data from the mysql table.
    When you read data from mysql, the getparish-details passes the data to strPar and
    the document.getElementById("txtaddress").innerHTML=""; declaration posts the data to the control whose 'id' is declared in document.getElemetById.
    This will automatically call data from the database without re-loading the php page.
    However, I have only been able to do this with combo box controls.
    The problem I have is;
    I want to post data to textbox controls instead of combo box. But I am having problems.
    Pls can you assist me.

    Thank you!

    Code:
    <script type="text/javascript">
    <!--
    // JavaScript Document
    function loadparish_details(strPar)
    {
    if (strPar=="")
      {
      document.getElementById("txtphone").innerHTML="";
      document.getElementById("txtpic").innerHTML="";
      document.getElementById("txtaddress").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("txtphone").innerHTML=xmlhttp.responseText;
    	document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
    	document.getElementById("txtaddress").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getparish-details.php?parish_d="+strPar,true);
    xmlhttp.send();
    }
    </script>
    getparish-details.php
    Code:
    <?php
    $qd=$_GET["parish_d"]; //qd is a variable that holds a key.
    //$province=$_GET['province'];
    //$region=$_GET["region"];
    
    $parish_dt = mysql_query("SELECT pic_name, address, phone FROM parish WHERE parish_name='$qd'");
    //echo "<Select id='txtpro' name='province' size='1'> ";
    while($row = mysql_fetch_array($parish_dt)){
    //echo $row['address'];
    echo '<input type="text" name="address" value="'.$row['address'].'" size="70" /><br /><br />';
    //echo '<option value="'. $row['address'].'">' . $row['address'].'</option>'; } 
    
    //echo "</select> ";
    //echo $combine;
    ?>

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Morning EasyTime,

    I can spot a problem with your PHP straight away:
    PHP Code:
    //echo '<option value="'. $row['address'].'">' . $row['address'].'</option>'; } 
    By commenting out this line, you've also commented out the closing brace for your while loop. You need to move the brace to a separate line.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, it's true...that's my mistake anyway... But that is not the problem.
    I commented out that line when I was testing the echo '<input type="text">'; without the while($row(something)){.
    When it did not work, I forgot to return it to normal... However, see the corrected code below: but that is not the problem.
    The problem is, if I
    Code:
     echo '<option value="'. $row['address'].'">' . $row['address'].'</option>';
    , it will work with combo boxes. But if I
    Code:
    echo '<input type="text" name="address" value="'.$row['address'].'" size="70" /><br /><br />';
    , it will not even report an error...it does not work.
    Pls see code below.

    getparish-details.php file
    Code:
    <?php
    $qd=$_GET["parish_d"];
    //$province=$_GET['province'];
    //$region=$_GET["region"];
    
    $parish_dt = mysql_query("SELECT pic_name, address, phone FROM parish WHERE parish_name='$qd'");
    //echo "<Select id='txtpro' name='province' size='1'> ";
    while($row = mysql_fetch_array($parish_dt)){
    //echo $row['address'];
    echo '<input type="text" name="address" value="'.$row['address'].'" size="70" /><br /><br />';}
    //echo '<option value="'. $row['address'].'">' . $row['address'].'</option>';  
    
    //echo "</select> ";
    //echo $combine;
    ?>
    php file that has the controls
    HTML Code:
    <select name="parish" id="txtparish" size="1" onchange="loadparish_details(this.value)">
    </select>

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Do you get any output if you go directly to the PHP page, e.g. getparish-details.php?parish_d=example_parish?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, the getparish-details.php actually reads the data from the mysql table and posts it. But the data does not reflect on the textbox control on the other php page.
    Meanwhile, like I said before, if I echo out combo box (<option>Item</option>), you can see the data loaded on the combo box (VB=items.add() method).
    The only problem is, it does not show the data on a textbox except on a combo box.
    Meanwhile, if I need to show the data on the combo box, I need to change the <select id='txtaddress'> so that the getElementById in the AJAX script can identify the combo box control.

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Could you post the html for the elements where the data should be output to, please (i.e. elements #txtphone, #txtpic, and #txtaddress)?

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <body>
    <div class="page">
    <div class="header">
    
     <div class="title">
    
                <table border="0" cellpadding="0" cellspacing="6" width="900px">
                <tr><td align="left" valign="top" style="width:100px;"><h1>
                <a href="/dce/"><img width="80" alt="Site Logo" height="93" src="/dce/images/mohg.gif" /></a>
                </h1></td>
                
                <td align="left" valign="top" style="width:800px;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td align="right" valign="top" style="width:inherit; color:#FFFFFF;">
    
                <img src="../images/colored5635.gif" alt="separator image" /> Contact Us:<span style="font-size:smaller; color:#fff; font-weight:bold;"> 07030602824
                </span> &nbsp;&nbsp;<img src="../images/colored5635.gif" alt="separator image" />
                Email: <span style="font-size:smaller; font-weight:bold;"><a href="mailto:info@dce.com" style="color:#fff; text-decoration:none; text-decoration:blink;">info@dce.com</a></span>            </td>
                </tr>
                <tr><td align="center" valign="top" style="width:auto;">
               <table border="0" cellpadding="0" cellspacing="0" width="800px">
               <tr>
               <td align="center" valign="middle" style="width:700px;">
    		   <h1 style="color:#fff;">Directorate <i>of</i> Christian Education</h1>
               </td>
               
               <td align="center" valign="top"><br />
               <div class="loginDisplay">
    		  
    		   
    <?php
    // Set Timezone
    date_default_timezone_set('America/New_York');
    // What day of the week is it (Mon - Sun)
    $day = date("l");
    $date = date("d . m . y");
    echo "Today is: " . $day . "<br>" . $date;
    ?> 
    		   </div></td>
               </tr>
               </table>
                </td></tr>
                </table></td>
    
                </tr>
                </table>
        </div>
                
    <div class="clear hideSkiplink">
                  <div class="menu">
    	
                  <marquee style="color:#ffffff;" behavior="scroll" direction="left" width="100%" scrollamount="2" scrolldelay="5">
            Welcome to <a href="/dce/" style="text-decoration:underline; color:#ffffff;">the RCCG, Directorate of Christian Education. </a> 
            DCE is in charge of Sunday school, House fellowship and Children/Teens Teaching of the RCCG worldwide.
                  </marquee>
    
                </div>
        </div>            
    
    </div>
    <div class="loginDisplay">
    <!-- <p align="center"> -->
     <span style="color:#003366;">
     <img src="../images/colorf6ac9b.gif" alt="separator image" /><img src="../images/colored5635.gif" alt="separator image" /> 
    [ <a href="/dce/" style="color:#003366; text-decoration:none;">Home</a> ]
    <img src="../images/colored5635.gif" alt="separator image" /><img src="../images/colorf6ac9b.gif" alt="separator image" />
    [ <a href="../about.php" style="color:#003366; text-decoration:none;">About DCE</a> ]
    <img src="../images/colored5635.gif" alt="separator image" /><img src="../images/colorf6ac9b.gif" alt="separator image" />
    [ <a href="../Accounts/register.php" style="color:#003366; text-decoration:none;">Register</a> ]
    <img src="../images/colorf6ac9b.gif" alt="separator image" /><img src="../images/colored5635.gif" alt="separator image" />
    [ <a href="../Accounts/login.php" style="color:#003366; text-decoration:none;">Login</a> ] <img src="../images/colored5635.gif" alt="separator image" /><img src="../images/colorf6ac9b.gif" alt="separator image" /> </span> <!-- </p> -->
     </div>
     
     <h1 style="margin-left:15px;">Parish  Registration Form </h1>
     <p align="justify" style="margin-left:15px; margin-right:20px;">This is the registration form for the parish. Each registered. <br />
     </p>
     <hr />
     <form id="form1" name="form1" action="confirm_parish.php" method="post" style="margin-left:15px; margin-right:20px;">
     <fieldset style="border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -moz-border-radius:5px;">
       <legend>Parish Information</legend>
       <p><b style="color:#990000;">Select Area : * </b>
       <select name="area" id="txtarea" onchange="loadparish(this.value)">
           <option value="Select your Area" selected="selected">Select your Area</option>
           <?php
    /*
    this file is used as a test file for the ajax function to load data from database without
    reloading the page. It selects query criterion from a select option box and
    passes the loaded data to another select option box.
    the ajax script function is embedded in this file and 
    the url the script sends a call to is getprovince.php.
    This ajax script uses the getElementById("") method of javascript.
    The element to be retrieved is the HTML inner element (id).
    */
    
    $load_area = mysql_query("SELECT area_number FROM _area ORDER BY area_number");
    while ($row = mysql_fetch_array($load_area)) {
      echo '<option value="'. $row['area_number'] .'">' . $row['area_number'].'</option>'; } ?>
         </select>
    &nbsp;&nbsp;&nbsp;&nbsp; <b style="color:#990000;">Parish Name : *</b>
    <select name="parish" id="txtparish" size="1" onchange="loadparish_details(this.value)">
    </select>
    &nbsp;&nbsp; <b style="color:#990000;">Month : * </b>
    <select name="month" id="txtmonth">
      <option value="Select Month" selected="selected">Select Month</option>
      <option value="January">January</option>
      <option value="February">February</option>
      <option value="March">March</option>
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
      <option value="October">October</option>
      <option value="November">November</option>
      <option value="December">December</option>
      
      <?php
    /*
    this file is used as a test file for the ajax function to load data from database without
    reloading the page. It selects query criterion from a select option box and
    passes the loaded data to another select option box.
    the ajax script function is embedded in this file and 
    the url the script sends a call to is getprovince.php.
    This ajax script uses the getElementById("") method of javascript.
    The element to be retrieved is the HTML inner element (id).
    */?>
    </select>
    <br />
    <br />
    <b style="color:#990000">Average Attendance  : *</b> <br />
    <input type="text" name="attendance" value="" class="passwordEntry" />
    <br />
    <br />
    <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" />
    <b style="color:#990000">Number of Births :</b>
    <input type="text" name="births" id="births" value="" class="passwordEntry" />
    <br />
    <br />
    <b style="color:#990000">No. of Marriages: *</b><br />
    <input type="text" name="marriages" id="marriages" value="" class="passwordEntry" />
    <b style="color:#990000">No. of Deaths  : *</b>
    <input type="text" name="deaths" id="deaths" value="" class="passwordEntry" />
    </p>
       <p><b style="color:#990000">No. of House Fellowships: *</b><br />
         <input type="text" name="hfellowships" id="hfellowships" value="" class="passwordEntry" />
         <b style="color:#990000">No. of Converts  : *</b>
         <input type="text" name="converts" id="converts" value="" class="passwordEntry" />
       </p>
     </fieldset>&nbsp;</p>
      
         <br />
         <br />
         <input name="btnRegister" type="submit" class="submitButton" onclick="MM_validateForm('parish_name','','R','address','','R','member_count','','NisNum','username','','R','email','','RisEmail','password','','R','con_password','','R');return document.MM_returnValue" value="Register" />
       </p>
     </form>
     <p></p>
     <h1 style="margin-left:15px;" class="">&nbsp;</h1>
     <h1 style="margin-left:15px;">&nbsp;</h1>
    </div>
    <div class="footer">
         <?php include_once("../footer.php");?>
       
    </div>
    </body>
    Last edited by cpradio; Jun 28, 2013 at 05:20. Reason: Added html tags


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
  •