SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie - how do I add a field value to a list?

    I want the user to be able to enter some text (a date actually) and click a button. The button would cause the field value to be added to a static list of dates.

    I would then process those dates using an array in php.

    I also need to be able to delete from that list as well. So I guess a list box would be the element of choice.

    Any ideas or links on how to do this?

    Many thanks.

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is that what you mean?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Add to a List of Dates</title>

    <meta name="keywords" content=""></meta>
    <meta name="description" content="..."></meta>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"></meta>
    <meta name="ROBOTS" content="INDEX,FOLLOW"></meta>

    <link rel="stylesheet" type="text/css" href=".css" />

    <script type="text/javascript">
    window.onload = prepareForm;

    function prepareForm() {
    if (!document.getElementById) return false;
    if (!document.getElementById('guessList')) return false; // the list of dates
    if (!document.getElementById('dateGuess')) return false; // the text input box
    if (!document.getElementById('addGuess')) return false; // button to add new date to guessList
    theButton = document.getElementById('addGuess');
    theButton.onclick=function() {
    addListItem();
    } // theButton.onclick=function()
    } // function prepareForm()

    function addListItem() {
    var dateGuessValue;
    var listItem, listItemText;
    var theGuessList;
    dateGuessValue = document.getElementById('dateGuess').value; // dateGuess is a text input box
    listItem = document.createElement('li');
    listItemText = document.createTextNode(dateGuessValue);
    listItem.appendChild(listItemText);
    theGuessList = document.getElementById('guessList'); // guessList is an unordered list
    theGuessList.appendChild(listItem);
    } // function addListItem()

    </script>


    </head>

    <body>

    <h1>A Form</h1>
    <h2>with a List of Dates and an Entry Box</h2>

    <p>The user can enter a date which will be added to a list of dates already existing on the page.</p>

    <h3>When Will the World End?</h3>

    <form action="#" name="form1">
    <fieldset>
    <legend>Enter a Date</legend>

    <p><label for="dateGuess">Enter Your Guess: <input type="text" id="dateGuess" name="dateGuess" value="Day Month, Year" /></label></p>
    <p><input type="button" id="addGuess" value="Add My Guess" /></p>

    </fieldset>
    </form>

    <h3>Guesses so Far</h3>
    <ul id="guessList">
    <li>25 March, 2028</li>
    <li>11 November, 2049</li>
    <li>5 May, 2090</li>
    <li>4 August, 2033</li>
    <li>16 September, 2040</li>
    </ul>

    </body>
    </html>


Bookmarks

Posting Permissions

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