Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Php/Javascript Select box auto fill form

    Hi All,
    im new here and also fairly new to php. i am trying to create a form that has multiple fields being:
    Select box
    3 Textfields

    the select box is a list of suppliers and the text fields are Contact(persons name), Telephone number, Email. When the user selects a value from the select box the 3 text fields are filled in with the matching contact details(fetched from a database). The text fields need to remain editable incase a phone number/point of contact has changed.

    I have the select box fetching suppliers and supplier ID with the following.
    PHP Code:
    //Query
    $query1 "SELECT * FROM suppliers";
    $result1 mysql_query($query1) or die(mysql_error());

    //$result = mysql_query ($query);
    echo "<select name='supplier'>";

    // printing the list box select command
    while($row1=mysql_fetch_array($result1)){
        echo 
    "<option value=\"$row1[Supplier_ID]\">$row1[Supplier]</option>";
    }

    echo 
    "</select>";// Closing of list box 
    Database field names are as follows:
    Supplier_ID (Auto Increment and Primary)
    Supplier (name of)
    Contact
    Telephone
    Email

    I know I will need to use javascript to achieve what I want but i have no experience of javascript except for a couple of jquery scripts.

    any help appreciated I hope I have explained my problem clearly enough.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    There are code samples out there for what you want to do, but IMO, your first best bet would be to learn AJAX, how it works, the functions involved, etc... of course, if you don't want to, you could always use a framework like jQuery and use its AJAX functions to just skip head to that.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply, I did try searching earlier and found two examples I managed to get working. one of which was using a modified ajax module however the ajax script was for a second select box having varying values depending on what was selected in the first box. The second script was for a single text field.

    I managed to adapt the second script slightly and retrieve the select box options from the mysql database but became stuck when it was time to use javascript to populate the other text boxes that also needed to be retrieved from the database.

    I suppose it is better to start with something and ask for help so tommorow I will post as far as I got. I can retieve what i need with the php but if someone can point me in the direction of how to use javascript to populate a text field with a php variable I may be able to proceed from there.

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Well, the process for that is the core of AJAX: Use JS to call a PHP page which returns data (as JSON for example). Have the JS work that data over, figure out what you need, then use JS to populate the fields. This is where frameworks come in handy, as many JS frameworks allow you to easily add/manipulate DOM elements.

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have looked into ajax and using some sample codes I have managed to customize them but for some reason their not working.

    Page with my form on:
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">
    function 
    showSupplier(str)
    {
    if (
    str=="")
      {
      
    document.getElementById("txtHint").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==&& xmlhttp.status==200)
        {
        
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getsupplier.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <form>
    <select name="users" onChange="showSupplier(this.value)">
    <option value="">Select a person:</option>
    <option value="1">Supplier1</option>
    <option value="2">Supplier2</option>
    <option value="3">Supplier3</option>
    <option value="4">Supplier4</option>
    </select>
    </form>
    <br />
    <div id="txtHint"><b>Supplier info here</b></div>

    </body>
    </html> 
    Getsupplier.php Obviously with the missing database connection parameters
    PHP Code:
    <?php
    $q
    =$_GET["q"];

    $con mysql_connect('localhost''''');
    if (!
    $con)
      {
      die(
    'Could not connect: ' mysql_error());
      }

    mysql_select_db(""$con);

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

    $result mysql_query($sql);

    echo 
    "<table border='1'>
    <tr>
    <th>Supplier</th>
    <th>Contact</th>
    <th>Telephone</th>
    <th>Email</th>
    </tr>"
    ;

    while(
    $row mysql_fetch_array($result))
      {
      echo 
    "<tr>";
      echo 
    "<td>" $row['Supplier'] . "</td>";
      echo 
    "<td>" $row['Contact'] . "</td>";
      echo 
    "<td>" $row['Telephone'] . "</td>";
      echo 
    "<td>" $row['Email'] . "</td>";
      echo 
    "</tr>";
      }
    echo 
    "</table>";

    mysql_close($con);
    ?>

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I found a simple error in my code, having fixed that the whole thing works as it should in IE but not in Firefox. Can anyone help with why? im using firefox version 3.0.19


    Edit: I have now posted this in the ajax section as it is now an ajax problem. Thanks
    Last edited by Phil_n; 09-13-2010 at 01:48 PM.


  •  

    Posting Permissions

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