如何在执行JavaScript时防止引导程序模式关闭

Question

I'm generating the textbox using the number of user input in bootstrap modal. But when I click the button and generate a textbox the modal automatically closing and the webpage is reloading. How to prevent that? I'm trying to use data-backdrop="static" data-keyboard="false" on modal but not working. Here's code:

<div class="form-group">
 <label class="control-label col-sm-2">Answer options :</label>
 <div class="col-sm-4" style="margin-right: -120px;">
   <input type="number" class="form-control" id="count_option" placeholder="Enter number of options" >
 </div>
 <div class="col-sm-2" >
   <button style="margin-left: 7em;" onclick="Generate(count_option.value)">Generate</button>
 </div>
</div>

<div id="options"></div>

Javascript code:

<script type="text/javascript">
  function Generate(nums){
    var str = "";
    for(var index = 1; index <= nums; index++ ){
      str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'"  style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
    }
    document.getElementById("options").innerHTML = str;
  }
</script>

Please help me. Thanks.

Answer 1

As it is form so any button under it will behave as submit button by default and onClick , it will submit the form

 function stopFormSubmission(){ let btn = document.querySelector('#yourBtn') btn.addEventListener("click", function(event){ event.preventDefault() // prevent form from submitting Generate(nums) // Call your function }); } function Generate(nums){ // Your function var str = ""; for(var index = 1; index <= nums; index++ ){ str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'" style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>'; } document.getElementById("options").innerHTML = str; } 

 <form> <button id="yourBtn" onClick="stopFormSubmission()" >click</button> </form> 

You just need to prevent the default behaviour and stop form to get submitted

Answer 2

You can try this via change on html or script below

<div class="form-group">
 <label class="control-label col-sm-2">Answer options :</label>
  <div class="col-sm-4" style="margin-right: -120px;">
 <input type="number" class="form-control" id="count_option" placeholder="Enter number of options" >
</div>
<div class="col-sm-2" >
<button style="margin-left: 7em;" data-value="count_option.value" id="getValue">Generate</button>
</div>
</div>
<div id="options"></div>

i have changed in your button tag and script to follow

<script>
document.getElementById("getValue").addEventListener("click", function(event){
    event.preventDefault();
    var str = "";
   var nums = this.getAttribute("data-value");
   for(var index = 1; index <= nums; index++ ){
      str += '<div class="form-group"><label class="control-label col-sm-2"></label>
<div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'"  style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" >
<input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
    }
    document.getElementById("options").innerHTML = str;
}});
    </script>