PDA

View Full Version : Adding Drop Down Menus to the Select (and copy) Form Element Script



EEB
02-28-2018, 06:06 AM
1) Script Title: Select (and copy) Form Element Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/selectform.htm

3) Describe problem: I would like to add two drop down menus at the end of this script - the end of the text box - but can't figure out how. The end-result should be the same, the selected option for each drop down menu should produce text (the same text of the drop down selection) that can copied along along with the other text. And the last option of drop down menu #1 should allow the user to type in an answer.

The code without the drop downs:


<html>
<head>
</style>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<style>
.highlighttext{
background-color:yellow;
font-weight:bold;
}
</style>
<script type="text/javascript">

/***********************************************
* Select and Copy form element script- By Dynamicdrive.com
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function selectcopy(fieldid){
var field=document.getElementById(fieldid) || eval('document.'+fieldid)
field.select()
if (field.createTextRange){ //if browser supports built in copy and paste (IE only at the moment)
field.createTextRange().execCommand("Copy")
alert("Value copied to clipboard!")
}
}

</script> </head>
<body><b>
<center><a href="http://somewhere.com"><img src="somewhere.com/logo.gif"
border="0"></a></center>
</b>
<a href="http://somewhere.com" onclick="javascript:void window.open('http://somewhere.com','1440596505619','width=725,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;"></font><font font="" color="#4465A4" face="Tahoma, Verdana, Arial, FreeSans, Helvetica, Liberation Sans" size="1"><b>The Linked Text</b></a></font><b><font font="" color="#4465A4" face="Tahoma, Verdana, Arial, FreeSans, Helvetica, Liberation Sans" size="3">
<form name="test">
<a class="highlighttext" href="javascript:selectcopy('test.select')"><b>Select Text</b></a> The Form Name <input type="reset" value="Reset"><br>
<textarea name="select" rows="8" cols="45">The Form
Text Input 1:
Text Input 2:
Text Input 3: Text Pre-Filled
Text Input 4:
Text Input 5: </textarea>
</form></font>
</body>
</html>

The requested drop down menus should appear just after Text Input 5:

Drop Down Menu 1 Name: Reason
<option value="Reason 1"</option>
<option value="Reason 2"</option>
<option value="Reason 3"</option>
<option value="Reason 4"</option>
<option value="Reason 5"</option>
<option value="Reason 6"</option>
<option value="Reason 7: (Fill in details)"</option>

Drop Down Menu 2 Name: Outcome
<option value="Outcome 1"</option>
<option value="Outcome 2"</option>

Thanks in advance to anyone able to help.

EEB
03-12-2018, 04:16 AM
I'm hopeful pictures will explain what I'd like to accomplish. First one is what the form looks like (in Firefox, 58.04.2 on Ubuntu): 6281 Next is what I'm envisioning the form to look like when the two drop down menus have been added 6282 And finally what I'm envisioning the form to look like when filled-out/used 6280