Javascript Variable to Bootstrap Modal

Question

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 of checkboxes. These checkboxes are for simple self evaluation yes/no questionnaire that are weighted with different values based on the questions.

At the end of the questionnaire, you hit calculate results and it used a quick Javascript function to calculate the score and an Alert Popup give you the score

I recently migrated the page to Bootstrap 3 and cleaned it up a bit but want to use a Modal to popup instead of the old style Javascript alert

Is there a simple way of passing the javascript calculated variable from the main page to a Bootstrap Modal

Thanks

EDIT

Right - Worked it out, was calling the JQUERY code

$('#myResults').html(counter);

From within my Model - moved the snippet into the main javascript function and it works. Knew it was going to be a simple one.. Might be time to stop working i think

Thanks

Answer 1

Yes . You can pass variable to bootstrap modal.

Script file

     <script>
 function testFun(variable){

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

HTML

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

Answer 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 -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Calculate</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel"></h3>
  </div>
</div>

Javascript

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

Hope I understood your question.