Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to make html:select tag box copy pastable

    I have a html:select tag box and I want to make it copy pastable directly from an excel sheet or notepad so as to dynamically updating its options, is it possible. Current code has html:select box separately and below this another text box is there, where i fill the numeric value, then press add button below and then it gets updated in the html:select tag box.

    Is it possible to copy from some list of numeric values and then directly paste into the html:select and the array list gets updated from this pasted list.

    Thanks in advance fro your replies.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    There is no way to paste text directly into an HTML select menu element.

    If you really wanted to accomplish something like that, you'd need to create some kind of JS-enhanced "combo-box" that allows you to type (and paste text) directly into the select menu.

    These links can get you started:

    http://www.google.com/search?client=...w=1346&bih=870
    http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

    But, actually, I would discourage this kind of thing (if possible) because it's an uncommon and potentially confusing user interface -- especially the interface that you have described. (People do not instinctively think or know to paste text into a drop down menu.)
    Last edited by chump2877; 07-22-2011 at 01:41 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    ... although pasting the desired items into the input box separated by line breaks (or whatever other separator you wanted to use) then loading them all into the select box at the click of one button shouldn't be too hard, weird or confusing. Is that what you wanted to do?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    well, I guess not.

    just for fun, here's one way to do what I suggested above. The code that separates the lines breaks is this:
    var dropdowns=items.split(/\n|\r/g);

    which, like I say, you could change to be commas or spaces or whatever.

    of course, if you wanted your selection to actually do something, that would require some extra coding....

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    
    
    
    function fillList() {
    document.myform.selectlist.options.length=1;
    items=document.getElementById("rawinputs").value;
    var dropdowns=items.split(/\n|\r/g);
    for (var k=0; k<dropdowns.length; k++) {
    var optn = document.createElement("OPTION");
    optn.text = dropdowns[k];
    document.myform.selectlist.options.add(optn);
    }
    }
    
    function showOption() {
    number= document.myform.selectlist.selectedIndex;
    name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
    alert("you chose option " + number +", "+name)
    }
    
    </script>
    </head>
    <body>
    <form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
    <textarea rows="10" columns="20" id="rawinputs"></textarea> 
    <input type="button" value="Fill List" onclick="fillList()"></input>
    </body>
    </html>
    Last edited by xelawho; 07-23-2011 at 03:17 PM.

  • Users who have thanked xelawho for this post:

    chump2877 (07-23-2011)

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by xelawho View Post
    well, I guess not.

    just for fun, here's one way to do what I suggested above. The code that separates the lines breaks is this:
    var dropdowns=items.split(/\n|\r/g);

    which, like I say, you could change to be commas or spaces or whatever.
    That user interface makes more sense to me, and makes it more intuitive.

    A note about the code: You could change this:

    Code:
    for (var k=0; k<dropdowns.length; k++) {
    var optn = document.createElement("OPTION");
    optn.text = dropdowns[k];
    document.myform.selectlist.options.add(optn);
    }
    to this:

    Code:
    for (var k=0; k<dropdowns.length; k++) {
    document.myform.selectlist.options[k+1]=new Option(dropdowns[k], k);
    }
    Just to make things simpler
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Just for fun (again), here is an idea I came up with quickly that perhaps is more intuitive than pasting directly into a combo/select box, requires relatively little code, and is more along the lines of what ashish is looking for (only tested code in Firefox):

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <form name="myform">
    	<textarea id="rawinputs">Paste text</textarea><br />
    	<select id="selectlist">
    		<option>select an option</option>
    	</select>
    </form>
    
    <script type="text/javascript">
    	function fillList()
    	{
    		document.myform.selectlist.options.length = 1;
    		var dropdowns = this.value.split(/\n|\r/g);
    		for (var k=0; k<dropdowns.length; k++)
    		{
    			document.myform.selectlist.options.add(new Option(dropdowns[k], k));
    		}
    		this.value = 'Paste text';
    		adjustTextboxSize();
    	}
    
    	function adjustTextboxSize()
    	{
    		optionList.style.width = document.myform.selectlist.offsetWidth+"px";
    		optionList.style.height = document.myform.selectlist.offsetHeight+"px";
    	}
    
    	var optionList = document.getElementById('rawinputs');
    	optionList.onfocus = function() {this.value = '';}
    	optionList.onblur = function() {this.value = 'Paste text';}
    	optionList.onchange = fillList;
    
    	window.onload = adjustTextboxSize;
    </script>
    
    </body>
    </html>
    Last edited by chump2877; 07-23-2011 at 05:18 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    xelawho (07-23-2011)

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    mmmmm... no button required. tasty.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    ... and (being that the fun doesn't have to stop there), here's a way to add values to the options, so that you could actually use them to do something...

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    
    newdrops=[];
    
    function fillList() {
    document.myform.selectlist.options.length=1;
    newdrops.length=0;
    items=document.getElementById("rawinputs").value;
    var dropdowns=items.split(/\n|\r/g);
    for (var k=0; k<dropdowns.length; k++) {
    var bits=dropdowns[k].split(",");
    var drops= {
    text:bits[0],
    value:bits[1]
    }
    newdrops.push(drops);
    }
    
    
    for (var i=0; i<newdrops.length; i++) {
    document.myform.selectlist.options[i+1]=new Option(newdrops[i].text, newdrops[i].value, i);
    }
    }
    
    
    function showOption() {
    age= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].value;
    name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
    alert(name+"'s age is " + age)
    }
    
    </script>
    </head>
    <body>
    <form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
    <div style="overflow:auto">
    <div style="float:left"><textarea rows="10" columns="20" id="rawinputs"></textarea></div>
    <div style="float:left; margin-left:10px">Enter the name of a family member, then a comma, then their age. <br>Start each new family member on a new line (use the enter key). Example: <br>
    dad,66<br>
    mum,62<br>
    sis,27<br>
    bro,29<br><br>
    When you are finished hit the "Fill List" button.</div> 
    </div>
    <div><input type="button" value="Fill List" onclick="fillList()"></input></div>
    </body>
    </html>
    Last edited by xelawho; 07-25-2011 at 05:56 AM.

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    The options in my code do have values:

    Code:
    new Option(dropdowns[k], k)
    http://www.javascriptkit.com/jsref/select.shtml



    Edit: Oh I see what you did after running your code...My option values are just ascending integers, whereas you allow custom values...Nice going
    Last edited by chump2877; 07-25-2011 at 07:17 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    yup... which makes it possible to do really useful stuff like this:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    
    newdrops=[];
    var totalAge=0;
    
    function fillList() {
    document.myform.selectlist.options.length=1;
    newdrops.length=0;
    items=document.getElementById("rawinputs").value;
    var dropdowns=items.split(/\n|\r/g);
    for (var k=0; k<dropdowns.length; k++) {
    var bits=dropdowns[k].split(",");
    var drops= {
    text:bits[0],
    value:parseFloat(bits[1])
    		}
    newdrops.push(drops);
    	}
    for (var i=0; i<newdrops.length; i++) {
    var optn = document.createElement("OPTION");
    optn.text = newdrops[i].text;
    optn.value = newdrops[i].value;
    document.myform.selectlist.options.add(optn);
    	}
    for (var i=0; i<newdrops.length; i++) {
    totalAge=totalAge+newdrops[i].value;
    	}
    Avage=totalAge/newdrops.length;
    document.getElementById("averages").innerHTML="The average age of your family is "+ Avage+" years old";
    }
    
    function showOption() {
    chosen=document.myform.selectlist.options[document.myform.selectlist.selectedIndex];
    age= chosen.value;
    name= chosen.text;
    document.getElementById("results").innerHTML=name+"'s age is " + age;
    document.getElementById("sameage").innerHTML="";
    for (var j=0; j<newdrops.length; j++) {
    if ((newdrops[j].value==chosen.value)&&(!(newdrops[j].text==chosen.text))) {
    document.getElementById("sameage").innerHTML+=newdrops[j].text+"<br>";
    	}
    }
    if (!(document.getElementById("sameage").innerHTML=="")){
    document.getElementById("sameintro").innerHTML="People who are the same age as "+chosen.text+" are:<br>";
    } else {
    document.getElementById("sameintro").innerHTML="";
    	}
    }
    
    </script>
    </head>
    <body>
    <div style="overflow:auto">
    <div style="float:left">
    <form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form></div>
    <div style="float:left; margin-left:10px"><input type="button" value="Fill List" onclick="fillList()"></input></div>
    </div>
    <div style="overflow:auto">
    <div style="float:left"><textarea rows="10" columns="20" id="rawinputs">Dad,66
    Mum,62
    Uncle John,66
    Aunt Gladys,62
    Grandpa,90
    Uncle Bob,62</textarea></div>
    <div style="float:left; margin-left:10px">Enter the name of a family member, then a comma, then their age. <br>Start each new family member on a new line like in the example on the left. <br>
    When you are finished, hit the "Fill List" button. <br>
    Finally, select a family member from the drop down list.
    <div id="averages"style="margin-top:5px"></div>
    <div id="results" style="margin-top:5px"></div>
    <div id="sameintro"></div>
    <div id="sameage"></div>
    </div> 
    </div>
    
    </body>
    </html>
    which would have taken about 5 seconds to do in the original Excel file that you were pasting from

    but I guess you can probably mark this one as "resolved", ashish...



    ashish?


  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    one more thing i want is to append the new entires in the list rather than overwrite

    Thanks a lot to both of you chump2877 and xelawho, for such a great response!

    Now i want one more thing is that i want to append the new entries in the select list, not overwriting the existing ones in the select list, every time i can copy and pate a new list of numeric values from excel into the text area"rawinputs" and this list must be added into the existing entries in the selectlist.

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Ashish, would be happy to oblige, but which version of the code are you now using?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #13
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i am using this.................

    <html>
    <head>
    <script type="text/javascript">




    function fillList() {
    document.myform.selectlist.options.length=1;
    items=document.getElementById("rawinputs").value;
    var dropdowns=items.split(/\n|\r/g);
    for (var k=0; k<dropdowns.length; k++) {
    document.myform.selectlist.options[k+1]=new Option(dropdowns[k], k);
    }
    }

    function showOption() {
    number= document.myform.selectlist.selectedIndex;
    name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
    alert("you chose option " + number +", "+name)
    }

    </script>
    </head>
    <body>
    <form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
    <textarea rows="10" columns="20" id="rawinputs"></textarea>
    <input type="button" value="Fill List" onclick="fillList()"></input>
    </body>
    </html>

  • #14
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I think something like this is what you are looking for:

    Code:
    <html>
    <head>
    </head>
    <body>
    	<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
    	<textarea rows="10" columns="20" id="rawinputs"></textarea>
    	<input type="button" value="Add To List" onclick="fillList()"></input>
    	<script type="text/javascript">
    		// Global fields
    		var ddMenu = document.myform.selectlist;
    
    		// Functions
    		function fillList()
    		{
    			var menuLength = ddMenu.options.length;
    			var items = document.getElementById("rawinputs");
    			var dropdowns = items.value.split(/\n|\r/g);
    			for (var k=0; k<dropdowns.length; k++)
    			{
    				ddMenu.options[k+menuLength] = new Option(dropdowns[k], k+menuLength-1);
    			}
    			items.value = "";
    		}
    
    		function showOption()
    		{
    			var number = ddMenu.selectedIndex;
    			var name = ddMenu.options[ddMenu.selectedIndex].text;
    			alert("you chose option " + number +", "+name)
    		}
    	</script>
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    ashish chaudhar (07-28-2011)

  • #15
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to limit the numerals in per line to 11 digits only in this script

    how to limit the numerals in per line to 11 digits only in this script, i tried with wrap attribute but its not working for me............

    as usual your replies are appreciable...................


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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