JavaScript - Access Listbox Options Using Multiple Frames

Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some.

After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have.

So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose.

Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea.

Code:

<label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, matchtype FROM matchtypes';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
                }
                ?>
            </select>

<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters ORDER BY `character`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>

Hi All

Not sure if this is the right place to post but could do with some help.

Scenario:

1 Box holds 3 items, Complete box weighs 75g, each item 25g, customer chooses their own 3 combo items. This could be the same all the same item or 3 different items.

I need a script that will require the selections to make up 75g in order to continue the process. i.e customer can only continue when 3 items / 75g worth are selected.



Here is a short version, I have about 12 selectors at the moment and possible more will be created (if that matters).

Code:

<form name="cart_quantity" action="myProduct?action=add_product" method="post" enctype="multipart/form-data">
<
    <div class="placeholder">
    <img src="" alt="Image Placeholder" />
    </div>
<label class="attribsSelect" for="attrib-6">Hard Boiled 1</label><br />
<select name="id[6]" id="attrib-6">
  <option value="">Select Portion</option>
  <option value="24">25g</option>
  <option value="25">50g</option>
  <option value="26">75g</option>
</select>

    <div class="placeholder">
    <img src="" alt="Image Placeholder" />
    </div>
   <label class="attribsSelect" for="attrib-7">Hard Boiled 2</label><br />
<select name="id[7]" id="attrib-7">
  <option value="">Select Portion</option>
  <option value="27">25g</option>
  <option value="28">50g</option>
  <option value="29">75g</option>
</select>

    <div class="placeholder">
    <img src="" alt="Image Placeholder" />
    </div>
   <label class="attribsSelect" for="attrib-8">Hard Boiled 3</label><br />
<select name="id[8]" id="attrib-8">
  <option value="">Select Portion</option>
  <option value="30">25g</option>
  <option value="31">50g</option>
  <option value="32">75g</option>
</select>

    <div class="placeholder">
    <img src="" alt="Image Placeholder" />
    </div>
   <label class="attribsSelect" for="attrib-9">Hard Boiled 4</label><br />
<select name="id[9]" id="attrib-9">
  <option value="">Select Portion</option>
  <option value="33">25g</option>
  <option value="34">50g</option>
  <option value="35">75g</option>
</select>

</form>

The section of the form is just the portion with selctors, there are other fields with radio buttons for color choice etc.

I have searched for something like this all over but cant find it.
Please please please could some genius out there help.

Thanks in advance

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

Normally I would just use document.getElementById to get anything I need but here is my problem:

I have a zip code control that I load using AJAX. it has city, state, country, county and zip code. This gets loaded within a business application and at one point you can have both a bill to and ship to address forms on the screen at the same time, loading my zip control with the same fields, same ids and same name. This forced me to now pass in the form name that contains the control.

I need to get to divs and spans within this form. Primarily as you type in a city or zip code, I am doing a hot search with a popup div that shows you results you can quickly choose from. The only time this becomes an issue is the situation I mentioned before when the zip code control is on the screen twice. I am not certain how to access the innerHTML of a span or div by way of the form name. Is this possible and if so what is the proper syntax?

Here is a very basic example at its simplest form of my problem.
Code:

<form name="frm_billto" id="frm_billto">
<span id="myspan">Hello</span>
</form>

<form name="frm_shipto" id="frm_shipto">
<span id="myspan">World</span>
</form>

In the above example because the control was loaded twice, I now have 2 spans with the same ID. I want the innerHTML of the each span based on the form they are in.

We wanted one control that we could use throughout the system that we could update in one place and the entire application be updated. Unfortunately we did not anticipate having it load more than once on the page.

Thank you for any help

Hello,

I am not the best JS programmer, but I was wondering...

Is there a way to do this:

HTML Document /w/ 2 frames, A & B.

When you click a button in frame A:
"Click" (X,Y coords) in frame B.

If that's not possible in JS, please let me know what language I need.

- Waffles

Okay, I'm having some trouble getting my head around how to do this..

Code:

<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select>
<option value="Rhino">Rhino</option>
<option value="Bird">Bird</option>
<option value="Rooster">Rooster</option>
</select>

<select>
<option value="0202A">Rhino - Text</option>
<option value="0203A">Rhino - Text2</option>
<option value="0204A">Bird - Text1</option>
<option value="0205A">Bird - Text2</option>
<option value="0202B">Rhino - Text</option>
<option value="0204B">Rhino - Text2</option>
<option value="0204C">Rooster - Text1</option>
<option value="0205C">Rooster - Text2</option>
<option value="0206C">Rooster - Text3</option>
</select>

So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down.

Just can't figure this out. >.<

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

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", "");
}

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 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'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.

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>

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?

Hi, I've been working on a company directory page where a listbox called "People" in a form called "people_form" contains 400 employee names. I made the box "multiple" just so I could have it big and easier to find names but I decided a search box would be really useful. I've looked up a few such search scripts but so far the two I've tried haven't worked. The latest one when it's installed on the page, nothing happens when you type characters into it (it's supposed to jump to an entry matching the first few letters). Although if I backspace then it selects EVERY name in the list

Here's the current form with the input tag being the search box (oh the options are populated by java script):

<form name="people_form">

<input type="text" id="realtxt" onkeyup="searchSel()"></input>

<select onchange="display(this.value); return false;" multiple="multiple" id="People" name="People" style="border-style: none; height:198px; width:220px;">
<option value="">Loading</option>
</select></form>



And here's the actual search function in the head of the page in the script tags:

function searchSel() {
var input=document.getElementById('realtxt').value.toLowerCase();
var output=document.getElementById('People').options;
for(var i=0;i<output.length;i++) {
if(output[i].value.indexOf(input)==0){
output[i].selected=true;
}
if(document.forms[0].realtxt.value==''){
output[0].selected=true;
}
}
}


If you know of a script that will work properly I'd appreciate it. For convenience I'm looking for one that jumps to selections inside the listbox as opposed to one where you click a search button and get results somewhere else.