0

This is my hidden div. 

<div id="showInstituteOne" style="display:none">
      <h3>Institutes</h3>
      <div class="form-group">
          <label class="col-sm-3 control-label">Institute</label>
          <div class="col-sm-9">
               @Html.TextBoxFor(m => m.StudentInstitutes[1].Name, new { @class = "form-control student-institute", @id = "studentInstitute" })
          </div>
     </div>
</div>

This is my button

<div class="form-group">
    <div class="col-sm-6">
        <input type="button" value="Add More Institution" onclick="showDiv()"  />
   </div>
</div>

This is the JS function

var countClick = 0;
    function showDiv() {
        document.getElementById('showInstituteOne').style.display = "block";
        countClick++;
     }

i want to display the div as many time the button is hit.Count click for updating the id number of the input field.

Fahad
  • 27
  • 6
  • Where is your issue ? Doesn't your code work ? – Hearner Aug 09 '18 at 08:14
  • Do you want to repeat the div? Because visible is visible no matter how often you make it visible. – Schadensbegrenzer Aug 09 '18 at 08:14
  • My code works fine. As i click the button for the first time it shows the hidden div but what i want is repeat the div for the second time as i click the button for the second time. – Fahad Aug 09 '18 at 08:17
  • @Fahad one way is to append the the required html to a div element on every click event. I see razor syntax in your code, are you using mvc or web forms? If mvc, you could render partial view on every click. – User4179525 Aug 09 '18 at 08:26
  • i am using mvc. @YouKnowMe – Fahad Aug 09 '18 at 08:28
  • @Fahad this link can guide you https://stackoverflow.com/questions/29142422/rendering-partial-view-on-button-click-in-asp-net-mvc – User4179525 Aug 09 '18 at 08:31
  • Possible duplicate of [Is it possible to clone html element objects in JavaScript / JQuery?](https://stackoverflow.com/questions/921290/is-it-possible-to-clone-html-element-objects-in-javascript-jquery) – Castro Roy Aug 09 '18 at 14:28

2 Answers2

1

Just change your js to this

var countClick = 0;
    function showDiv() {
        var el = document.getElementById('showInstituteOne');
        el.style.display = "block";
           if (countClick > 0) {
              document.getElementById(>>parent id here<<).appendChild(el.cloneNode(true));
           }
        countClick++;
     }
Leo Odishvili
  • 1,004
  • 1
  • 7
  • 29
  • I dont think that this is going to work due to the HtmlHelper he is using in that div. The link YouKnowMe posted in the comment above should do the trick. – Schadensbegrenzer Aug 09 '18 at 08:35
  • It would work, because when we are clicking the button, HTML is already rendered. So I'm just copying HTML and appending it – Leo Odishvili Aug 09 '18 at 08:37
  • i have tried clone() but in my case the input field look like this :- so as it is produced a complex id how can i change the index number of the id with countClick. – Fahad Aug 09 '18 at 08:38
  • @Fahad, and how it should look? It's what you are generating with razor – Leo Odishvili Aug 09 '18 at 08:41
  • @Leo You just copy the html there. But the HtmlHelper binds the textbox to a model making the value dynamic. – Schadensbegrenzer Aug 09 '18 at 08:41
1

Do you mean to show other hidden divs, other than the one you have it's ID (in your example id="showInstituteOne" )?

if so, then NO you can't show other divs using the same logic in the function showDiv.

you can add the same class name to many divs and show them all by running one function.

like this:

function showDiv() {
  var divs = document.getElementsByClassName('showInstitute');
  for(var i = 0; i < divs.length; i++){
      divs[i].style.display = "block";
  };
}
ayman salah
  • 17
  • 2
  • No, i only have one hidden div.Apart from that if i clone from parent div how can i change the id index every time i click the button – Fahad Aug 09 '18 at 08:49