Function not working as expected adding data to top of area with div at bottom

unkwntech · April 13, 2009

When I change the dropdown and the function is called the additional rows are added above the form when the div I am adding them to is at the bottom, this is the page as it stands now:

<!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>
<script language="javascript">
function changeFormLength()
{
var rows = document.getElementById('rows').value;
var i = 0;
while(i < rows)
{
	document.getElementById('rowSpace').innerHTML = document.getElementById('rowSpace').innerHTML +'\
	<tr>\
      <td><input type="text" name="firstname_'+i+'" id="firstname" /></td>\
      <td><input type="text" name="lastname_'+i+'" id="lastname" /></td>\
      <td><input name="cc_num_'+i+'" type="text" id="textfield3" size="20" maxlength="16" /></td>\
      <td><label>\
        <select name="cc_type_'+i+'" id="select">\
          <option value="visa" selected="selected">Visa</option>\
          <option value="mastercard">MasterCard</option>\
          <option value="discover">Discover</option>\
          <option value="amex">American Express</option>\
        </select>\
      </label></td>\
      <td><label>\
        <select name="cc_exp_m_'+i+'" id="cc_exp_m">\
          <option value="01">1 January</option>\
          <option value="02">2 Feburary</option>\
          <option value="03">3 March</option>\
          <option value="04">4 April</option>\
          <option value="05">5 May</option>\
          <option value="06">6 June</option>\
          <option value="07">7 July</option>\
          <option value="08">8 August</option>\
          <option value="09">9 September</option>\
          <option value="10">10 October</option>\
          <option value="11">11 November</option>\
          <option value="12">12 December</option>\
                </select>\
        /\
        <select name="cc_exp_y_'+i+'" id="cc_exp_y">\
          <option value="2009">2009</option>\
          <option value="2010">2010</option>\
          <option value="2011">2011</option>\
          <option value="2012">2012</option>\
          <option value="2013">2013</option>\
          <option value="2014">2014</option>\
          <option value="2015">2015</option>\
          <option value="2016">2016</option>\
          <option value="2017">2017</option>\
          <option value="2018">2018</option>\
          <option value="2019">2019</option>\
          <option value="2020">2020</option>\
        </select>\
      </label></td>\
      <td><input name="cc_cvv_'+i+'" type="text" id="cc_cvv" size="5" maxlength="4" /></td>\
      <td><input name="amt_'+i+'" type="text" id="amt" size="10" maxlength="7" /></td>\
    </tr>\
';
	i++;
}
}
</script>
</head>

<body>
  Add how many rows?<br />
  <select name="rows" id="rows" onchange="changeFormLength();">
    <option value="1" selected="selected">1</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
    <option value="60">60</option>
      </select>
<form id="form2" name="form2" method="post" action="">
  <label></label>
  <label></label>
  <label></label>
  <table width="78%" border="0" cellpadding="2">
    <tr>
      <td width="17%">First Name</td>
      <td width="17%">Last Name</td>
      <td width="14%">Card Number</td>
      <td width="16%">Card Type</td>
      <td width="23%">Card Expiration</td>
      <td width="5%">CVV</td>
      <td width="8%">Ammount</td>
    </tr>
    <tr>
      <td><input type="text" name="firstname" id="firstname" /></td>
      <td><input type="text" name="lastname" id="textfield2" /></td>
      <td><input name="textfield3" type="cc_num" id="textfield3" size="20" maxlength="16" /></td>
      <td><label>
        <select name="cc_type" id="select">
          <option value="visa" selected="selected">Visa</option>
          <option value="mastercard">MasterCard</option>
          <option value="discover">Discover</option>
          <option value="amex">American Express</option>
        </select>
      </label></td>
      <td><label>
        <select name="cc_exp_m" id="cc_exp_m">
          <option value="01">1 January</option>
          <option value="02">2 Feburary</option>
          <option value="03">3 March</option>
          <option value="04">4 April</option>
          <option value="05">5 May</option>
          <option value="06">6 June</option>
          <option value="07">7 July</option>
          <option value="08">8 August</option>
          <option value="09">9 September</option>
          <option value="10">10 October</option>
          <option value="11">11 November</option>
          <option value="12">12 December</option>
                </select>
        /
        <select name="cc_exp_y" id="cc_exp_y">
          <option value="2009">2009</option>
          <option value="2010">2010</option>
          <option value="2011">2011</option>
          <option value="2012">2012</option>
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </label></td>
      <td><input name="cc_cvv" type="text" id="cc_cvv" size="5" maxlength="4" /></td>
      <td><input name="amt" type="text" id="amt" size="10" maxlength="7" /></td>
    </tr>
    <div id="rowSpace">
    </div>
  </table>
  </form>
