CODEWITHSUNDEEP
javascript
Yas Smitch
Yas Smitch

Reputation: 279

how to prevent the bootstrap modal to close when performing a javascript

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.

Upvotes: 0

Views: 74

Answers (2)

NarutoBruto
NarutoBruto

Reputation: 103

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>

Upvotes: 1

Satyam Pathak
Satyam Pathak

Reputation: 6932

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

Upvotes: 3

Related Questions