www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 33

Thread: Dynamically populate text box through drop down box

  1. #16
    Join Date
    Feb 2009
    Posts
    34
    Actually it is working unpredictable
    Would appreciate a fix
    When I input an amount into the field it starts a calculation but the value is incorrect
    Would appreciate help

  2. #17
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Arrow

    Try this revision:

    In the future put you program between [ code] [ /code] (without spaces) tags
    to make it easier for forum readers to read and not require reformatting of code.

    Also would be a good idea to start your own NEW thread with new requests.
    I'm sure you will get a quicker response.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>DD Sums</title>
    
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Cities
    ////////////////////////////////////////////////////////////////////////////////////////
    var CityCourierCost = [
     ['Please select your City',''],
     ['Cape Town','200'],
     ['JHB','600']
    //['Witbank','amount']
    ];
    
    function SetupCity() {
      var str = "<select id='City' onchange='CityInfo()'>";
      for (var i=0; i<CityCourierCost.length; i++) {
        str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
      }
      str +='</select>';
      document.write(str);
    }
    function CityInfo() {
      var sel = document.getElementById('City').selectedIndex; 
      var tmp = []; tmp.push(sel);
      for (var i=1; i<CityCourierCost.length; i++) { tmp.push(CityCourierCost[sel][i]); }
      document.getElementById('CourierCost').value = tmp[1];
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Products
    ////////////////////////////////////////////////////////////////////////////////////////
    var ProductItemCost = [
     ['Please select your Product',''],
     ['Alpine','1200'],
     ['Surento','800']
    //['Witbank','amount']
    ];
    
    function SetupProduct() {
      var str = "<select id='Product' onchange='ProductInfo()'>";
      for (var i=0; i<ProductItemCost.length; i++) {
        str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
      }
      str +='</select>';
      document.write(str);
    }
    function ProductInfo() {
      var sel = document.getElementById('Product').selectedIndex;
      var tmp = []; tmp.push(sel);
      for (var i=1; i<ProductItemCost.length; i++) { tmp.push(ProductItemCost[sel][i]); }
      document.getElementById('ProductCost').value = tmp[1];
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Calculation
    ////////////////////////////////////////////////////////////////////////////////////////
    function calc() {
      var one = Number(document.getElementById('CourierCost').value);
      if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; }
      var two = Number(document.getElementById('ProductCost').value);
      if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; }
      document.getElementById('results').value = one + two;
    }
    
    </script>
    
    </head>
    <body>
    <form name="theform" action="" method='post' onsubmit="return false">
    <table width="651" height="105">
    
    <tr>
    <td width="101" height="24">City</td>
    <td width="207">
    <script type="text/javascript">SetupCity();</script>
    </td>
    <td width="51">Amount</td>
    <td width="272">
    <input type="text" name="City" id="CourierCost" size="10" value="">
    </td>
    </tr>
    
    <tr>
    <td height="21">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr>
    <td height="24">Product</td>
    <td>
    <script type="text/javascript">SetupProduct()</script></td>
    <td>Amount</td>
    <td><input type="text" name="ProductCost" id="ProductCost" size="10" value="">
    </td>
    </tr>
    
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td height="24">
    <button onClick="calc()">Calculate</button>
    </td>
    <td><input type="text" name="sum" value="" id="results" style="border:1px;" readonly></td>
    </tr>
    
    </table>
    </form>
    </body>
    </html>

  3. #18
    Join Date
    Feb 2009
    Posts
    34
    Thanks and sorry for the code misunderstanding

    I tried you version and it does calculate but it also starts posting the form when I click the calculate button.

    Any Ideas

  4. #19
    Join Date
    Feb 2009
    Posts
    34
    here is my latest version

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Cities
    ////////////////////////////////////////////////////////////////////////////////////////
    // Name,Line1,Line2,Line3,Line4,Line5,Dell,Tel,FAX,FaxEmail,Email,Webpage
    var CityCourierCost = [
     ['Please select your City','',''],
     ['Cape Town','200','Cape Town'],
      ['JHB','600','JHB']
     //['Witbank','amount']
    ];
    function SetupCity(TA) {
     var str = "<select id='City' onchange='CityInfo()'>";
     for (var i=0; i<CityCourierCost.length; i++) {
       str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
     }
     str +='</select>';
     document.write(str);
    }
    
    function CityInfo() {
     var sel = document.getElementById('City').selectedIndex;
     var tmp = [];  tmp.push(sel);
     for (var i=1; i<3; i++) { tmp.push(CityCourierCost[sel][i]); }
     document.getElementById('CourierCost').value = tmp[1];
      document.getElementById('CityName').value = tmp[2];
     
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Products
    ////////////////////////////////////////////////////////////////////////////////////////
    
    var ProductItemCost = [
     ['Please select your Product','',''],
     ['Alpine','1200','Alpine'],
     ['Surento','800','Surento']
     //['Witbank','amount']
    ];
    function SetupProduct(TA) {
     var str = "<select id='Product' onchange='ProductInfo()'>";
     for (var i=0; i<ProductItemCost.length; i++) {
       str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
     }
     str +='</select>';
     document.write(str);
    }
    
    function ProductInfo() {
     var sel = document.getElementById('Product').selectedIndex;
     var tmp = [];  tmp.push(sel);
     for (var i=1; i<3; i++) { tmp.push(ProductItemCost[sel][i]); }
     document.getElementById('ProductCost').value = tmp[1];
     document.getElementById('ProductName').value = tmp[2];
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Calculation
    ////////////////////////////////////////////////////////////////////////////////////////
    
    
    function calc() {
      var one = Number(document.getElementById('CourierCost').value);
      if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; }
      var two = Number(document.getElementById('ProductCost').value);
      if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; }
      document.getElementById('results').value = one + two;
    }
    
    </script>
    
    
    </head>
    
    <body>
    <form name="theform" action="http://www.hashemian.com/tools/form-grabber.php" method="post">
      <table width="863" height="131">
        <tr>
          <td width="90" height="24">City</td>
          <td width="193"><script type="text/javascript">SetupCity();</script></td>
          <td width="183">City Selected:</td>
          <td width="377"><input  type="text" name="CityName" id="CityName" size="40" value="" ></td>
        </tr>
        <tr>
          <td height="21">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Courier Cost</td>
          <td><input  type="text" name="CityCourierCost" id="CourierCost" size="40" value="" onChange="calc(this.value,'CourierCost','result')"></td>
        </tr>
        <tr>
          <td height="24">Product</td>
          <td><script type="text/javascript">SetupProduct();</script></td>
          <td>Product Selected</td>
          <td><input type="text" name="ProductName" id="ProductName" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
        </tr>
        <tr>
          <td height="24">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Product Cost</td>
          <td><input type="text" name="ProductCost" id="ProductCost" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
        </tr>
        <tr>
          <td height="24">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Total Amount <button onClick="calc()">Calculate</button></td>
          <td><input type="text" name="sum" value="" id="results" style="border:1px;" readonly> 
            all inclusive</td>
        </tr>
      </table>
    </form>
    </body>
    </html>

  5. #20
    Join Date
    Feb 2009
    Posts
    34
    Another Question
    How can I insert Optgroups in your code
    Say for instance i have this list of cities
    Code:
    var CityCourierCost = [
     ['Please select your City','',''],
     ['Cape Town','200','Cape Town'],
      ['JHB','600','JHB']
     //['Witbank','amount']
    ];
    and I want to group them with optgroup for various cities
    I know how optgroup works, I just want to know how I would implement it into the javascripts

    Thanks

  6. #21
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Question More information required ...

    Thanks and sorry for the code misunderstanding

    I tried you version and it does calculate but it also starts posting the form when I click the calculate button.

    Any Ideas
    One question at a time please.

    You modified your current code so that it does not match what I provided.
    Add to your <form> tag the onsubmit="return false" unless you add some
    validation code before the submit, like: onsubmit="return validateCosts()"

    Another Question
    How can I insert Optgroups in your code
    Say for instance i have this list of cities
    Code:

    var CityCourierCost = [
    ['Please select your City','',''],
    ['Cape Town','200','Cape Town'],
    ['JHB','600','JHB']
    //['Witbank','amount']
    ];

    and I want to group them with optgroup for various cities
    I know how optgroup works, I just want to know how I would implement it into the javascripts

    Thanks
    I don't understand what you want.
    Please clarify with an example.

  7. #22
    Join Date
    Feb 2009
    Posts
    34
    Hi Jmrker
    I think the best way for the calculation to work is with onchange event or something
    the "return false" makes my form unpostable

    On the example of the dropdown with groups
    here it is

    Code:
    <select name="Other City" id="citylist" style="WIDTH: 280px" >
       <option selected="selected" value="">Please Select</option>
         <optgroup label="Eastern Cape">
          <option value="EC - Algoapark">Algoapark</option>
          <option value="EC - Aliwal north">Aliwal North</option>
          <option value="EC - Bethelsdorp">Bethelsdorp</option>
          <option value="EC - Butterworth">Butterworth</option>
       </optgroup>
       <optgroup label="Free State">
          <option value="FS - Bloemfontein">Bloemfontein</option>
          <option value="FS - botshabelo">Botshabelo</option>
          <option value="FS - Brackenhurst">Brackenhurst</option>
       </optgroup>
    </select>
    So there are 9Provinces in South Africa and many Cities per province so I want to use your javascript code, but after a certain amount of cities I want to insert an optgroup label in the drop down same as the example. At the moment my Cities are setup by the Javascript so I don't know how to put html code into the javascripts.

    Thanks for the help

  8. #23
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Lightbulb

    Quote Originally Posted by JPM View Post
    Hi Jmrker
    I think the best way for the calculation to work is with onchange event or something
    the "return false" makes my form unpostable

    On the example of the dropdown with groups
    here it is
    ...
    So there are 9Provinces in South Africa and many Cities per province so I want to use your javascript code, but after a certain amount of cities I want to insert an optgroup label in the drop down same as the example. At the moment my Cities are setup by the Javascript so I don't know how to put html code into the javascripts.

    Thanks for the help
    Can be changed to calculate with onChange event, but that's not what's making it "unpostable"

    Add a validate function that makes sure that all required entries are entered.
    If not, then you might get a product cost but the user might forget to get charged for a courier cost.
    This could be incorporated into the calc() function.
    Return 'TRUE' if all goes well and 'FALSE' if not.
    Code:
    function calc() {
      var one = Number(document.getElementById('CourierCost').value);
      if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; return false; }
      var two = Number(document.getElementById('ProductCost').value);
      if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; return false; }
      document.getElementById('results').value = one + two;
      return true;
    }
    Then the <form> tag will look like:
    Code:
    <form name="theform" action="http://www.hashemian.com/tools/form-grabber.php"
     method="post" onsubmit="return calc()">

  9. #24
    Join Date
    Feb 2009
    Posts
    34
    Hi I've got it like this at the moment

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Cities
    ////////////////////////////////////////////////////////////////////////////////////////
    // Name,Line1,Line2,Line3,Line4,Line5,Dell,Tel,FAX,FaxEmail,Email,Webpage
    var CityCourierCost = [
     ['Please select your City','',''],
     ['Cape Town','200','Cape Town'],
      ['JHB','600','JHB']
     //['Witbank','amount']
    ];
    function SetupCity(TA) {
     var str = "<select id='City' onchange='CityInfo()'>";
     for (var i=0; i<CityCourierCost.length; i++) {
       str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
     }
     str +='</select>';
     document.write(str);
    }
    
    function CityInfo() {
     var sel = document.getElementById('City').selectedIndex;
     var tmp = [];  tmp.push(sel);
     for (var i=1; i<3; i++) { tmp.push(CityCourierCost[sel][i]); }
     document.getElementById('CourierCost').value = tmp[1];
      document.getElementById('CityName').value = tmp[2];
     
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Products
    ////////////////////////////////////////////////////////////////////////////////////////
    
    var ProductItemCost = [
     ['Please select your Product','',''],
     ['Alpine','1200','Alpine'],
     ['Surento','800','Surento']
     //['Witbank','amount']
    ];
    function SetupProduct(TA) {
     var str = "<select id='Product' onchange='ProductInfo()'>";
     for (var i=0; i<ProductItemCost.length; i++) {
       str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
     }
     str +='</select>';
     document.write(str);
    }
    
    function ProductInfo() {
     var sel = document.getElementById('Product').selectedIndex;
     var tmp = [];  tmp.push(sel);
     for (var i=1; i<3; i++) { tmp.push(ProductItemCost[sel][i]); }
     document.getElementById('ProductCost').value = tmp[1];
     document.getElementById('ProductName').value = tmp[2];
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    					//                  Calculation
    ////////////////////////////////////////////////////////////////////////////////////////
    
    
    //function calc() {
    //  var one = Number(document.getElementById('CourierCost').value);
    //  if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; }
    //  var two = Number(document.getElementById('ProductCost').value);
    //  if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; }
    //  document.getElementById('results').value = one + two;
    //}
    
    
    function startCalc(){
      interval = setInterval("calc()",1);
    }
    function calc(){
      one = document.theform.CityCourierCost.value;
      two = document.theform.ProductCost.value; 
      if (isNaN(one)) { alert('Invalid entry: Product Cost'); two=0; return false; }
      document.theform.Total.value = (one * 1) + (two * 1);
      return true;
    
    }
    function stopCalc(){
      clearInterval(interval);
    }
    //-->
    
    
    </script>
    
    
    </head>
    
    <body onLoad="document.theform.Total.focus()" >
    <form name="theform" action="http://www.hashemian.com/tools/form-grabber.php" method="post" onsubmit="return calc()">
      <table width="863" height="131">
        <tr>
          <td width="90" height="24">City</td>
          <td width="193"><script type="text/javascript">SetupCity();</script></td>
          <td width="183">City Selected:</td>
          <td width="377"><input  type="text" name="CityName" id="CityName" size="40" value="" ></td>
        </tr>
        <tr>
          <td height="21">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Courier Cost</td>
          <td><input  type="text" name="CityCourierCost" id="CourierCost" size="40" value=""  onBlur="startCalc();" readonly ></td>
        </tr>
        <tr>
          <td height="24">Product</td>
          <td><script type="text/javascript">SetupProduct();</script></td>
          <td>Product Selected</td>
          <td><input type="text" name="ProductName" id="ProductName" size="40" value=""  ></td>
        </tr>
        <tr>
          <td height="24">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Product Cost</td>
          <td><input type="text" name="ProductCost" id="ProductCost" size="40" value=""   onBlur="startCalc();" readonly ></td>
        </tr>
        <tr>
          <td height="24">&nbsp;</td>
          <td>&nbsp;</td>
          <td>Total Amount</td>
          <td><input type="text" name="Total" value="" readonly > 
            all inclusive <font size="2" face="Arial, Helvetica, sans-serif"><b>
            <input type="submit" value="Submit" name="Submit"  style="Background: #c3d9ff" />
            <input type="hidden" name="__FG_SITE_IDENTIFIER__"
    value="1TrycdQmp.Cm6O4lGCmb7ErXs91ubx1" />
            <input type="hidden" name="__FG_THANKS_PAGE_RDR__"
    value="http://www.glassfurniture.co.za/thankyou.html" />
            </b></font></td>
        </tr>
      </table>
    </form>
    </body>
    </html>
    I tried to implement the check into my code but it did nothing so maybe I'm not doing it wright
    Could you please send me the example of how my calculator should look like
    I actually want it to start calculating the moment the values change. It does happen like that but onlyAfter I've clicked inside one of the text fields that are bieng calculated

    Any input would be appreciated

  10. #25
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Lightbulb Consider this ...

    I needed to alter the <form> tag for my testing, so just exchange with yours <!-- uncomment -->
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>DD Sums</title>
    
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Cities
    ////////////////////////////////////////////////////////////////////////////////////////
    var CityCourierCost = [
     ['Please select your City',''],
     ['Cape Town','200'],
     ['JHB','600']
    //['Witbank','amount']
    ];
    
    function SetupCity() {
      var str = "<select id='City' onchange='CityInfo()'>";
      for (var i=0; i<CityCourierCost.length; i++) {
        str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
      }
      str +='</select>';
      document.write(str);
    }
    function CityInfo() {
      var sel = document.getElementById('City').selectedIndex; 
      var tmp = []; tmp.push(sel);
      for (var i=1; i<CityCourierCost.length; i++) { tmp.push(CityCourierCost[sel][i]); }
      document.getElementById('CourierCost').value = tmp[1];
      calc();
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Products
    ////////////////////////////////////////////////////////////////////////////////////////
    var ProductItemCost = [
     ['Please select your Product',''],
     ['Alpine','1200'],
     ['Surento','800']
    //['Witbank','amount']
    ];
    
    function SetupProduct() {
      var str = "<select id='Product' onchange='ProductInfo()'>";
      for (var i=0; i<ProductItemCost.length; i++) {
        str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
      }
      str +='</select>';
      document.write(str);
    }
    function ProductInfo() {
      var sel = document.getElementById('Product').selectedIndex;
      var tmp = []; tmp.push(sel);
      for (var i=1; i<ProductItemCost.length; i++) { tmp.push(ProductItemCost[sel][i]); }
      document.getElementById('ProductCost').value = tmp[1];
      calc();
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Calculation
    ////////////////////////////////////////////////////////////////////////////////////////
    var FirstPass = true;
    function calc() {
      var flag = true;  var total = 0;
      var tmp = '';  var one = 0;  var two = 0;
      tmp = document.getElementById('CourierCost').value;
      one = Number(tmp);  
      total += one;
      if ((tmp == '') || isNaN(one)) {
        alert('Invalid entry: City missing'); flag = false; 
        if (FirstPass == true) { FirstPass = false; return flag; }
      }
    
      tmp = Number(document.getElementById('ProductCost').value);
      two = Number(tmp);
      if ((tmp == '') || isNaN(two)) {
        alert('Invalid entry: Product missing'); flag = false; 
        if (FirstPass == true) { FirstPass = false; return flag; }
      }
      total += two;
     
      if (flag == false) { total = 0; }
      document.getElementById('results').value = total;
      return flag;
    }
    
    </script>
    
    </head>
    <body>
    <!-- form name="theform" action="http://www.hashemian.com/tools/form-grabber.php" method="post" onsubmit="return calc()" -->
    <!-- following tag for testing purposes only -- use above for real actions -->
    <form name="theform" action="javascript:alert('Success')" method='post' onsubmit="return calc()">
    <table width="651" height="105">
    
    <tr>
    <td width="101" height="24">City</td>
    <td width="207">
    <script type="text/javascript">SetupCity();</script>
    </td>
    <td width="51">Amount</td>
    <td width="272">
    <input type="text" name="City" id="CourierCost" size="10" value="">
    </td>
    </tr>
    
    <tr>
    <td height="21">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr>
    <td height="24">Product</td>
    <td>
    <script type="text/javascript">SetupProduct()</script></td>
    <td>Amount</td>
    <td><input type="text" name="ProductCost" id="ProductCost" size="10" value="">
    </td>
    </tr>
    
    <tr>
    <td height="21">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    
    <tr>
    <td>&nbsp;</td>
    <td><input type="reset" value="Clear"></td>
    <td height="24"><input type="submit" value="Submit"></td>
    <td><input type="text" name="sum" value="" id="results" style="border:1px;" readonly></td>
    </tr>
    
    </table>
    </form>
    </body>
    </html>
    Going back to original display because I saw no reason to have City / Product info twice.
    Add it back in if REALLY necessary.

  11. #26
    Join Date
    Apr 2009
    Posts
    2

    Drop Boxes and Text Boxes

    How does a web page handle "blank" drop boxes and textboxes when the user clicks on the "Search" button for example? Deducing that for example an option such as "* All Models" is not part of the retrieval statement. A conceptual and possible technical answer would help. Refering back to possibly Microsoft Access.

    Thank you so much for your response!!!

  12. #27
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Question

    Quote Originally Posted by Nebo88 View Post
    How does a web page handle "blank" drop boxes and textboxes when the user clicks on the "Search" button for example? Deducing that for example an option such as "* All Models" is not part of the retrieval statement. A conceptual and possible technical answer would help. Refering back to possibly Microsoft Access.

    Thank you so much for your response!!!
    I'm not sure I understand your question as it relates to the earlier posts.

    Might be better to start your own thread and define the question a little more along with a script example or link to your code.

  13. #28
    Join Date
    May 2009
    Posts
    4

    Pull field from DB?

    JMRKER,

    i was looking over this thread, what you did here...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    
    // Format of StoreDetails()
    // Name,Addr1,Addr2,Addr3,Phone,FAX,Email,Webpage
    var StoreDetails = [
    ['Please select an option','','','','','','','',''],
    ['Store 1','Name 1'],
    ['Store 2','Name 2'],
    ['Store 3','Name 3'],
    ['Store 4','Name 4'],
    ['Store 5','Name 5'] // Note: no comma
    ];
    function Setup(TA) {
    var str = "<select id='Store' onchange='StoreInfo()'>";
    for (var i=0; i<StoreDetails.length; i++) {
    str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i][0]+'</option>';
    }
    str +='</select>';
    document.write(str);
    
    }
    function StoreInfo() {
    var sel = document.getElementById('Store').selectedIndex;
    var tmp = []; tmp.push(sel);
    for (var i=1; i<9; i++) { tmp.push(StoreDetails[sel][i]); }
    document.getElementById('txtName').value = tmp[1];
    }
    </script>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <script type="text/javascript">Setup();</script>
    <table border="0">
    <tr><td>Name:</td><td><input type="text" id="txtName" size="30" value=""></td></tr>
    </table>
    </form>
    </body>
    </html>
    is pretty much exactly what i need HOWEVER, i need the txtname to be pulled from a database... any idea?

  14. #29
    Join Date
    Feb 2009
    Posts
    34
    Hi EliteViper
    What I've done was to create it as per above and the when i post the form I capture the form fields into the DB.
    I found that was easier than to Access all the stores from a db.
    Unless you don't want your data to be freely available then you'll have to make it come from a db.

  15. #30
    Join Date
    May 2009
    Posts
    4
    Well what im doing is this is actually for my supplier/cost list so in my backend when i am looking @ a customers order i want to be able to select a supplier from a drop down for the product ordered... the db is populated automatically with all the costs per supplier for each product... i have that all set up however for instance...

    these would be the fields for the drop down...

    Supplier1
    Supplier2
    Supplier3
    Supplier4

    then there should be a text box to the right of it which would contain the appropriate data, as of now i have each supplier lined up so well there are 4 suppliers so there are 4 text boxes containing data however i need to get rid of that and make it just 1

    Code:
    <td class="dataTableContent" valign="top"><input name="<?php echo "update_products[" . $orders_products_id . "][cost]"; ?>" size="7" <?php if (ORDER_EDITOR_USE_AJAX == 'true') { ?>onChange="updateProductsField('update', '<?php echo $orders_products_id; ?>', 'products_cost', encodeURIComponent(this.value))"<?php } ?> value="<?php echo $order->products[$i]['cost']; ?>"></td>
    
    <td class="dataTableContent" valign="top"><input name="<?php echo "update_products[" . $orders_products_id . "][cost2]"; ?>" size="7" <?php if (ORDER_EDITOR_USE_AJAX == 'true') { ?>onChange="updateProductsField('update', '<?php echo $orders_products_id; ?>', 'products_cost2', encodeURIComponent(this.value))"<?php } ?> value="<?php echo $order->products[$i]['cost2']; ?>"></td>
    
    <td class="dataTableContent" valign="top"><input name="<?php echo "update_products[" . $orders_products_id . "][cost3]"; ?>" size="7" <?php if (ORDER_EDITOR_USE_AJAX == 'true') { ?>onChange="updateProductsField('update', '<?php echo $orders_products_id; ?>', 'products_cost3', encodeURIComponent(this.value))"<?php } ?> value="<?php echo $order->products[$i]['cost3']; ?>"></td>
    that works perfectly... what i need is to make a dropdown so that when supplier1 pulls cost 1, supplier2 pulls cost2, supplier3 pulls cost3... rather then all of them to be displayed, so something like...

    Code:
    IF dropdown value=supplier1 then show this:
    
    <td class="dataTableContent" valign="top"><input name="<?php echo "update_products[" . $orders_products_id . "][cost]"; ?>" size="7" <?php if (ORDER_EDITOR_USE_AJAX == 'true') { ?>onChange="updateProductsField('update', '<?php echo $orders_products_id; ?>', 'products_cost', encodeURIComponent(this.value))"<?php } ?> value="<?php echo $order->products[$i]['cost']; ?>"></td>
    
    
    IF dropdown value=supplier2 then show this:
    
    <td class="dataTableContent" valign="top"><input name="<?php echo "update_products[" . $orders_products_id . "][cost2]"; ?>" size="7" <?php if (ORDER_EDITOR_USE_AJAX == 'true') { ?>onChange="updateProductsField('update', '<?php echo $orders_products_id; ?>', 'products_cost2', encodeURIComponent(this.value))"<?php } ?> value="<?php echo $order->products[$i]['cost2']; ?>"></td>
    and so on... does that make sense? these values are for display purposes only ... just so we know what the costs are... and idealy have the costs in the drop down as well... so

    Dropdown should be this :
    supplier1 - $23
    supplier2 - $34
    supplier3 - $41

    then the text box to the right should only contain the $23 or whichever value corresponds ot the selected supplier.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles