CODEWITHSUNDEEP
javascriptjqueryforms
Alistair Gimlette
Alistair Gimlette

Reputation: 15

Adding and removing extra forms

so I am creating a form to enter pupils names and their result into a database. the amount of entries will vary, so i want when the page to load 1 row where they can enter data and a + and - button at the bottom where you can add or remove extra lines for entering data.

I have tried to do the adding with little success and I didn't really know how to go about removing extra lines. visually it looks great but clicking the buttons at the bottom don'd do anything. Any ideas would be greatly appreciated!

Here is my code: 

<center>
<form action= "submit_results.php">

<div class="col-sm-12">
  <table>
    <tr>
      <td><h3>NAME OF PUPIL</h3></td>
      <td><h3>RESULT</h3></td>
    </tr>
</table>
<input type="text" name="name_pupil" id="i">
<input type="text" name="result" id="j">
    <br>
    <br>
    <a class="btn btn-info btn-lg" onclick="add_new_row">
      <span class="glyphicon glyphicon-plus"></span>
    </a>
    <a class="btn btn-info btn-lg" onclick="remove_new_row">
      <span class="glyphicon glyphicon-minus"></span>
    </a>
    <br>
    <br>
<input type="submit" value="Submit">
</div>
</form>
</center>

<script>
var i=0
var j=100
// i want different id numbers for the name of the pupil and their results where results=pupils+100 there will not be more than 100 entries
function add_new_row(){
  for (i++){
  container.appendChild(document.createTextNode("player" + (i+1)));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  // Append a line break
  container.appendChild(document.createElement("br"));

}

function remove_new_row(){
//dont know how to remove them!!
}
</script>

Upvotes: 1

Views: 47

Answers (1)

Sidd
Sidd

Reputation: 1397

I will simplify your example, say you have just a container div to which you want to add and remove rows. The rows can be anything, in your case it is rows of input. 

<div id="container"></div>
<button id="addRow">Add row</button>

No removal button. Because how will you know which row to remove? The remover must get the reference to the row it wants to remove. This is one way to do it, by creating them in the same function:

var idCounter, adder, container

idCounter = 0
adder = document.getElementById( "addRow" )
container = document.getElementById( "container" )

adder.onclick = function () {
   var input, remover, row

   input = document.createElement( 'input' )
   input.type = "text"
   input.name = "member_" + ( ++idCounter )
   input.placeholder = "Add details for member #" + idCounter + "..."

   remover = document.createElement( 'button' )
   remover.textContent = "Remove row"

   row = document.createElement( 'div' )
   row.appendChild( input )
   row.appendChild( remover )

   container.appendChild( row )

   remover.onclick = function ( ) {
     container.removeChild( row ) 
   }
}

Here you can see it in action: https://jsfiddle.net/ea1trbeb/

The logic is in the last two lines of the javascript - when you are adding a row, add a button whose job it is to remove that row when it is clicked. Makes sense to have the button right next to the row, so put it into the same div and there you have it.

For your existing rows of input (those that are not added by clicking on the adder button), you just need to add the logic to those buttons directly in your Javascript code. So - you can give your remover buttons a class (how about "remover") and then add a handler to all those buttons directly.

var removers = document.querySelectorAll( 'button.remover' )
for ( var i = 0; i < removers.length; i++ ) {
  removers[ i ].onclick = function ( e ) {
    var row = e.target.parentNode
    row.parentNode.removeChild( row ) 
  } 
}

So each button just finds its parent and removes it.

Updated fiddle: https://jsfiddle.net/y2wa77y7/

Upvotes: 1

Related Questions