Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic Table Row

    Hello

    Something here seems to be a near miss??
    The idea here is I want to insert a row within the table based on the value of select.

    Code:
    <table border="0" class="newformshift">
                                    <tr>
                                      <td align="right" nowrap class="newformlabel">Please Enter Your Quantity:</td>
                                      <td valign="top" nowrap class="newformlabel"><input name="nMug" type="text" class="newformobjects" value="0" size="3" maxlength="3"></td>
                                    </tr>
                                    <tr>
                                      <td align="right" nowrap class="newformlabel"> Select Mug Size </td>
                                      <td class="newformlabel"><select name="nMugSize" id="sBasePN" class="newformobjects">
                                          <option value="IMUG11" selected>11 oz Mug</option>
                                          <option value="IMUG15">15 oz Mug</option>
                                        </select></td>
                                    </tr>
                                    <tr>
                                      <td align="right" nowrap class="newformlabel">Submit print details now or later?</td>
                                      <td class="newformlabel"><select name="select" class="newformobjects" id="select" onClick="LongForm()">
                                          <option>Submit Details Now</option>
                                          <option>Submit Details Later</option>
                                        </select></td>
                                    </tr>
                                    <script type="text/javascript">
    function LongForm()
    {
    	var Choice = document.main.select.value;
    	if (Choice == "Submit Details Now")
    	{
    document.getElementById('LongFormContent').innerHTML = ("<tr><td align=\"right\" nowrap class=\"newformlabel\">Image or test?</td><td class=\"newformlabel\"><select name=\"PrintWhat\" class=\"newformobjects\" id=\"select\"><option>Submit Details Now</option><option>Submit Details Later</option></select></td></tr>"); 
    	}
    	else
    	{
    	document.getElementById('LongFormContent').innerHTML = (""); 
    	}
    }
    </script>
                                    <div id="LongFormContent"></div>
                                    <tr>
                                      <td align="right" nowrap class="newformlabel">Click Next to Continue </td>
                                      <td class="newformlabel"><input type="submit" name="submit" class="newformobjects" value="Next &gt;"></td>
                                    </tr>
                                  </table>
    It's creating the row, but not adding it to the table.
    What am I doing wrong here?

    Thanks
    Elso

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,682
    Thanks
    25
    Thanked 656 Times in 655 Posts
    Take a look at your select dropdown. Normally you should use a 'onchange' not 'onClick'. Also the way you wrote it there would be no change if the user wanted to submit his details now. See?
    Code:
    <select name="select" class="newformobjects" id="select" onchange="LongForm(this.value)">
    	<option value=''>make a selection</option>
    	<option value='now'>Submit Details Now</option>
    	<option value='later'>Submit Details Later</option>
    </select>
    This method adds a value to each selection and 'this.value' passes that value to the function so you don't need to go looking for it in the function.

    JS handles tables a lot differently than what you wrote. See my code for how to insert rows and cells. I also used some CSS to make the cell alignment come out the way you wanted which means I removed some classes. If you need to use classes in the ones I removed change their names.

    Code:
    <style type="text/css">
    td{
    	text-align:right;
    }
    .newformlabel{
    	text-align:left;
    }
    
    </style>
    
    <table border="1" class="newformshift" id="myTable">
    <tr>
    <td nowrap>Please Enter Your Quantity:</td>
    <td class="newformlabel"  valign="top" nowrap>
    <input name="nMug" type="text" class="newformobjects" value="0" size="3" maxlength="3">
    </td>
    </tr>
    <tr>
    <td nowrap> Select Mug Size </td>
    <td class="newformlabel" ><select name="nMugSize" id="sBasePN" class="newformobjects">
    <option value="IMUG11" selected>11 oz Mug</option>
    <option value="IMUG15">15 oz Mug</option>
    </select></td>
    </tr>
    <tr>
    <td nowrap>Submit print details now or later?</td>
    <td class="newformlabel">
    <select name="select" class="newformobjects" id="select" onchange="LongForm(this.value)">
    	<option value=''>make a selection</option>
    	<option value='now'>Submit Details Now</option>
    	<option value='later'>Submit Details Later</option>
    </select>
    </td>
    </tr>
    <tr>
    <td nowrap >Click Next to Continue  </td>
    <td class="newformlabel" ><input type="submit" name="submit" class="newformobjects" value="Next &gt;"></td>
    </tr>
    </table>
    
    <script type="text/javascript">
    	function LongForm(Choice){
    		if (Choice == "now"){
    			table = document.getElementById('myTable');
    			var row = table.insertRow(3);
    			var cell1 = row.insertCell(0);
    			var cell2 = row.insertCell(1);
    			cell1.innerHTML = "Image or test?";
    			cell2.innerHTML = '<select name=\"PrintWhat\" class=\"newformobjects\" id=\"select\"><option>Submit Details Now</option><option>Submit Details Later</option></select>';
    		}
    }
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your insight here. Not sure why I never received an e-mail notice of a response, but anyway, I did a lot of reading and poking around to see what I was doing wrong. I did come up with a very similar method as you outlined, bu then this posed additional obstacles and that being to remove the row if the later Choice is selected but only if the added row exist. I did finally come up with a method that both adds and removes the row, but since I am no expert here I am open to any better ideas.

    Table:
    Code:
    <table id="orderTable" border="0" class="newformshift">
                                      <tr>
                                        <td align="right" nowrap class="newformlabel">Please Enter Your Quantity:</td>
                                        <td valign="top" nowrap class="newformlabel"><input name="nMug" type="text" class="newformobjects" value="0" size="3" maxlength="3"></td>
                                      </tr>
                                      <tr>
                                        <td align="right" nowrap class="newformlabel">
                                    Select Mug Size   </td>
                                        <td class="newformlabel"><select name="nMugSize" id="sBasePN" class="newformobjects">
                                          <option value="IMUG11" selected>11 oz Mug</option>
                                          <option value="IMUG15">15 oz Mug</option>
                                        </select></td>
                                      </tr>
                                      <tr>
                                        <td align="right" nowrap class="newformlabel">Submit print details now or later?</td>
                                        <td class="newformlabel"><select name="select" class="newformobjects" id="select" onChange="LongForm()">
                                          <option>Submit Details Now</option>
                                          <option selected>Submit Details Later</option>
                                        </select></td>
                                      </tr><tr>
                                        <td align="right" nowrap class="newformlabel">Click Next to Continue                                    </td>
                                        <td class="newformlabel"><input type="submit" name="submit" class="newformobjects" value="Next &gt;"></td>
                                      </tr>
                                                                        
                                    </table>
    My JavaScript:
    Code:
    <script type="text/javascript">
    var x = document.getElementById("orderTable").rows.length;
    function LongForm()
    {		
    var Choice = document.main.select.value;
    	if (Choice == "Submit Details Now")
    	{
    		if (x == 4)
    		{
    	var table = document.getElementById("orderTable");
    	var row = table.insertRow(3);
    	var cell1 = row.insertCell(0);
    	var cell2 = row.insertCell(1);
    	cell1.style.textAlign="right";
    	cell2.style.textAlign="left";
    	cell1.className = "newformlabel";
    	cell2.className = "newformlabel";
    cell1.innerHTML = "Image or test?";
    cell2.innerHTML = "<select name=\"PrintWhat\" class=\"newformobjects\" id=\"PrintWhat\"><option>Option 1</option><option>Option 2</option></select>";
    		}
    	}
    	else if (Choice == "Submit Details Later")
    	{
    		var r = document.getElementById("orderTable").rows.length;
    		 if (r == 5) 
    		{
    		document.getElementById("orderTable").deleteRow(3);
    		}
    	}
    }
    </script>
    Couldn't figure out how to string the 2 "if" statements together like:
    Code:
    if ((Choice == "Submit Details Now") && (if (x == 4)))
    Thanks again

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,682
    Thanks
    25
    Thanked 656 Times in 655 Posts
    You didn't take time to fix your code, but just added more problems to it and want help when you didn't take the first help you received. Fix your code and repost and i'll tel you what you are doing wrong. But when you fix it you might see the error.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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