Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts

    Input boxes -> select fields

    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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 603 Times in 583 Posts
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts
    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 />

    Last edited by m1kcal; 05-29-2009 at 02:21 PM.


    Posting Permissions

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