Link to home
Start Free TrialLog in
Avatar of antcal
antcalFlag for United States of America

asked on

Select Field Determines Other Fields

I need a web form that has variable input fields based on a "Select" option.  I imagine that JavaScript is ideal.  I am out of practice on web development skills, and JavaScript was a weak spot.

The Select will have several options:
      Dispense
      Receive
      Return
      Reconcile
When you select "Dispense" I need text fields named:
      Name
      Center
      Number
If you chose "Receiving" text fields appear named:
      Vendor
      Form #
      Invoice #
In the perfect situation each text field is uniquely named verses using the same text fields with different labels.  Some options may need 4 text fields, and another may need 1 field.
In the SQL database I'd have columns named:
   DispName, DispCenter, DispNumber, RecVendor, RecForm, RecInvoice, etc.

I know I've had this in the past, but all my web development code has been lost over time.  I am awarding 500 pts, as this little issue is holding up a database project, and I don't have time to buy a book and learn JavaScript.
ASKER CERTIFIED SOLUTION
Avatar of P_Ramprathap
P_Ramprathap
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of antcal

ASKER

Thanks for the tip, I should have a chance to try and implement the suggestion later today.  I'll update you then.
Avatar of antcal

ASKER

I am still not 100% with this task.  Here is the sample code I have been playing with.  This code gives me 1,2,3, or 4 Text boxes.  It is close to what I need, however, I want unique sections.

I have included my working code snippet, and it has a desired output section below the working example.  I hope this is enough to help me wrap this up.
<html>
<head>
<script type="text/javascript">
     function showFields(num){
          container = document.getElementById('fields')
          container.innerHTML = ''
 
          for(i = 0; i < parseFloat(num); i ++){
               container.innerHTML += '<input type="text" /><br />'
               }
          }
</script>
</head>
 
<body>
<select onChange="showFields(this.options[this.selectedIndex].value)">
     <option value="0">Choose One:</option>
     <option value="1">Dispensed</option>
     <option value="2">Recieved</option>
     <option value="3">Return to Stock</option>
     <option value="4">REKO</option>
</select>
<br />
<div id="fields"></div>
<br><br><br>
<p><b>Desired Output for option DISPENSED, Recived (and other choices) would have a similar but diffrent output</b><br>
<input name="DispName" type="text" onFocus="value=''" value="Enter Name Here" size="30" maxlength="30"><br />
<input name="DispCenter" type="text" onFocus="value=''" value="Enter Center Here" size="30" maxlength="30"><br>
<input name="DispNumber" type="text" onFocus="value=''" value="Enter Number Here" size="30" maxlength="30"><br>
</body>
</html>

Open in new window

Avatar of antcal

ASKER

Good direction for a skilled developer.  Due to my lack of skill in web development, I still had to find my own solution.  My solution used a java script to reveal a section of the web page using "tbody" tag.