CODEWITHSUNDEEP
javascriptjqueryhtml
user492642
user492642

Reputation: 169

increment index input array jquery

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/

Upvotes: 0

Views: 386

Answers (1)

user1846747
user1846747

Reputation:

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!

Upvotes: 1

Related Questions