PDA

View Full Version : Select multiple form elements?



jenniferrs
07-14-2011, 02:49 PM
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 modify the code to allow me to select multiple form elements with one select all button.

this is what I have so far in the body:


<a class="highlighttext" href="javascript:HighlightAll('form1.select1')">Select All</a><br>
<div class="form">
<form name="form1">
<textarea name="select1" rows=1 cols=50 >document name</textarea>
<textarea name="select2" rows=1 cols=50 >company</textarea>
<textarea name="select3" rows=1 cols=50 >language</textarea>
</form>
</div>


From the code, I would like to make it so that I can HighlightAll for each of the textareas (there will be lots of them).

I have tried a lot of different options...I am not very experienced with Javascript, but have used it from time to time. A little more experienced with jQuery, but not enough to convert this.

Any help is greatly appreciated.

ddadmin
07-15-2011, 05:08 AM
Are you mainly interested in highlighting multiple textareas simultaneously, or simply copying their contents all at once to clipboard? For the former, it's actually not possible to highlight more than more textarea at once- that's simply the way browsers behave.

jenniferrs
07-15-2011, 12:51 PM
The end goal would be that with one click, I can copy the contents of the form to be pasted into an excel document. I am seeking a solution to simplify an existing workflow and increase productivity....

Thanks for your response!

ddadmin
07-15-2011, 05:27 PM
The following modified script will copy the values of multiple textareas into clipboard, though currently in IE only:


<script language="Javascript">
<!--

/*
Select and Copy form element script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/


function HighlightAll(theField) {
if (typeof theField=="string")
theField=[theField]
if (document.all){
var combinedvalues=""
for (var i=0; i<theField.length; i++)
combinedvalues+=eval("document." + theField[i]).value
var temptextarea=document.createElement("textarea")
temptextarea.style.display="none"
temptextarea.value=combinedvalues
document.body.appendChild(temptextarea)
temptextarea.createTextRange().execCommand("Copy")
}
}
//-->
</script>

<body>

<form name="test">
<a class="highlighttext" href="javascript:HighlightAll(['test.select1', 'test.select2'])">Select All</a><br>
<textarea name="select1" rows=10 cols=35 >FIRST textarea value</textarea>
<textarea name="select2" rows=10 cols=35 >SECOND textarea value</textarea>
</form>

When calling the HighlightAll() function, pass into it an array of strings representing the names of the textareas, for example:


HighlightAll(['test.select1', 'test.select2'])

jenniferrs
07-15-2011, 06:03 PM
Thank you so much for modifying the script; I tested it out and it works perfectly! Good news is that the site is always accessed with IE, so no problems with compatibility. I really appreciate your help!

Thank you again!

jenniferrs
07-15-2011, 07:04 PM
Is there a way to add a delimiter to the code between each of the selections from the field? All of the information is being copied into a single line with no spaces. I am looking into the option of adding the character to the text field, but if it could be in the code to copy that would be preferred.

ddadmin
07-15-2011, 11:21 PM
Certainly, try finding the below line and add to it the code in red:


combinedvalues+=eval("document." + theField[i]).value+"\n\n"

Where "\n\n" adds two line breaks between each textarea value. You can see a list of escape characters in JavaScript here (http://www.javascriptkit.com/jsref/escapesequence.shtml).

jenniferrs
07-18-2011, 01:23 PM
Thank you again. I was able to add the character needed to delimit in Excel and it works great. I appreciate your help.