-1

私は自分がやろうとしていたことに少し立ち往生しています。

私が持っているjavascriptメソッドを使用するために複数のフォーム（6つ）を取得しようとしています。これらのフォームにはテキスト入力値があり、チェックしてからphpファイルに渡す必要があります。その後、AJAXを使用して確認またはエラーでページを更新します。

この例では、2つのフォームのみを使用します。これらは、私のフォームです。

<div class="trade_info_1">
            <h2>Market #1</h2>
            <form action="" method="POST">
                <ul>
                    <li>
                        <label for="market_1">Market: </label><input type="text" name="market_1" id="market_1" />
                    </li>
                    <li>
                        <button type="button" name="button1" id="button1" onclick="check_update_selection()">Update Market!</button>
                    </li>
                </ul>
                <input type="hidden" name="market_number" id="market_number" value="1" />
                <div id="market_1_output">output</div>
            </form>
        </div>

        <div class="trade_info_2">
            <h2>Market #2</h2>
            <form action="" method="POST">
                <ul>
                    <li>
                        <label for="market_2">Market: </label><input type="text" name="market_2" id="market_2" />
                    </li>
                    <li>
                        <button type="button" name="button2" id="button2" onclick="check_update_selection()">Update Market!</button>
                    </li>
                </ul>
                <input type="hidden" name="market_number" id="market_number" value="2" />
                <div id="market_2_output">output</div>
            </form>
        </div>

今、AJAXがページを更新する場所です。これは私がすでに持っている方法です（JS）

function check_update_selection() 
 {
if (window.XMLHttpRequest) 
{
    xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) 
{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

console.log('Market value: ' + document.getElementById('market_number').value);

if(document.getElementById('market_number').value == 1)
{
    var market = document.getElementById('market_1').value;;
    var market_number = 1;
    var html_element = 'market_1';
}
else if(document.getElementById('market_number').value == 2)
{
    var market = document.getElementById('market_1').value;
    var market_number = 2;
    var html_element = 'market_2';
}

xhr.open('POST', 'update_market.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var obj = {market: market};
xhr.send("data=" + JSON.stringify(obj));
xhr.onreadystatechange=function() 
{
    if (xhr.readyState==4) 
    {
        if(market_number == 1)
        {
            document.getElementById("market_1_output").innerHTML = xhr.responseText;
        }
        else if(market_number == 2)
        {
            document.getElementById("market_2_output").innerHTML = xhr.responseText;
        }
    }
}

「TEST」という単語をエコーするので、phpは含めません。

最初のフォームは完全に機能しますが、2番目のフォームは機能せず、最初のフォームが更新されているようです。だから私はconsole.log（）;を使用しました。そして、2番目のフォームを送信するたびに、最初のフォームのフィールドを送信しているように見えることがわかりました。

私はこれについて正しい方向に進んでいますか、それとも私が欠けているものがありますか？

また、私は話しているときにjavascriptを学んでいるので、プラットフォームに関する私の知識は最高ではないので、私が犯した間違いを指摘してください。

御時間ありがとうございます。

4

2 に答える 2

1

同じID（market_number）を持つ2つの要素を同じページに配置することはできません。

<input type="hidden" name="market_number" id="market_number" value="2" />

より良い解決策は、メイン関数check_update_selectionにパラメーターを定義してから、各フォームからそのパラメーターを使用して呼び出すことです。

function check_update_selection(number)

HTMLから、正しい番号で呼び出します。

 onclick="check_update_selection(1)"
 onclick="check_update_selection(2)"
于 2013-03-26T10:08:34.417 に答える
1

同じページに同じアクションを指す複数のフォームを最初に配置することは、お勧めできません。要素の2番目のIDは一意である必要があります。

初心者の場合は、w3cバリデーターでHTMLを検証し、それ自体から多くのことを学ぶことができます。

于 2013-03-26T10:11:11.207 に答える