Dynamically Add Elements with Javascript?

Discussion in 'Javascript' started by Greg Scharlemann, Nov 13, 2006.

  1. I'm not sure the best way to accomplish this... my hunch is with
    javascript, but I'm not sure if using server side code (PHP) would be
    easier.

    I'm adding people to a database. People have a first name, last name,
    and a undetermined number of Cities and States with which they can be
    associated. I've got a drop down box that I would like to use to
    display the number of inputs to allow for city/state entry. I would
    like to dynamically increase or decrease the inputs based on a user
    changing the selection in the drop down box, without submitting the
    script. Only the first city and state are required (which is why the
    label is bold). Any ideas on the best way to handle this without
    losing any potential city information that may have been previously
    typed into the input (i.e. if I type San Fran into city0 and CA into
    state0 and then change the number of cities to 4 - I'd like San Fran
    and CA to still be populated in city0 and state0).

    Here's my test page (I hard coded 2 city and state lines to better
    demonstrate what I'm trying to achieve, default would be only one city
    and state line):

    <!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>
    </head>

    <body>
    <form method="post" action="add.php" name="add" id="add">
    <b>First Name:</b>
    &nbsp;<input type="text" name="firstName" value="" size="30"
    maxlength="40" />
    <br/>
    <b>Last Name:</b>
    &nbsp;<input type="text" name="lastName" value="" size="30"
    maxlength="40" />
    <br/>
    <b>City:</b>
    &nbsp;<input type="text" name="city0" size="20" value=""
    maxlength="100" />
    &nbsp;&nbsp;&nbsp;<b>State:</b>
    <select name="state0" size="1">
    <option value=""></option>
    <option value="AK" >AK</option>
    <option value="AL" >AL</option>
    <option value="AR" >AR</option>
    <option value="AZ" >AZ</option>
    <option value="CA" >CA</option>
    <option value="CO" >CO</option>
    <option value="CT" >CT</option>
    </select><br/>
    City:
    &nbsp;<input type="text" name="city0" size="20" value=""
    maxlength="100" />
    &nbsp;&nbsp;&nbsp;State:
    <select name="state0" size="1">
    <option value=""></option>
    <option value="AK" >AK</option>
    <option value="AL" >AL</option>
    <option value="AR" >AR</option>
    <option value="AZ" >AZ</option>
    <option value="CA" >CA</option>
    <option value="CO" >CO</option>
    <option value="CT" >CT</option>
    </select><br/>
    Number of Cities:&nbsp;
    <select name="showCity"
    onchange="javascript:document.forms['add'].submit();">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select><br/>
    <input type="submit" name="submit" value="Add" class="search" />
    </form>
    </body>
    </html>
    --------------------------------------------------------

    Any thoughts/help/direction/advice is greatly appreciated! I've been
    playing with this one all day!
     
    Greg Scharlemann, Nov 13, 2006
    #1
    1. Advertising

  2. Greg Scharlemann

    Guest

    you basically have two choices.

    You can put a hidden input in the form which contains details of how
    far down the data entry you are and when the user has selected a state,
    you submit the form (either to a new page or back to itself) and in the
    PHP file you do a conditional check for the value of the hidden input
    in $_POST (assuming you are using post).

    You can then rebuild the form with the values the operator selected
    originally and add the extra fields you need to complete the data.

    OR.

    You can build an Ajax script and on completion of the first dropdown
    box, call a javascript function to call a url to a php page that
    generates the drop down list and returns the details and use the
    response handler to replace the innerHTML of the second drop down list.

    The second version looks better because there is no page refresh,
    however it relies on the operator having javascript enabled on their
    browser and all the data entered will be lost if the user hits the back
    button or refreshes the page unless you do some really complicated
    stuff on the back end.

    sample code for php:-

    if (!($_POST('actionType'))) // action type doesnt exist
    {
    print "<FORM><input type = text name = someText/> <input type=hidden
    name=actionType value=firstPart /><input type=submit value=submit
    /></FORM>";
    }
    if ($_POST('actionType')== firstPart)// first part has been submitted
    {
    print "<FORM><input type = text name = someText
    value=$_POST('actionType')/><input type=text name=someMoreText/> <input
    type=hidden name=actionType value=secondPart /><input type=submit
    value=submit /></FORM>";
    }

    Note that in the second form, the someText field takes the submitted
    value from $_POST as its default.
     
    , Nov 13, 2006
    #2
    1. Advertising

  3. Greg Scharlemann

    ASM Guest

    Greg Scharlemann a écrit :
    >
    > Here's my test page (I hard coded 2 city and state lines to better
    > demonstrate what I'm trying to achieve, default would be only one city
    > and state line):


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

    <script type="text/javascript">
    var idx = 0;
    function addChoice() {
    idx++;
    if(idx==4) {
    alert('no more choice possible to add');
    return true;
    }
    var A = document.forms['add'].city0.cloneNode(true);
    A.name = 'city'+idx;
    A.value = '';
    var P = document.createElement('p');
    var B = document.createElement('b');
    var T = document.createTextNode('City '+(+1+idx)+' : ');
    B.appendChild(T);
    P.appendChild(B);
    P.appendChild(A);
    A = document.forms['add'].state0.cloneNode(true);;
    A.name = 'state'+idx;
    A.selectedIndex = -1;
    var B = document.createElement('b');
    T = document.createTextNode('State '+(+1+idx)+' : ');
    B.appendChild(T);
    P.appendChild(B);
    P.appendChild(A);
    var target = document.add;
    var position = document.forms['add'].submit.parentNode;
    target.insertBefore(P, position);
    document.forms['add']['city'+idx].focus();
    document.forms['add']['city'+idx].select();
    return false;
    }
    </script>
    </head>

    <body>
    <form method="post" action="add.php" name="add" id="add"
    onsubmit="return addChoice();">
    <p><b>First Name:</b>
    &nbsp;<input type="text" name="firstName" value="" size="30"
    maxlength="40" />
    <br/>
    <b>Last Name:</b>
    &nbsp;<input type="text" name="lastName" value="" size="30"
    maxlength="40" />
    </p>
    <p><b>City:</b>
    &nbsp;<input type="text" name="city0" size="20" value=""
    maxlength="100" />
    &nbsp;&nbsp;<b>State:</b>
    <select name="state0" size="1">
    <option value=""></option>
    <option value="AK" >AK</option>
    <option value="AL" >AL</option>
    <option value="AR" >AR</option>
    <option value="AZ" >AZ</option>
    <option value="CA" >CA</option>
    <option value="CO" >CO</option>
    <option value="CT" >CT</option>
    </select>
    </p>
    <p style="text-align:center;border-top:1px solid brown">
    Add a choice of Citie :
    <input type="submit" name="submit" value="Add" class="search" />
    </p>
    </form>
    </body>
    </html>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
    ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles
     
    ASM, Nov 13, 2006
    #3
  4. Greg Scharlemann

    macbis Guest

    I used javascript to solve a similar problem. I found this article
    very helpful:

    http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

    Greg Scharlemann wrote:
    > I'm not sure the best way to accomplish this... my hunch is with
    > javascript, but I'm not sure if using server side code (PHP) would be
    > easier.
    >
    > I'm adding people to a database. People have a first name, last name,
    > and a undetermined number of Cities and States with which they can be
    > associated. I've got a drop down box that I would like to use to
    > display the number of inputs to allow for city/state entry. I would
    > like to dynamically increase or decrease the inputs based on a user
    > changing the selection in the drop down box, without submitting the
    > script. Only the first city and state are required (which is why the
    > label is bold). Any ideas on the best way to handle this without
    > losing any potential city information that may have been previously
    > typed into the input (i.e. if I type San Fran into city0 and CA into
    > state0 and then change the number of cities to 4 - I'd like San Fran
    > and CA to still be populated in city0 and state0).
     
    macbis, Nov 13, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wolfgang Lipp
    Replies:
    1
    Views:
    418
    Patrick TJ McPhee
    Jan 30, 2004
  2. P
    Replies:
    1
    Views:
    1,207
    Joe Kesselman
    Jul 7, 2006
  3. Replies:
    7
    Views:
    599
    Richard Herring
    Jun 13, 2006
  4. ton
    Replies:
    3
    Views:
    1,610
  5. Replies:
    8
    Views:
    769
    Randy Webb
    Jan 11, 2006
Loading...

Share This Page