1

我编写了一个简单的 HTML 表单，其中有 2 个按钮和 2 个 javascript 代码。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function test(){

var addr=window.location.search;
alert(addr);

}

function validate(){
    var newaddr=window.location.search;
    alert(newaddr);
}

</script>
</head>
<body>
<form action="">

<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test();"/>
<input type="submit" id="input1" name="buttosearch" value="search" onclick="validate();"/>

</form>
</body>
</html>

我想要的是，单击“更新”按钮时，警报应显示更新按钮的名称和值，单击搜索按钮时，搜索按钮的名称和值应由警报（）显示。. 但是发生的情况是第一次单击更新按钮时，警报为空白，然后地址栏变为

http://localhost:8080/button_test/check.html?buttonupdate=update

稍后，如果我单击更新按钮，它将检索上述 url 并显示正确的值。但是，如果我单击搜索按钮，也会发生同样的情况，即上述 url 的值被检索并且地址栏更改为

http://localhost:8080/button_test/check.html?buttosearch=search

如何达到预期的结果:(请指导:(

4

4 回答 4

0

尝试

<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test(); return false;"/>
于 2013-07-28T12:53:39.407 回答
0

最好将事件绑定到它，您可以将事件作为目标传递。

在 HTML 中，

<input type="submit" id="input2" name="buttonupdate" value="update" />
<input type="submit" id="input1" name="buttosearch" value="search" />

在js中，

function test(e){
    // obtain address ?
    var addr=window.location.search;
    // obtain value
    var value = e.target.getAttribute("value");
    // obtain name
    var name = e.target.getAttribute("name");
    // alert
    alert(name + " - " + value);
    // stop page load
    e.preventDefault();
}

function validate(e){
    var addr=window.location.search;
    var value = e.target.getAttribute("value");
    var name = e.target.getAttribute("name");
    alert(name + " - " + value);
    e.preventDefault();
}

// start
window.addEventListener('load', function() {
    //bind event to search
    var element = document.getElementById("input1");
    element.addEventListener('click', validate);
    // bind event to update
    var element = document.getElementById("input2");
    element.addEventListener('click', test);
});
于 2013-07-28T13:03:18.200 回答
0

问题是 变量搜索一开始是空的，它在你提交后更新（这意味着在你的函数调用之后），你应该明白这一点！
但作为一种解决方案，试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function test(){

var addr=document.getElementById("input2").value;
addr+=" "+document.getElementById("input2").name;
alert(addr);

}

function validate(){
    var addr=document.getElementById("input1").value;
addr+=" "+document.getElementById("input1").name;
alert(addr);
}

</script>
</head>
<body>
<form action="">

<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test();"/>
<input type="submit" id="input1" name="buttosearch" value="search" onclick="validate();"/>

</form>
</body>
</html>
于 2013-07-28T13:04:09.147 回答
0

this将其用作函数的参数怎么样：

<script>
function test(button){
    alert(button.name + " and " + button.value);
}

function validate(button){
   alert(button.name + " and " + button.value);
}
</script>
<input type="submit" id="input2" name="buttonupdate" value="update" onClick="test(this);"/>
<input type="submit" id="input1" name="buttosearch" value="search" onClick="validate(this);"/>
于 2013-07-28T13:06:43.300 回答