Display the value on each repeater item

Question

I use jquery repeater to create a dynamic form.

<div class="repeater">
  <table border="1">
    <thead>
      <tr style=>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody data-repeater-list="data">
      <tr data-repeater-item>
        <td><input name="this_id" value="1"></td>
        <td><input name="this_name"></td>
      </tr>
    </tbody>
  </table>
  <button data-repeater-create>Add New</button>
</div>

<script>
  $('.repeater').repeater();

  /* Not working if use below code :
  Reference : https://github.com/DubFriend/jquery.repeater

    $('.repeater').repeater({
      defaultValues: {
        'this_id': '1'
      }
    });
  */
</script>

When I press "add new" button, why does the default value for this_id not appear (blank value). Is there something wrong with my code?

UPDATE : https://jsfiddle.net/b6tryg9m/

Did you include the jQuery and jQuery Repeater script file? which version are you using? Create a fiddle and include it. You would get more and quick responses. — Ayush Kumar, Mar 18 '19 at 07:18
@AyushKumar, Thank you for your advice. I have made a fiddle with that code (link in question post). I use jquery 3.3.1 and jquery.repeater 1.2.1. — Zhumpex, Mar 18 '19 at 09:23

score 2 · Accepted Answer · answered Mar 18 '19 at 10:02

You dint set the type="text" on your input element. Here is a working example:

$('.repeater').repeater({
  defaultValues: {
    'this_id': '1',
    'this_name': 'foo'
  }
});

<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>
<div class="repeater">
  <table border="1">
    <thead>
      <tr style="background-color:#cecece">
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody data-repeater-list="data">
      <tr data-repeater-item>
        <td><input type="text" name="this_id" value="1"/></td>
        <td><input type="text" name="this_name"/></td>
      </tr>
    </tbody>
  </table>
  <br>
  <button data-repeater-create>Add New</button>
</div>

I thought, if the input without type="text" attribute would be considered as text in jquery.repeater. Thank's for your answer, it works. — Zhumpex, Mar 18 '19 at 10:09
Refer [Input Element types](https://www.w3schools.com/html/html_form_input_types.asp) — Priyesh Diukar, Mar 18 '19 at 10:10

score 2 · Answer 2 · answered Mar 18 '19 at 10:20

2

You have to just definne thw input type

type="text"

answered Mar 18 '19 at 10:20

kartik radadiya

193
7

Display the value on each repeater item

2 Answers2