执行javascript时如何防止引导模式关闭

Question

我正在使用引导模式中的用户输入数量生成文本框。但是当我单击按钮并生成一个文本框时，模式会自动关闭并且网页正在重新加载。如何防止这种情况？我正在尝试在模态上使用 data-backdrop="static" data-keyboard="false" 但不起作用。代码如下：

<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 代码：

<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>

请帮助我。谢谢。

Answer 1

因为它是form，所以它下面的任何button 将默认表现为submit button 和onClick，它将submit 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>

您只需要阻止默认行为并停止form 即可提交

Answer 2

您可以通过更改下面的 html 或脚本来尝试此操作

<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>

我已更改您的按钮标签 和要遵循的脚本

<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>