0

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

在 HTML 中，模态体： 

<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 并得到相同的结果。

关于如何正确设置的任何想法？

4

2 回答 2

1

您应该摆脱这些<form></form>元素，因为您不需要它们，它们会导致页面通过表单发布重定向。我还删除了一些不必要的关闭 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>

这是jsFiddle 上的工作代码。

于 2013-01-20T00:11:48.977 回答
1

这里发生了两件事。

  1. 单击提交按钮时，实际上是在提交表单。
  2. 如果method为 a 指定no ，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这是“事件”。

工作示例（JSFiddle）

另一件小事……从 Bootstrap 文档复制时要小心。始终对特殊字符使用 HTML 实体；关闭模式图标应该是&times;（或&#215;）。

于 2013-01-20T00:18:06.200 回答