Question

In my website I’m trying to use bootstrap modal to ask for two values and get the middle of it. I have a button that when clicked, calculates the middle of the two values and sets a value I have declared in the modal-body code. It sets the value and then the modal disappears and the webpage reloads. Can you tell me what I’m doing wrong?

In the HTML, modal-body:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Get Middle.</h3>
    </div>
    <div class="modal-body">
        <form class="form-inline">
        <div class="input-prepend">
            <span class="add-on">$</span>
            <input class="span2" id="lowSide" type="text">
        </div>
        to 
        <div class="input-prepend">
            <span class="add-on">$</span>
            <input class="span2" id="highSide" type="text">
        </div> 
        <button type="submit" class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
        </form>
    <form class="form-inline"> <label>middle:</label> <input id="middle" type="text" /> </form>
    </div>
</div>

The javascript function to set it:

function enteredRange(x,y)
{
    var low=parseFloat(x);
    var high=parseFloat(y);
    var middle1=parseInt((low+high)/2);

    middle.value=middle1;
}

I’ve also done

document.getElementById('middle').value=middle1;

in place of the middle.value=middle1 and gotten the same result.

Any idea on how I could set this up correctly?

Answer 1

You should get rid of the <form></form> elements, since you don’t need them and they cause the page to redirect via form-post. I also removed some unnecessary closing divs. I don’t know if rest of your code requires them. And finally cleaned your markup a bit.

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="myModalLabel">Get Middle.</h3>
    </div>
    <div class="modal-body">
        <div class="form-inline">
            <div class="input-prepend"> <span class="add-on">$</span>
                <input class="span2" id="lowSide" type="text" />
            </div>
            to
            <div class="input-prepend"> <span class="add-on">$</span>
                <input class="span2" id="highSide" type="text" />
            </div>
            <button class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
        </div>
        <br />
        <div class="form-inline">
            <label>middle:</label>
            <input id="middle" type="text" />
        </div>
    </div>
</div>
<br />
<button id="btn">OPEN MODAL</button>

Here is the working code on jsFiddle.