0

私のWebサイトでは、ブートストラップモーダルを使用して2つの値を要求し、その中間を取得しようとしています. クリックすると、2 つの値の中間を計算し、モーダル ボディ コードで宣言した値を設定するボタンがあります。値を設定すると、モーダルが消えて Web ページがリロードされます。私が間違っていることを教えてもらえますか？

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 の代わりに同じ結果を得ました。

これを正しく設定する方法について何か考えはありますか?

4

2 に答える 2

1

ここで 2 つのことが起こっています。

  1. 送信ボタンをクリックすると、実際にフォームが送信されます。
  2. a に nomethodを指定すると、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)

もう1つの小さなこと... Bootstrapのドキュメントからコピーするときは注意してください。特殊文字には常に HTML エンティティを使用します。モーダルを閉じるアイコンは&times;(または&#215;) である必要があります。

于 2013-01-20T00:18:06.200 に答える
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 に答える