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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Populating multiple fields using ajax/javas

    Hey peeps i've been crawling around net for ages looking for some code to populate 5 fields with info from the database without the page being refreshed.

    the information is supposed to be called once the user selects a name from a dropdown list.

    I've got the dropdown list populated by using PHP.

    the code i have got so far is:

    staff.php:
    PHP Code:
    <script type="text/javascript">
            $("#modify").bind("change", function(e){
            $.getJSON("127.0.0.1/lookup.php?modify=" + $("#modify").val(),
                function(data){
                  $.each(data, function(i,item){
                    if (item.field == "food_name") {
                      $("#food_name").val(item.value);
                    } else if (item.field == "food_info") {
                      $("#food_info").val(item.value);
                    } else if (item.field == "food_nutrition") {
                      $("#food_nutrition").val(item.value);
                    } else if (item.field == "food_price") {
                      $("#food_price").val(item.value);
                    }
                  });
                });
            });
        </script>
    </head>
    <body>
    <?php
        
    include 'database/config.php';
        include 
    'database/opendb.php';
    ?>
    <div id="container">
    <div id="header">
    </div>
    <div id="main">
        <form name="modify">
            <select id="modify" name="modify" placeholder="Select food type name to modify">
            <option value="Select_to_modify">Select to modify</option>
            <?php
                $query  
    "SELECT name FROM food";
                
    $r mysql_query($query);

                while(
    $row mysql_fetch_array($rMYSQL_ASSOC))
                {
                    echo 
    "<option>{$row['name']}</option>";
                }            
            
    ?>        
            </select>
            <input id="food_type" name="food_type" />
            <input id="food_name" name="food_name" />
            <textarea rows="10" cols="30" maxlength="255" id="food_info" name="food_info" ></textarea>
            <input id="food_nutrition" name="food_nutrition" />
            <input id="food_price" name="food_price" />
        </form>
    <?php
        
    include 'database/closedb.php';
    ?>
    lookup.php
    PHP Code:
    <?php
    //look up the record based on modify and get the food name, food info, nutrition & price
    $field  "SELECT type, name, info, nutrition, price FROM food";

    //build the JSON array for return
    $json = array(array('field' => 'type'
                        
    'value' => $food_type), 
                  array(
    'field' => 'name'
                        
    'value' => $food_name)
                  array(
    'field' => 'info'
                        
    'value' => $food_info)
                  array(
    'field' => 'nutrition'
                        
    'value' => $food_nutrition)
                   array(
    'field' => 'price'
                        
    'value' => $food_price));
    echo 
    json_encode($json );
    ?>
    Also im not sure if it could just be the lookup.php as im clueless when in comes to JS or ajax as not sure how to get the information im calling into the JSON array.

    If you need anymore information then just let me know ill be on till around 17:00 GMT today

  • #2
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Done it i just used the example from w3schools and that solved it. if know anyone would like to see the working code let me

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am currently doing something very similar to what you've done. I have more fields to populate and I am very interested on seeing how you got it to work, if you wouldn't mind.

  • #4
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ehauser View Post
    I am currently doing something very similar to what you've done. I have more fields to populate and I am very interested on seeing how you got it to work, if you wouldn't mind.
    I didnt use JSON in the end i think it was ajax i used here is the code anyway

    Code:
    <script type="text/javascript">
    	<!-- hide from old browsers 
    		function showFood(str)
    		{
    		
    		if (str=="")
    		  {
    		  document.getElementById("txtFHint").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("txtFHint").innerHTML=xmlhttp.responseText;
    			}
    		  }
    		
    		xmlhttp.open("GET","include/lookup-food.php?q="+(encodeURIComponent(str)),true);
    		xmlhttp.send();
    		}
    	//-->
    	</script>
    and to poputlate the form i just echoed the form with the values containing the data.

    eg

    Code:
    sql="SELECT * FROM food WHERE name = '".$q."'";
    <div class='modify_form'>
    		<label for='foodName'>Name:</label> <br />
    		<input name='foodName".$row['id']."' size='30' value='{$row['name']}' />
    		</div>

  • #5
    Regular Coder Arcticwarrio's Avatar
    Join Date
    May 2012
    Location
    UK
    Posts
    727
    Thanks
    20
    Thanked 85 Times in 85 Posts
    i also use this for multiple fields:

    PHP Code:
    <script type="text/javascript">
    function 
    showCustomer(str){
    if (
    str==""){
      
    document.getElementById("Customer").value="";
      return;
      }
    if (
    window.XMLHttpRequest){
        
    xml1http=new XMLHttpRequest();
        
    xml2http=new XMLHttpRequest();
        }
    else {
        
    xml1http=new ActiveXObject("Microsoft.XMLHTTP");
        
    xml2http=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xml1http.onreadystatechange=function(){
      if (
    xml1http.readyState==&& xml1http.status==200){document.getElementById("Customer").value=xml1http.responseText;}
      }
    xml2http.onreadystatechange=function(){
      if (
    xml2http.readyState==&& xml2http.status==200){document.getElementById("DelName").value=xml2http.responseText;}
      }
    xml1http.open("GET","cus_look.php?s=1&q="+str,true);
    xml1http.send();
    xml2http.open("GET","cus_look.php?s=2&q="+str,true);
    xml2http.send();
    }
    </script> 

    EDIT


    also the modified code for query:

    PHP Code:
    <?php
    include ("../includes/session.php");
    include (
    "../includes/db.php");
    include (
    "../includes/functions.php");
    $q=$_GET["q"];
    switch (
    $_GET["s"]){
        case 
    1:
        
            
    $result Q("SELECT * FROM  customer__data WHERE CustomerCode = '".$q."'");
            while(
    $row mysql_fetch_array($result)){
            echo 
    $row['CustomerName'];
            }
            break;
            
        case 
    2:

            
    $result Q("SELECT * FROM  customer__data WHERE CustomerCode = '".$q."'");
            while(
    $row mysql_fetch_array($result)){
            echo 
    $row['CustomerID'];
            }
            break;
    }
    ?>
    Last edited by Arcticwarrio; 07-27-2012 at 04:45 PM.


  •  

    Tags for this Thread

    Posting Permissions

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