Javascript Variable To Bootstrap Modal

Got what is probably a simple one, but my google is failing me at the moment so hoping i can get a bit of a push in the right direction I have a HTML page that is basically a bunch

Solution 1:

Yes . You can pass variable to bootstrap modal.

Script file

<script>functiontestFun(variable){

document.getElementById('testH1').innerHTML=variable;
}
</script>

HTML

<buttonclass="btn btn-primary btn-lg"onclick="testFun('testId')"data-toggle="modal"data-target="#myModal">
  Launch demo modal
</button><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h4class="modal-title"id="myModalLabel">Modal title</h4></div><divclass="modal-body"><h1id="testH1"></h1></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div></div></div>

Solution 2:

Take a look at the documentation. I believe what you are going to want to do is add a data-toggle="modal" attribute to your calculate button and then make it so when it calls your calculate function, it changes the content in the modal via Javascript.

The modal is just normal HTML and you can assign ids to whatever you want. From there you can edit it with innerHTML

<!-- Button to trigger modal --><ahref="#myModal"role="button"class="btn"data-toggle="modal">Calculate</a><!-- Modal --><divid="myModal"class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-header"><h3id="myModalLabel"></h3></div></div>

Javascript

functioncalculate() {
    //do some calculation and store it in a variablevar a = b + c; 
    document.getElementById("myModalLabel").innerHTML = "The final calculation is" + a;
}

Hope I understood your question.

Solution 3:

Bootstrap modal doesn't support this functionality. But you could write your own?

functionshowModal(score){
  $('#myModal .score').html(score);
  $('#myModal').modal('show')
}

so clicking the calculate results what look something like this.

$('#buttonCalcResults').click(function(){
  var score = foo+bar+whatever
  showModal(score);
})

Solution 4:

As Jahnux73 already said (or meant) that the modal will be in the same page, where you want it to appear. So in the function where you are calling an alert box you just have to call that modal.

 $('#yourModalId').modal('toggle');

(or you can also use 'show' instead of toggle) And for the calculated values...you just need to add these values to the html of modal. So just get the element.

output = document.getElementById('yourOutputTagId');

and then you can set the properties of that output object; either you want innerHTML or value attribute (according to your design.)

After setting all the required value you call your modal by the function mentioned above.