2

I am using https://github.com/DubFriend/jquery.repeater (jQuery repeater) to repeat the form field.

The Add button is not working, however, delete is working fine

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<table class="repeater">
  <tbody data-repeater-list>
    <tr data-repeater-item>
      <td>
        <select>
          <option value=" ">-- Select --</option>
          <option value="1">One</option>
          <option value="2">One</option>
          <option value="3">One</option>
          <option value="4">One</option>
          <option value="5">One</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
  </tbody>
  <input data-repeater-create type="button" value="Add" />

</table>

jsfiddle

double-beep
  • 5,031
  • 17
  • 33
  • 41
Saroj Shrestha
  • 2,696
  • 4
  • 21
  • 45

2 Answers2

1

You need to wrap your table with <form> tag and use <form> tag class. In your case:

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<form class="repeater">
  <table class="repeater1">
    <tbody data-repeater-list>
      <tr data-repeater-item>
        <td>
          <select>
            <option value=" ">-- Select --</option>
            <option value="1">One</option>
            <option value="2">One</option>
            <option value="3">One</option>
            <option value="4">One</option>
            <option value="5">One</option>
          </select>
        </td>
        <td>
          <input data-repeater-delete type="button" value="Delete" />
        </td>
      </tr>
    </tbody>
    <input data-repeater-create type="button" value="Add" />

  </table>
</form>
4b0
  • 21,981
  • 30
  • 95
  • 142
0

Please try to include the Add within data-repeater-list as below and it will work.

$('.repeater').repeater();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<table class="repeater">


  <tbody data-repeater-list>
    <tr>
      <td><input data-repeater-create type="button" value="Add"/></td>
    </tr>

    <tr data-repeater-item>
      <td>
        <select>
          <option value=" " >-- Select --</option>
          <option value="1" >One</option>
          <option value="2" >One</option>
          <option value="3" >One</option>
          <option value="4" >One</option>
          <option value="5" >One</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete"/>
      </td>
    </tr>
    
    
  </tbody>
  

</table>
vallamkonda trilok
  • 1
  • 1