New question about event behaviors and drop down menus

crystalb24 · Oct 13, 2004

This is the code that I am currently using to allow the user to add a value to a drop down menu.

Code:

<script type="text/javascript">
     function addNewValue(targ) {
       if (targ.value == 'Add') {
         newVal = prompt('Create your own Pre-meeting checklist item');
         newOpt = document.createElement('option');
         newOpt.setAttribute('value',newVal);
         optText = document.createTextNode(newVal);
         newOpt.appendChild(optText);
         targ.insertBefore(newOpt,targ.lastChild);
       }
     }
</script>

<body>
<table>
	<tr>
		<td>
		I.
		</td>
		<td>
		<select name="Pre-meeting checklist">
		<option></option>
		<option value="choice">Schedule appointment</option>
		<option value="insert">Send letter/agenda/questionnaire</option>
		<option value="choice">Request send in / bring in documents</option>
		<option value="choice">Set up electronic & hard copy files</option>
		<option value="choice">Schedule team participants for <b>Understand Your Goals</b> meeting</option>
		<option value="choice">Assemble materials needed for meeting</option>
		<option value="choice">Facilities check</option>
		<option value="Add">Add your own item</option>
		</select>
		</td>
	</tr>
</table>

What I would like to be able to do is to not only allow the user the ability to add there own value, but also trigger a certain choice in the drop down menu to prompt the user to upload a file or choose an existing file, but I'm not sure how to write the code to do this. Anyone help?

~Crystal
Click here (

http://www.freeiPods.com/default.aspx?referer=7003325)

for a free iPod

LFI · Oct 13, 2004

Crystal,

This is really a JavaScript question. You can add a ONCHANGE event to the SELECT tag and have it call a function which will determine which option in the dropdown is chosen and, if it is the specific option in which you're interested, prompt the user with your question.

This is a very general answer. I don't know how much detail you need, so ask again if you need more!

Although... you might post any follow-up questions to the JavaScript forum.

--Dave

ToddWW · Oct 13, 2004

Code:

<script type="text/javascript">
     function addNewValue(targ) {
       if (targ.value == 'Add') {
         newVal = prompt('Create your own Pre-meeting checklist item');
         newOpt = document.createElement('option');
         newOpt.setAttribute('value',newVal);
         optText = document.createTextNode(newVal);
         newOpt.appendChild(optText);
         targ.insertBefore(newOpt,targ.lastChild);
       }
     }
     function doSomething(formElmt) {
       var elmtValue = formElmt.options[formElmt.selectedIndex].value;
       if (elmtValue == "insert") {
           fileUp.style.display = "inline";
       } else {
           fileUp.style.display = "none";
       }
     }
</script>

<body>
<table>
    <tr>
        <td>
        I.
        </td>
        <td>
        <select name="Pre-meeting checklist" onChange="doSomething(this)">
        <option></option>
        <option value="choice">Schedule appointment</option>
        <option value="insert">Send letter/agenda/questionnaire</option>
        <option value="choice">Request send in / bring in documents</option>
        <option value="choice">Set up electronic & hard copy files</option>
        <option value="choice">Schedule team participants for <b>Understand Your Goals</b> meeting</option>
        <option value="choice">Assemble materials needed for meeting</option>
        <option value="choice">Facilities check</option>
        <option value="Add">Add your own item</option>
        </select>
        </td>
    </tr>
    <tr>
      <td id="fileUp" style="display: none;">
        <input type="file" name="fileUpload">
      </td>
    </tr>
</table>

I added an onChange event handler in the select tag that passes the form element reference to the function. The function determines if the insert option has been selected and displays the file upload element. Otherwise it hides the file upload element. Works in IE. Not sure about NS. You'll need to refer to your server side code for processing the file upload.

ToddWW

dstillwa · Oct 13, 2004

Out of curiosity, is there a reason why this is a select instead of checkboxes (I am sometimes overly literal, and a checklist suggests checkboxes to me).

In either case, it seems like another easy option would be to store the values and actions in an array. The javascript section could simply populate the form with the elements of the array of name FormArray[x][0] and with label FormArray[x][1] (alternatively with action FormArray[x][2]). Adding an element would consist of adding an element to the array and repopulating the form.

If it is necesary to store these values between sessions, a php script could be created via the same principles that dumped/read the values from a data source.

Probably not relevant to the thread, but I've had a long day and felt like inflicting my ruminations on you all!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

New question about event behaviors and drop down menus

crystalb24

Programmer

LFI

Programmer

ToddWW

Programmer

dstillwa

Programmer

Similar threads

Part and Inventory Search

Sponsor