|
JavaScript - Sort Items Regardless Of Uppercase/lowercase From One Listbox To Another In Javascrip
Hi there, I would like to sort the items regardless of uppercase/lowercase after moving them to another listbox. Here is my code, and I cannot figure out what is wrong with it.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function MoveItem(unselectedLst, selectedLst)
{
var unselectedEmail = document.getElementById(unselectedLst);
var selectedEmail = document.getElementById(selectedLst);
var uValue = unselectedEmail.value;
var sValue = selectedEmail.value;
if ((uValue != null) && (sValue != null))
{
if( unselectedEmail.options.selectedIndex >= 0 )
{
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = unselectedEmail.options[unselectedEmail.options.selectedIndex].text;
newOption.value = unselectedEmail.options[unselectedEmail.options.selectedIndex].value;
selectedEmail.options[selectedEmail.length] = newOption; //Append the item in selectedEmail
unselectedEmail.remove(unselectedEmail.options.selectedIndex); //Remove the item from unselectedEmail
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<unselectedEmail.length; i++)
{
arrTexts[i] = unselectedEmail.options[i].text;
}
arrTexts.sort();
for(i=0; i<unselectedEmail.length; i++)
{
unselectedEmail.options[i].text = arrTexts[i];
unselectedEmail.options[i].value = arrTexts[i];
}
//sort items in listbox in alpha order
arrayTexts = new Array();
for(i=0; i<selectedEmail.length; i++)
{
arrayTexts[i] = selectedEmail.options[i].text;
}
arrayTexts.sort();
for(i=0; i<selectedEmail.length; i++)
{
selectedEmail.options[i].text = arrayTexts[i];
selectedEmail.options[i].value = arrayTexts[i];
}
}
}
else
{
alert('Select Item From The List. ');
}
}
</script>
</head>
<body>
<table width="300">
<tr>
<td>
<select id="ListBox1" name="ListBox1" size="6">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td>
<td>
<p>
<input onclick="MoveItem('ListBox1', 'ListBox2');" type="button" value="->" />
</p>
<p>
<input onclick="MoveItem('ListBox2', 'ListBox1');" type="button" value="<-" />
</p>
</td>
<td>
<select id="ListBox2" name="ListBox2" size="6">
<option>allalong@msn.com</option>
<option>boys@hotmail.com</option>
<option>cy@yahoo.com</option>
<option>bread@hotmail.com</option>
<option>eetApple@ymail.com</option>
<option>applepie@gmail.com</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsEssentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side. Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox. I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it. Hi, I would like to know how to add/remove items from listbox PERMANENTLY. Sad to say, all I have found are adding/removing items temporarily. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" >
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function addOption_list(selectbox)
{
addOption(document.drop_list.SubCat, "One","One");
addOption(document.drop_list.SubCat, "Two","Two");
addOption(document.drop_list.SubCat, "Three","Three");
addOption(document.drop_list.SubCat, "Four","Four");
addOption(document.drop_list.SubCat, "Five","Five");
addOption(document.drop_list.SubCat, "Six","Six");
}
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
if(selectbox.options[i].selected)
selectbox.remove(i);
}
}
</script>
</head>
<body onload="addOption_list()";>
<form name="drop_list" action="default.aspx" method="post" >
<select id="SubCat" name="SubCat" MULTIPLE size="6" width="10"></select>
<input type="button" onclick="removeOptions(SubCat)"; value='Remove Selected' />
<input type="button" onclick="addOption_list()"; value='Add All' />
</form>
</body>
</html>
Please advise me on the problem. Hi, I would like to prevent the addition of duplicate items in the following situation. Firstly, I have a listbox with a few options such as Code: <select id="listbox" name="listbox" multiple="multiple" style="width: 580px;">
<option>Java</option>
<option>PHP</option>
<option>Perl</option>
<option>Javascript</option>
<option>C#</option>
<option>Powershell</option>
</select>
Next, I have a submit button with a textbox. The user will be able to submit new options into the listbox via the textbox and submit button. Therefore, I need to prevent the user from entering duplicate items into the listbox. How should I do? The following code is used to add items into the listbox. Code: function addItem()
{
var lst = document.getElementById('listbox'); // listbox control id
var newItem = prompt("Enter New Item","Enter Value Here");
//Option object is created for every option in a selection
//new Option([text[, value[, defaultSelected[, selected]]]]) // Syntax
if(newItem == null)
{
return false;
}
else
{
lst.options[lst.length] = new Option(newItem,newItem,false,false);
return false;
}
}
I have been working on the code for an alpha sort file and have become stumped. I need to incorporate both an insertion sort & selection sort method into my code before it will run. I attached the file I have been working on and it runs on Bluej with Java JDK. I would apretiate if you could take a look at it. If you would prefer not to download my file I have posted my code that I have been working on below. I am not familiar with the structure of an insertion sort or a selection sort mothod. I also am not clear on the point in which these methods would need to be placed in the file. Code: import java.io.*;
import java.util.*;
public class Words
{
ArrayList<String> words;
public Words()
{
words = getData("wordlist.txt");
}
public void displayWords()
{
for(int i=0; i<words.size(); i++) {
System.out.println(words.get(i));
}
}
public ArrayList<String> getData(String filename)
{
ArrayList<String> list = new ArrayList<String>();
File myFile = new File(filename);
if(myFile.exists() && myFile.length()>0) {
try {
BufferedReader in = new BufferedReader( new FileReader(myFile) );
String word = in.readLine();
while( word != null ) {
list.add(word);
word = in.readLine();
}
} catch( Exception e )
{}
}
return list;
}
}
Hi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg 1. Go to drugstore.com 2. click on "international link" at the right hand top corner 3. An over lay appears where you can select country and currency drop down is auto filled. 4. Click on Update country & currency button updates the site for that country and 5. Click on Proceed as US customer updates site for US customer. 1. Go to drugstore.com 2. Click on any tab like hair care and add a product to bag 3. Click on international link at the right hand top corner 4. An over lay appears where you can select country and currency drop down is auto filled. 5. Click on Update country & currency button does not update the country on the website. Any help is very much appreciated. Thanks in advance!! Hi, just a quick question. Is it possible to make an array lowercase at all? or can you only do this with a string? Thanks. I have a document list of several hundred drug names where some are lower case and some are all caps. I want to bold only the lower case drug names but don't want to do it manually. Is there a java script that I can apply where it automatically does that for me?
Hi everyone, I've been trying to amend this so that when I paste text in with a mouse it changes to uppercase automatically. Does anyone know how this can be done? Code: <html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="upperCase(this.id)" />
</body>
</html>
Thanks This is pretty basic. I have a coupon code text box and need to ensure whatever the user enters is converted to uppercase before it is validated. The problem is, someone else wrote the code and I have no idea where or how to put in the code to change the text to uppercase. I would appreciate your help. Payment.php: PHP Code: <input type="text" name="coupon" id="coupon-input" class="coupon-input" placeholder="Enter coupon code" style="color:#000;"> <input class="bt2 apply-btn" type="button" value="Apply" id="apply-btn"> <script> // When the browser is ready... $(function(){ $("#apply-btn").click(function(){ $("#apply-btn").attr("disabled", "disabled"); $("#apply-btn").val('Checking'); $("#amount").val(<?php echo number_format($item_price, 2); ?>); $(".form-product-details").html('<b>$<span id="input_14_1001_price"><?php echo number_format($item_price, 2); ?></span></b>'); $.ajax({ url: 'validate-coupon.php', type: "POST", data: {val: $("#coupon-input").val(), amt:$("#amount").val()}, dataType: 'JSON', success: function(res) { $("#apply-btn").val('Apply'); $("#apply-btn").prop("disabled", false); if(res.type=='error'){ $("#msg").html("<span style='color:red;font-weight:bold;'>Invalid Coupon.</span>"); } else { $("#msg").html("<span style='color:green;font-weight:bold;'>Coupon is valid.</span>"); $(".form-product-details").html('<b><span style="text-decoration:line-through">$<?php echo number_format($item_price, 2); ?></span> $<span id="input_14_1001_price" class="underlined">'+res.amt+'</span><br /><span>'+res.msg+'</span></b>'); $("#amount").val(res.amt); } } }); }); }); </script> validate-coupon.php: PHP Code: $coupon = array( array("code" => "COUPON50", 'value'=>'50', 'type'=>'P'), ); if(isset($_POST['val']) && $_POST['val']!='' && isset($_POST['amt']) && $_POST['amt']!=''){ $matched = false; foreach($coupon as $coup){ if($coup['code']==$_POST['val']){ $matched = true; $amt = $_POST['amt']; if($coup['type']=='P'){ $new_amt = $amt - ($amt/100)*$coup['value']; $msg = $coup['value']."% off coupon code applied"; } else if($coup['type']=='F'){ $new_amt = $amt - $coup['value']; $msg = "$".$coup['value']." off coupon code applied"; } break; } } if($matched){ echo json_encode(array("type" => "success", 'amt'=>number_format($new_amt, 2), 'msg'=>$msg)); } else { echo json_encode(array("type" => "error")); } } else { echo json_encode(array("type" => "error")); } exit; This should be simple, but I can't quite get it to work without some kind of side-effect. I've checked the forum and there doesn't seem to be anything that directly relates. What I want to do is convert the text that a user is typing to uppercase as they type it. What I have so far: function convertToUppercase(aControl) { var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"; if (cursorKeys.indexOf(event.keyCode+";") == -1) { aControl.value = aControl.value.toUpperCase(); } } <input onkeyup="convertToUppercase(this)"/> The problem that I have is that this moves the cursor to the end of the line after every character. If you want to go and add something to the middle of what you've typed, you can type one character and then the cursor jumps to the end. e.g. inserting "abc" between the "R" and "E" of "FRED" gets you: FRAEDBC What I need is either: 1) ability to get the cursor/caret position and restore it after I set the uppercase string -- or -- 2) ability to intercept the keystroke in the event and make it uppercase before the browser adds it naturally to the input's value. Solution should be browser-independent (if at all possible). I'm mostly interested in IE though. Thanks, Chris Hi, Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
<label>
<select name="Category" id="Category">
</select>
</label>
</form>
</body>
</html>
and my script.js: Code: function fillCategory(){
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}
I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same Code: var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
This works fine for me. But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox. Can anyone please advice me with an better solution? Hi, I have an application wherein for one page I want to display a Listbox on selection of a radio button. There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options. Can anybody pls help me with this as I'm a beginner to JS.. Many thanks Pooja. I'm probably not allowed to request something like this, but since this is a small amount of code I think I should do it anyways :P Okey, so I have two listboxes and I want a tickbox to enable one listbox and disable one listbox as you tick a checkbox. I want one listbox disabled by default and the other enabled and then vice-verca the disable when you tick the box. If someone could supply me with that code I would be really greatful, butyou don't need to bother with the HTML, I should figure it out from the JS. Thanks in advance <3 hello I have a listbox full of names on a PHP website and was wondering if there was a way to grab the value during a double click to bring me to another form to display the name and information? Hello, I'm trying to fill an array with the values of a listbox from a SQL query but somehow I can only get the first word of each registry Code:
var arrayX=[];
function getValue(){
var x=document.getElementById("combo_color");
for (var i = 0; i < x.options.length; i++) {
if(x[i].value!=''){
arrayX.push(x[i].value);
}
}
}
for example, with the color Green Karanka I only get Green inside the array, the same happens with any color with more than one word, any ideas? Thanks. Hi there, I have a listbox and an Edit button. The user will need to click on the email address in the listbox before clicking on the button to edit. But then, the email address will be displayed on the prompt box's textbox, and even without editing it, the user can get scot-free. I would want to remove the email address on the prompt box's textbox, and also to check for null entries. If it is null, it will display an alert message. Else, it will check if it is a valid email address. My code is as follow: Code: function editItem()
{
var listbox = document.getElementById('listBox'); // listbox control id
var newValue = lst.value;
if(newValue != "")
{
var newItem = prompt("Enter the new email address",newValue);
if(newItem == "")
{
alert("Please key in an email address into the textbox.");
return false;
}
else
{
listbox.options[listbox.selectedIndex] = new Option(newItem,newItem,false,false);
return false;
arrTexts = new Array();
validRegExp =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
// search email text for regular exp matches
if (arrTexts.value.search(validRegExp) ==-1 )
{
alert('A valid e-mail address is required.\nPlease try again.');
return false;
}
else
{
for(i=0; i<listbox.length; i++)
{
arrTexts[i] = lst.options[i].text;
}
arrTexts.sort();
for(i=0; i<listbox.length; i++)
{
listbox.options[i].text = arrTexts[i];
listbox.options[i].value = arrTexts[i];
}
}
}
}
else
{
alert('Select Item From The List To Edit ');
}
}
HTML Code: select id="lstBxEmail" name="listBoxEmail" size="6" style="width: 580px;"> <option>figFruit@msn.com</option> <option>apple@hotmail.com</option> <option>cherry@yahoo.com</option> <option>banana@hotmail.com</option> <option>elephantApple@ymail.com</option> <option>durian@gmail.com</option> </select> <select id="listBox" name="listBox" size="3" style="width: 580px;"> <option>hello@msn.com</option> <option>wowAmusers@hotmail.com</option> <option>yrulikethis@yahoo.com</option> </select> Hi I've been working on a listbox full of employees for our company intranet. Each name has an onchange tag that calls up a floor map and that part works fine but I'd really like to populate the names from an XML list so it's easier for non-IT people to maintain. I've been doing alot of web searches on the subject which comes up alot but it's mostly just fragments of what I need being that I've got no javascript background. I found a helpful tutorial on javascriptkit but that wasn't for creating listboxes so I'm only part of the way there. This is the XML file I've got (there will eventually be 400 entries): <?xml version="1.0"?> <list> <employee> <name>##########</name> <office>1656</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>##########</email> </employee> <employee> <name>#########</name> <office>1657</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>###########</email> </employee> </list> The most important parts are the name which will be used as the text of the box and the office number which will determine which floorplan is displayed. I added the other information so I can potentially put it in a div display later but that can wait. Can anyone help point me to some good resources on this subject? Thanks. |
|||||||