Question

在我的网站上，我正在尝试使用bootstrap模式来请求两个值并获得它的中间值。我有一个按钮，当单击时，计算两个值的中间值并设置我在模态体代码中声明的值。它设置值，然后模态消失，网页重新加载。你能告诉我我做错了什么吗？

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

设置它的javascript函数：

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

    middle.value=middle1;
}

我也完成了

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

代替middle.value = middle1并获得相同的结果。

有关如何正确设置此内容的任何想法吗？

Answer 1

你应该摆脱 <form></form> 元素，因为你不需要它们，它们会导致页面通过form-post重定向。我还删除了一些不必要的结束div。我不知道你的其他代码是否需要它们。最后清理了一下你的标记。

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

以下是 working code on jsFiddle 。

Answer 2

这里发生了两件事。

点击提交按钮时，表单实际上已提交。
如果没有为method指定form，则默认为GET。

这就是你看错的原因。

您需要阻止表单提交。您只需使用onsubmit执行此操作：

<form class="form-inline" onsubmit="return false;">

我不是在提倡在线JavaScript，所以这里的方式更为轻松;在表单中添加一个ID并附加一个阻止提交的点击处理程序：

HTML：

<form class="form-inline" id="middle-calculator">

JS：

document.getElementById('middle-calculator').addEventListener('submit',function (e) {
    e.preventDefault();
},false);

e这里是“事件”。

The working example (JSFiddle)

另一件小事......从Bootstrap文档复制时要小心。始终将HTML实体用于特殊字符;关闭模式图标应为×（或×）。

设置值时bootstrap模态崩溃

2 个答案:

HTML：

JS：