adding rows to table per click, manipulating name field thereby

I found this script which generates a row in a table.
I additionally want it to alter the name-field of the row it generates,
because the data of each newly generated row is needed to be saved into a database later.
However clicking only creates a row without renaming the name-field of that row.
I have cut everything into this code snippet so the code should be copy-pastable-working.

echo '<html><head>';
	echo '<title>Adding rows</title>';
	//the Java-script part which generates the new rows 
	//(i guess the "row-name"-manipulation must be embedded here, i just don't get how :-( )
	echo 
	'<SCRIPT language="javascript">
		  function addRowEntry(tableID){
			  var table = document.getElementById(tableID);
			  var rowCount = table.rows.length;
			  var row = table.insertRow(rowCount);
			  var colCount = table.rows[0].cells.length;
			  for(var i=0; i<colCount; i++) {
				  var newcell = row.insertCell(i);
				  newcell.innerHTML = table.rows[0].cells[i].innerHTML;
			  }
		  }
    </SCRIPT>';
	echo '</head>';
	//the body-part which contains the button with the "onclick"-call on that function
	echo '<body>';
	//the form which on submit should pass all those created rows into the $_POST-Variables
	echo '<form action="passToEvaluationScript.php" method="POST">';
	//the button with the "onClick"-call
	echo "<input type='button' value='add row entry' onClick=addRowEntry('myTable')>";
	//the table which get the additional row
	echo '<table id="myTable">';
	echo '<tr>';
	echo '<td>';
	//this element should actually be renamed each click
	//e.g. 10 consecutive clicks should create 10 of these "drop-down-boxes"
	//each named country1, country2, ........ country10 respectively
	echo '<SELECT name="country">
			<OPTION value="in">India</OPTION>
			<OPTION value="de">Germany</OPTION>
			<OPTION value="fr">France</OPTION>
			<OPTION value="us">United States</OPTION>
			<OPTION value="ch">Switzerland</OPTION>
          </SELECT>';
	echo '</td>';
	echo '</tr>';
	echo '</table>';
	echo '<input type="submit">';
	echo '</form>';
	echo '</body>';
	echo '</html>';

Thanks 4 any help.

3

Contributors

3

Replies

7 Months

Discussion Span

6 Months Ago

Last Updated

4

Views

keltik

Newbie Poster

16 posts since Nov 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

It's very bad practice to put all your HTML and JS into PHP echo's. It's fine for a couple tags, but if you're going to be putting a lot of code it's better to close the PHP tag and re-open it again if you need it.

That being said, you just need to create a counter and rather than duplicating the HTML code from the first row, just put your HTML with the counter included.

<html>
  <head>
    <title>Adding rows</title>

    <SCRIPT language="javascript">
   
      var numSelects = 1;

      function addRowEntry(tableID){
        numSelects++;
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = "<SELECT name='country" + numSelects + "'>
			         <OPTION value='in'>India</OPTION>
			         <OPTION value='de'>Germany</OPTION>
			         <OPTION value='fr'>France</OPTION>
			         <OPTION value='us'>United States</OPTION>
			         <OPTION value='ch'>Switzerland</OPTION>
                               </SELECT>";
        }
      }
    </SCRIPT>
  </head>

  <body>

    <form action="passToEvaluationScript.php" method="POST">

      <input type='button' value='add row entry' onClick="addRowEntry('myTable');">

        <table id="myTable">';
	  <tr>
	    <td>
              <SELECT name="country1">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
              </SELECT>
            </td>
          </tr>
        </table>

      <input type="submit" value="submit">
    </form>

  </body>

</html>

GliderPilot

Posting Whiz in Training

239 posts since Sep 2006

Reputation Points: 34

Solved Threads: 42

Skill Endorsements: 12

1 Year Ago

0

Used this script-code:

<SCRIPT language="javascript">
  function addRowEntry(tableID){
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;

      // create a row element
      var row = document.createElement("tr");
      // add the row to the table
      table.appendChild(row);

      var colCount = table.rows[0].cells.length;
      for(var i=0; i<colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      }
     // get the select element
     var dropdown = row.getElementsByTagName("select")[0];
     // get the current total of dropdowns in the table
     var total = table.getElementsByTagName("select").length;

     // set the name
     dropdown.setAttribute("name", "country" + total);
  }
</SCRIPT>

keltik

Newbie Poster

16 posts since Nov 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

6 Months Ago

0

hi guys, i these thread has been inactive for a while.

But I just want to ask, if let's say there were 5 added rows from the user.

How do I get those rows and values and save to DB or do a submit post?

Basically, what I mean how do I get those data that were added programmatically using PHP?

Thanks for any input.

cguan_77

Nearly a Posting Virtuoso

1,361 posts since Apr 2007

Reputation Points: 19

Solved Threads: 117

Skill Endorsements: 0

adding rows to table per click, manipulating name field thereby

This article has been dead for over three months: Start a new discussion instead