</body>
</html>

Psycho · April 13, 2009

I can't tell from your code if you expect the select list to also remove rows or only to add rows. If it needs to delete rows when changing the value, it is much more difficult because of how different browsers count childNodes, but this will work to add rows (tested in IE & FF)

Note, change the field names to name[] so the values will be treated as an array by the processing page. Also, you should remove the IDs from the input fields since you can't have multiple items on a page with the same ID.

Also, I made the initial row hidden. Otherwise when you copy the row youalso copy any values the user has already entered.

<!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>
<script type="text/javascript">

function changeFormLength(newRows)
{
    //Create references to table bode and reference row
    var formObj = document.getElementById('form2').getElementsByTagName("TBODY")[0];
    var defRowObj = document.getElementById('defaultRow');

    for (var row = 1; row<=newRows; row++)
    {
        //Create new row object
        var newRow = document.createElement("TR");

        //Create the cells for th enew row
        for(i=0; i<defRowObj.childNodes.length; i++)
        {
            if (defRowObj.childNodes[i].tagName=='TD')
            {
                var newTDObj = document.createElement("TD");
                newTDObj.innerHTML = defRowObj.childNodes[i].innerHTML;
                newRow.appendChild(newTDObj);
            }
        }

        //Append the new row to the table
        formObj.appendChild(newRow);
    }

    return;
}
</script>
</head>

<body>
  Add how many rows?<br />
  <select name="rows" id="rows" onchange="changeFormLength(this[this.selectedIndex].value);">
    <option value="1" selected="selected">1</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
    <option value="60">60</option>
      </select>
<form id="form2" name="form2" method="post" action="">
  <label></label>
  <label></label>
  <label></label>
  <table width="78%" border="1" cellpadding="2">
    <tr>
      <td width="17%">First Name</td>
      <td width="17%">Last Name</td>
      <td width="14%">Card Number</td>
      <td width="16%">Card Type</td>
      <td width="23%">Card Expiration</td>
      <td width="5%">CVV</td>
      <td width="8%">Ammount</td>
    </tr>
    <tr id="defaultRow" style="display:none;">
      <td><input type="text" name="firstname[]" id="firstname" /></td>
      <td><input type="text" name="lastname[]" id="textfield2" /></td>
      <td><input name="textfield3[]" type="text" id="textfield3" size="20" maxlength="16" /></td>
      <td><label>
        <select name="cc_type[]" id="select">
          <option value="visa" selected="selected">Visa</option>
          <option value="mastercard">MasterCard</option>
          <option value="discover">Discover</option>
          <option value="amex">American Express</option>
        </select>
      </label></td>
      <td><label>
        <select name="cc_exp_m[]" id="cc_exp_m">
          <option value="01">1 January</option>
          <option value="02">2 Feburary</option>
          <option value="03">3 March</option>
          <option value="04">4 April</option>
          <option value="05">5 May</option>
          <option value="06">6 June</option>
          <option value="07">7 July</option>
          <option value="08">8 August</option>
          <option value="09">9 September</option>
          <option value="10">10 October</option>
          <option value="11">11 November</option>
          <option value="12">12 December</option>
                </select>
        /
        <select name="cc_exp_y[]" id="cc_exp_y">
          <option value="2009">2009</option>
          <option value="2010">2010</option>
          <option value="2011">2011</option>
          <option value="2012">2012</option>
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </label></td>
      <td><input type="text" name="cc_cvv[]" id="cc_cvv" size="5" maxlength="4" /></td>
      <td><input type="text" name="amt[]" id="amt" size="10" maxlength="7" /></td>
    </tr>
    <div id="rowSpace">
    </div>
  </table>
  </form>
</body>
</html>

Sign In

Function not working as expected adding data to top of area with div at bottom

Recommended Posts

unkwntech

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information