-2

Hi i found this code for adding form elements using javascript 

    var counter = 1;
var limit = 9;
function addFp(spanName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newspan = document.createElement('span');
          newspan.innerHTML = "<br><b>Implement " + (counter + 1) + " : </b></td><select 

name='fp_imp"+(counter+1)+"' class=''><option value='imp1'>Disc Harrow</option><option 

value='imp2'>Cultivator</option><option value='imp3'>Disc Harrow</option></select> <input type='text' 

name='fp_h"+(counter+1)+"' placeholder='Hours' class='' size='4'> <input type='text' name='fp_t"+(counter

+1)+"' placeholder='Times' class='' size='4'>"
          document.getElementById(spanName).appendChild(newspan);
          counter++;
     }
}

The Html for this code is

        <script src="assets/js/field_preparation.js"></script>

<div class="form-top">
                                        <div class="form-top-left">
                                            <h3>Step 1 / 9</h3>
                                            <p>Field preparation:</p>
                                        </div>
                                        <div class="form-top-right">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="form-bottom">
                                        <div class="form-group">
                                        <table>
                                            <tr><td><b>Tractor Horse Power </b></td><td><b> :</b> </td><td><input type="text" name="tractor" placeholder="HP" class="" size="4"></td></tr>
                                            <tr><td><b>No. of Man Hours </b></td><td> <b> : </b></td><td><input type="text" name="fp_hum" placeholder="Men" class="" size="4"></td></tr>
                                            </table>
                                        <span id="dynamicFp">
                                        <tr><td><b>Implement 1</td><td> : </b></td><td><select name="wheat_imp1" class="">
                                            <option value="imp1">Disc Harrow</option>
                                            <option value="imp2">Cultivator</option>
                                            <option value="imp3">Disc Harrow</option></select>
                                            <input type="text" name="wheat_h1" placeholder="Hours" class="" size="4">
                                            <input type="text" name="wheat_t1" placeholder="Times" class="" size="4">
                                             </span>

<input type="image" src="./assets/img/plus.png" border="0" width="30px" value="Add Implement" onClick="addFp('dynamicFp');">

The problem i have that is that I want a code to remove the field back if I dont need it as leaving the fields blank will not accept the form. So, can anyone provide me a code and how to use it to remove back the element. Sorry, I am new to javascript and don't have any idea n the code. Thanks.

Saqib Parvaze
  • 1
  • 3
  • Both your posted JavaScript and HTML are invalid. JavaScript strings cannot break across multiple lines like you posted it, and the HTML has a `span` that contains a closing `` while there is no corresponding opening `td` that precedes it within the same span. First fix both. You could also do some effort to indent your code nicely, without 40 or more spaces before it.... – trincot Jun 19 '16 at 09:49
  • wait, i'll fix it first – Saqib Parvaze Jun 19 '16 at 10:04

2 Answers2

0

So, you want to remove the fields during form-submission if user has not input them?

try this

function removeEmptyFields()
{
   $("input[name^='fp_h'], input[name^='fp_t'], select[name^='fp_imp']").each(function(){
      var $thisObj = $(this);
      !$thisObj.value && $thisObj.remove();
   })
}
gurvinder372
  • 64,240
  • 8
  • 67
  • 88
0

Do you wantto remove last addes element? Add new variable at the top of JS

var lastAdded;
var counter = 1;
var limit = 9;

Moddify addFp so it remembers last added span

document.getElementById(spanName).appendChild(newspan);
counter++;
lastAdded = newspan;

Add new function

function deleteLastAdded () {
  if (lastAdded) {
    lastAdded.remove();
  }
}

Add new button

<input type="image" src="./assets/img/plus.png" border="0" width="30px" value="Add Implement" onClick="addFp('dynamicFp');">

<button width="30px" value="Delete last added" onClick="deleteLastAdded();">

Here's the whole code

Edited: btw work on intendation and breaking lines, I fixed it in bin

Jarosław Rewers
  • 1,034
  • 3
  • 14
  • 23
  • thanks a lt but when i hit remove and then try to click the add sign again, it skips the element that has been removed previously. Like if i remove 3 from 1,2,3 and the click add again, it creates 4 instead of 3 – Saqib Parvaze Jun 19 '16 at 10:02
  • Right, add line "counter--;" to deleteLastAdded() - see here http://jsbin.com/yasofakipe/1/edit?html,js,output – Jarosław Rewers Jun 19 '16 at 10:04
  • thanks a lot. It worked fine. It deletes the last element. what if i add 4 field and and to delete 3 of them? sorry this new keyboard skips numbers – Saqib Parvaze Jun 19 '16 at 10:13
  • Just click star on the left to my answer and/or triangle pointing up. If you would like to delete as many fields as you want you would need add checkbox with unique id (like id="field_added" + counter) to each field and create a function which create an array of selected checboxes and then using for loop delete each element (document.getElementById(arrayForDelete[i]) and then count all remaining fields, change their ids to be in order again and update couter variable) - more or less like here http://stackoverflow.com/questions/19650108/how-to-delete-a-check-box-using-javascript – Jarosław Rewers Jun 19 '16 at 10:30