0

This is my input field

<input class="form-control" id="StudentInstitutes_0__Name" name="StudentInstitutes[0].Name" value="" type="text">

I use clone() to the div wrapping the above input field. That works fine.

But how can I change the id & name index which is "0" in above with the button click.

Ex: if I click button for the first time the input field will be:

<input class="form-control" id="StudentInstitutes_1__Name" name="StudentInstitutes[1].Name" value="" type="text">

This is my button

<div class="form-group">
    <div class="col-sm-6">
        <input type="button" name="ShowMoreInstitution" id="ShowMore" value="Add More Institution" onclick="javascript:  showMoreInstitution();" />
    </div>                                       
</div>

This is my JS

$("#showMore").click(function () {
    $('#showInstitute').clone().insertAfter("#showInstitute");
});

Note that I am using Asp.net Mvc Razor view and don't want to use partial view for the operation.

Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
Fahad
  • 27
  • 6
  • 2
    Suggest you refer [this answer](https://stackoverflow.com/questions/24026374/adding-another-pet-to-a-model-form/24027152#24027152) (create a template and clone that (and the `id` attributes are pointless for you case, so better to just delete them - its the `name` attribute which is important) –  Aug 10 '18 at 08:43
  • PS: Unless you have VBScript on the page as the first script, you do NOT need `javascript: ` in the onclick handler – mplungjan Aug 10 '18 at 08:47
  • 1
    What is the onclick doing - please remove it. Also click `<>` and create a [mcve] since your code as shown does not work at all - where is showInstitute? If you save the clone and change the name/ID using regex before inserting it it should be simple – mplungjan Aug 10 '18 at 08:51
  • solved the problem.thanks @StephenMuecke – Fahad Aug 10 '18 at 12:48

1 Answers1

0

As I come to know that you wants to change id dynamically, so you have to first declare global variable "value" and assign initial value to it 0.

$("#showMore").click(function () {
    value++;
    $('#showInstitute').removeAttr('id').attr('id', 'StudentInstitutes_" + value + "__Name');
});

this code may help you.

Mukesh Burnwal Mike
  • 379
  • 1
  • 7