-1

我有点坚持我一直在尝试做的事情。

我一直在尝试获取多种形式（六种）来使用我拥有的 javascript 方法。这些表单具有文本输入值，应进行检查，然后传递给 php 文件，然后使用 AJAX 更新页面并确认或出错。

对于这个例子，我将只使用两种形式，这些是我的形式

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

我不会包含 php，因为它所做的一切都与“TEST”一词相呼应。

第一种形式完美地工作，但是，第二种形式没有，它似乎更新了第一种形式。所以我使用了 console.log(); 并发现每次我提交第二个表单时，似乎都会提交第一个表单中的字段。

我在这件事上走的是正确的道路还是有什么我遗漏的？

另外我正在学习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

首先在同一个页面中有多个表单指向同一个操作是一种不好的做法。元素的第二个 id 应该是唯一的。

如果您是初学者，那么在 w3c 验证器中验证 HTML，您会从中学到很多东西。

于 2013-03-26T10:11:11.207 回答