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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    30
    Thanks
    6
    Thanked 0 Times in 0 Posts

    populating a text area based on option selected in drop down

    hello guys, i have created 2 drop downs where the second one is populated based on the option selected in first drop down. i need to populate the text area when the required value is selected in the second drop down.

    mysql table - prod_name, prod_brand, prod_desc

    the prod name is chosen in the first drop down and it populates the second drop down with the different product brands. on selecting the product brand, the corresponding product description should be displayed in the text area defined already.

    just need to know how to do that....btw am new to javascript and php

    here are my codes

    add_prod.php

    Code:
    <?php
    session_start();
    include('db_connect.php');
    include('func.php');
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Add product</title>
    
    <link href="CSS/add_prod.css" rel="stylesheet" type="text/css" />
    
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    	$('#wait_1').hide();
    	$('#prod_name').change(function(){
    	  $('#wait_1').show();
    	  $('#result_1').hide();
          $.get("func.php", {
    		func: "prod_name",
    		drop_var: $('#prod_name').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
        	return false;
    	});
    });
    
    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    </script>
    
    <script type="text/javascript">
    $(document).ready(function()
    {
    $(".cat").change(function()
    {
    var id=$(this).val();
    var dataString = 'id='+ id;
    
    $.ajax
    ({
    type: "POST",
    url: "ajax.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $(".subcat").html(html);
    } 
    });
    
    });
    
    });
    </script>
    
    <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="stylized" class="myform">
    
    <form id="form" name="add_prod" method="post" action="addprod.php" enctype="multipart/form-data">
    
    <h2 align="center"><b>- Add Product -</b></h2>
    
    <h3 align="right"><a href="retailer_home.php"><img src="Images/Main Menu/home_icon.png" width="50" height="50" /></a></h3>
    
    <table width="1000" border="0">
        <tr>
        <td><p align="right">Product Name</p></td>
        <td><!--<span id="sprytextfield2">
          <input type="text" name="prod_name" id="prod_name" />
          <span class="textfieldRequiredMsg">A value is required.</span></span>-->
          <select name="prod_name" id="prod_name" class="prod_name">
          <option value="" selected="selected" disabled="disabled">Select Product Name</option>
          <?php
          getprod_name();
    	  ?>
          </select>
        </tr>
      <tr>
        <td><p align="right">Product Brand</p></td>
        <td><!--<span id="sprytextfield3">
          <input type="text" name="prod_brand" id="prod_brand" />
          <span class="textfieldRequiredMsg">A value is required.</span></span>
          <select name="prod_brand" class="prod_brand">
          </select>-->
          <span id="wait_1" style="display: none;">
       	  <img alt="Please Wait" src="Images/ajax-loader.gif"/>
          </span>
          <span id="result_1" style="display: none;"></span>
         
          </td>
      </tr>
      <tr>
        <td><p align="right">Product Description</p></td>
        <td><span id="sprytextarea1">
        <textarea name="prod_desc" id="prod_desc" cols="45" rows="5"></textarea>
        <span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
      </tr>
      <tr>
        <td><p align="right">Product Price (MRU)</p></td>
        <td><span id="sprytextfield4">
        <input type="text" name="prod_price" id="prod_price" />
        <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
      </tr>
      <tr>
        <td><p align="right">Product Category</p></td>
        <td><span id="spryselect1">
          <select name="cat" class="cat">
            <option selected="selected">--Select Category--</option>
            <?php
    			include('db_connect.php');
    			$sql=mysql_query("select id,cat_name from tblprod_cat ORDER BY id ASC");
    			while($row=mysql_fetch_array($sql))
    			{
    			$id=$row['id'];
    			$data=$row['cat_name'];
    			echo '<option value="'.$id.'">'.$data.'</option>';
    			} 
    		?>
          </select>
          <span class="selectRequiredMsg">Please select an item.</span></span></tr>
      <tr>
        <td><p align="right">Product Subcategory</p></td>
        <td><span id="spryselect2">
          <select name="subcat" class="subcat">
            <option>--Select Subcategory--</option>
          </select>
          <span class="selectRequiredMsg">Please select an item.</span></span></td>
      </tr>
      <tr>
        <td><p align="right">Product Weight/Capacity</p></td>
        <td><span id="sprytextfield5">
          <input type="text" name="prod_w_c" id="prod_w_c" />
          <span class="textfieldRequiredMsg">A value is required.</span></span></td>
      </tr>
      <tr>
        <td><p align="right">Please choose a file:</p></td>
        <td><input name="uploaded" type="file" /></td>
      </tr>
    </table>
    <p align="center">
      <input type="submit" class="button" name="button" id="button" value="<-- Add product -->"/>
    </p>
    
    </form>
    
    </div>
    <script type="text/javascript">
    var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "currency", {validateOn:["blur"]});
    var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {validateOn:["blur"]});
    var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur"], minChars:0, maxChars:500});
    var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {validateOn:["blur"]});
    var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {validateOn:["blur"]});
    </script>
    </body>
    </html>
    func.php

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getprod_name()
    {
        
    $result mysql_query("SELECT DISTINCT prod_name FROM tbl_prodstd"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
               echo 
    '<option value="'.$tier['prod_name'].'">'.$tier['prod_name'].'</option>';
            }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if(isset($_GET['func']) && $_GET['func'] == "prod_name") {  
       
    prod_name($_GET['drop_var']); 
    }

    function 
    prod_name($drop_var)
    {  
        include_once(
    'db_connect.php');
        
    $result mysql_query("SELECT * FROM tbl_prodstd WHERE prod_name='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="prod_brand" id="prod_brand">
              <option value=" " disabled="disabled" selected="selected">Choose one</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['prod_brand'].'">'.$drop_2['prod_brand'].'</option>';
                }
        
        echo 
    '</select> ';
        
    //echo '<input type="submit" name="submit" value="Submit" />';
    }
    ?>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <form id="myForm" name="myForm">
    <textarea name="myText" id="myText"></textarea>
    </form>
    
    
    <script type="text/javascript">
    document.getElementById("myText").innerHTML="This is the text.";
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,963
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    Ummm...no.

    <textarea>s *ARE* form fields. So you change them using the .value attribute, not .innerHTML.

    Proof? Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <textarea id="test"></textarea>
    
    <script type="text/javascript">
    document.getElementById("test").value = "Change the value";
    document.getElementById("test").innerHTML = "Change the innerHTML";
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hance (06-27-2013)

  • #4
    New Coder
    Join Date
    Jun 2013
    Posts
    30
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thnx for the help i managed to sort this out....now i dnt know how to close 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
    •