SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing form submission method - AJAX

    Hi,

    This is just about my first time doing anything in AJAX. I found a tutorial online and had some fun playing about with it, however I have come across a problem when trying to change the method of submitting data.

    The original page is:

    Code HTML4Strict:
    <html>
    <head>
    <script src="selectuser.js"></script>
    </head>
    <body>
     
    <form> 
    Select a User:
    <select name="users" onchange="showUser(this.value)">
    <option value="1">Peter Griffin</option>
    <option value="2">Lois Griffin</option>
    <option value="3">Glenn Quagmire</option>
    <option value="4">Joseph Swanson</option>
    </select>
    </form>
     
    <p>
    <div id="txtHint"><b>User info will be listed here.</b></div>
    </p>
     
    </body>
    </html>

    however I wanted the data to display when a button was pressed so changed it to:

    Code HTML4Strict:
    <html>
    <head>
    <script src="selectuser.js"></script>
    </head>
    <body>
     
    <form> 
    Select a User:
    <select name="users">
    <option value="1">Peter Griffin</option>
    <option value="2">Lois Griffin</option>
    <option value="3">Glenn Quagmire</option>
    <option value="4">Joseph Swanson</option>
    <INPUT TYPE=BUTTON OnClick="showUser(this.value);" VALUE="Display">
    </select>
    </form>
     
    <p>
    <div id="txtHint"><b>User info will be listed here.</b></div>
    </p>
     
    </body>
    </html>

    The other 2 pages are:

    Code JavaScript:
    var xmlHttp
     
    function showUser(str)
    { 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request")
     return
     }
    var url="getuser.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
    }
     
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
     document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
     } 
    }
     
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     //Internet Explorer
     try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
     catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
    return xmlHttp;
    }

    and

    PHP Code:
    <?php
    $q
    =$_GET["q"];

    $dbhostname "localhost";
    $dbdatabase "ajaxdemo";
    $dbusername "*****";
    $dbpassword "*****";
    $fgconnection mysql_pconnect($dbhostname$dbusername$dbpassword) or die(mysql_error());
    @
    mysql_select_db($dbdatabase) or die("Database error (error 1)");

    $sql="SELECT * FROM user WHERE id = '".$q."'";

    $result mysql_query($sql);

    echo 
    "<table border='1'>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Hometown</th>
    <th>Job</th>
    </tr>"
    ;

    while(
    $row mysql_fetch_array($result))
     {
     echo 
    "<tr>";
     echo 
    "<td>" $row['FirstName'] . "</td>";
     echo 
    "<td>" $row['LastName'] . "</td>";
     echo 
    "<td>" $row['Age'] . "</td>";
     echo 
    "<td>" $row['Hometown'] . "</td>";
     echo 
    "<td>" $row['Job'] . "</td>";
     echo 
    "</tr>";
     }
    echo 
    "</table>";

    ?>
    It sort of works as the table that is meant to display the data does show up, however none of the data is pulled from the database. If anyone could help out I'd really appreciate it.

    Thanks.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the javascript in the button's onclick is wrong. You are passing "Display" as the value each time, which is why you are not getting any results (unless you were to create a record in the DB under Display).

    I'd give your drop down list an id and access it like that:

    Code:
    <select name="users" id="users">
    <option value="1">Peter Griffin</option>
    <option value="2">Lois Griffin</option>
    <option value="3">Glenn Quagmire</option>
    <option value="4">Joseph Swanson</option>
    <INPUT TYPE=BUTTON OnClick="showUser(this.value);" VALUE="Display"> 
    <INPUT TYPE=BUTTON OnClick="showUser(document.getElementById('users').value);" VALUE="Display using Drop Down List">


  3. #3
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for this, I now understand in principle how this is meant to work. For some reason however nothing is now happening when I click the button. Any idea what else might need to be done?

    Thanks

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this could be a number of things. You may have more than one element with the id "users" or it could be that document.getElementById('users').value isn't working properly.

    Try changing

    showUser(document.getElementById('users').value)

    to

    showUser(document.getElementById('users').options[document.getElementById('users').selectedIndex].value);


  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Move your <input type="button"> outside of the <select>. It's in there with all the options right now and who knows what that might cause.

    As long as the button is within the form tags I'd set its javascript like this:
    Code:
    <input type="button" value="Display" onclick="showUser(this.form['users'].value);return false;" />

  6. #6
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Move your <input type="button"> outside of the <select>. It's in there with all the options right now and who knows what that might cause.

    As long as the button is within the form tags I'd set its javascript like this:
    Code:
    <input type="button" value="Display" onclick="showUser(this.form['users'].value);return false;" />
    Thanks, this worked perfectly. I appreciate it.


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
  •