increment index input array jquery

Question

I am trying to increment a value of an hidden input and increment an index of an input name. I found a solution to increment the index but, I don't know how to increment the value of the hidden input.

Here my HTML

<table class='table-results'>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>
            <input name="result[1][key]" type="hidden" value="A">
            <input placeholder="Title*" class="form-control result-title" name="result[1][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[1][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>
</table>

And the JS

$('.table-results').on('click', '.add-question',function(event){

  event.preventDefault();
  var selector = $(this).closest('tr').find("input[type=hidden]").attr('name');
  var index_value = selector.match(/\d+/)[0];

  var nextIndexValue = parseInt(index_value,10)+1;

  var thisRow = $(this).closest('tr'); 
  $(thisRow).clone().insertAfter(thisRow).find('input, textarea').each(function(){
                                                            this.name = this.name.replace(selector.match(/\d+/)[0],nextIndexValue)
                                                        })
});

Expected :

<table class='table-results'>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>
            <input name="result[1][key]" type="hidden" value="A">
            <input placeholder="Title*" class="form-control result-title" name="result[1][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[1][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>

    <tr>
        <td>
            <input name="result[2][key]" type="hidden" value="B">
            <input placeholder="Title*" class="form-control result-title" name="result[2][title]" type="text">
        </td>
        <td>
            <textarea placeholder="Description*" class="form-control dv-textarea" name="result[2][description]" cols="50" rows="10"></textarea>
        </td>
        <td>
            <input type='button' class='add-question' value='add'>
        </td>
    </tr>

</table>

Jsfiddle

https://jsfiddle.net/st0yxcLs/

could you provide code via fiddle? it will make easy to debug — johannesMatevosyan
– johannesMatevosyan, Commented Feb 22, 2016 at 13:38

user1846747 · Accepted Answer · 2016-02-22 14:07:20Z

In order to update the hidden input value. You need to use Javascript Char Codes. http://www.cambiaresearch.com/articles/15/javascript-key-codes

var charCode = 65;
$('.table-results').on('click', '.add-question',function(event){

  event.preventDefault();
  var selector = $(this).closest('tr').find("input[type=hidden]").attr('name');
  var index_value = selector.match(/\d+/)[0];

  var nextIndexValue = parseInt(index_value,10)+1;

  var thisRow = $(this).closest('tr'); 
  var newRow = $(thisRow).clone().insertAfter(thisRow).find('input, textarea').each(function(){
      this.name = this.name.replace(selector.match(/\d+/)[0],nextIndexValue)
  })

  var value = parseInt(index_value) + charCode;
  $(newRow).closest('tr').find("input[type=hidden]").attr('value', String.fromCharCode(value));

});

Working JSFiddle here. https://jsfiddle.net/8xm1qh2t/

I guess this is what you are looking for.

Cheers!

Collectives™ on Stack Overflow

increment index input array jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related