View Full Version : Input boxes -> select fields

05-27-2009, 11:39 PM
Hi. I run into a problem and I would appreciate any help. I am working on a project that requires me to insert info in input boxes (2 input boxes to be specific, firstname, and last name are the two) and transfer that info into a <select> field when the button is clicked. So, let's say in the first input box which is first name I type Tom and in the second input box which is last name I type Smith. When I click the button I want the first and last name to appear in the select field as an option. Now, i tried researching about adding/removing options for the select field, but nothing on getting info from input boxes to put it as an option in <select> . Can anyone help me or throw any idea? Thank you

rnd me
05-28-2009, 12:21 AM
depends largely on the HTML form coding.

generically, given three element objects, fName(inp), lName(inp), and allNames(select):

allNames.options[allNames.options.length]=new Option( lName.value +", "+ fName.value );

post your code for integration help.

05-29-2009, 12:59 PM
K, I some modifications. I am only dealing with the members portion of this web page. When you insert the last name for the members and click the Add button, it adds the option in the <select> field but flashes and disappears in a split second. Here is what I have so far.

p.s.: I did the layout of the page in Microsoft Expression Web 2

<!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">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FINAL by DJ.iZ</title>

<script type="text/javascript" src="CalendarPopup.js"></script>
<script type="text/javascript">
var cal = new CalendarPopup();

function addOption(selectObject,playerLastname,optionValue) {
var optionObject = new Option(playerLastname)
var optionRank = selectObject.options.length

function deleteOption(selectObject,optionRank) {
if (selectObject.options.length!=0) { selectObject.options[optionRank]=null }

function testAdd() {
var formObject = document.example
if (formObject.playerLastname.value!="") {
} else {
alert("Fill form and click Add")

function testDelete() {
var formObject = document.example
if (formObject.allNames.selectedIndex!=-1) {
} else {
alert("Select an option and click Delete")

<style type="text/css">
.style1 {
color: #0000FF;
.style2 {
color: #000000;
.style3 {
font-weight: bold;

<h1><span class="style1">LCTC Whitewater Rafting</span></h1>
<h2><br class="style1" />
<span class="style1">Group Reservations <br />
<hr />
<form name="example">
<span class="style1"><strong>Rafting Date</strong></span><br />
<input type="text" name="date1" value="" size=25>
<a href="#" onClick="cal.select(document.forms['example'].date1,'anchor1','MM/dd/yyyy'); return false;"
name="anchor1" id="anchor1">select</a> <br /><br /><span class="style1">
<strong>Group Leader<br /></strong></span><span class="style2">Last Name
<input name="leaderLastname" style="width: 174px" type="text" /><br />First Name
<input name="leaderFirstname" style="width: 174px" type="text" /><br />Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="leaderPhone" style="width: 174px" type="text" /><br />Address&nbsp;&nbsp;&nbsp;
<input name="leaderAddress" style="width: 174px" type="text" /><br />City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="LeaderCity" type="text" style="width: 174px" /><br />State&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="leaderState" style="width: 174px" type="text" /><br />Zip&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="leaderZip" style="width: 174px" type="text" /></span><span class="style1"><strong><br />
<br />
</strong><br /><strong>Group Members<br />
<br />
</strong></span><span class="style2">Last Name </span><span class="style1">
<input class="style3" name="playerLastname" id="playerLastname" value="" style="width: 165px" type="text" /><br class="style2" />
<span class="style2">First Name </span>
<input class="style3" name="playerFirstname" id="playerFirstname" value="" style="width: 163px" type="text" /><br class="style2" />
<span class="style2">Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="style3" name="playerPhone" id="playerPhone" style="width: 164px" type="text" value=""/><br class="style2" />
<span class="style2">Address&nbsp;&nbsp;&nbsp;&nbsp; </span>
<input class="style3" name="playerAddress" id="playerAddress" style="width: 165px" type="text" value=""/><br class="style2" />
<span class="style2">City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="style3" name="playerCity" id="playerCity" style="width: 165px" type="text" value=""/><br class="style2" />
<span class="style2">State&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="style3" name="playerState" id="playerState" style="width: 166px" type="text" value=""/><br class="style2" />
<span class="style2">Zip</span><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="playerZip" style="width: 166px" id="playerZip" type="text" value=""/><br />
<br />
<select name="allNames" id="allNames" size="10" style="width: 202px; height: 193px"></select>
<br />
<br />
<input name="btnAdd" id="btnAdd" type="submit" value="Add Rafter" onClick="testAdd()"/>
<input name="btnDelete" id="btnDelete" type="submit" value="Delete Rafter" onclick="testDelete()"/>
<input name="btnUpdate" id="btnUpdate" type="submit" value="Update Info" /><br />
<br />
<br />
Group Discounts<br />
&nbsp;&nbsp;&nbsp; -Daily Rate: $49<br />
&nbsp;&nbsp;&nbsp; -5-10 Rafters: 10% discount<br />
&nbsp;&nbsp;&nbsp; -11-24 Rafters: 20% discount<br />
&nbsp;&nbsp;&nbsp; -25+ Rafters: 25% discount<br />
<br />
<br />
<br />
<input name="btnGroupreservation" id="btnGroupreservation" type="submit" value="Submit Group Reservation" /></strong></span><br />