我有一个简单的表单，当单击按钮时，它通过连接计算链接，并通过覆盖现有方法在同一页面上输出链接。页面不应该重定向到任何地方，甚至是它自己。
问题是它将查询字符串附加到URL(即/linkgenerator.html变成/linkgenerator.html?generatelink=Generate+Link#)，这实际上会导致两件事发生:
1)表单第一次正确提交，然后立即再次重新加载页面，丢失了您的输入。一旦你在重新加载的页面上再次提交，就可以了。
2)查询字符串导致脚本不工作-周期-在IE7本地文件系统上运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SRP Link Generator</title>
<script language="javascript" type="text/javascript">
function dogeneratelink()
{
var code1= document.getElementById("code1").value;
var brand = document.getElementById("brand").value;
var code2= document.getElementById("code2").value;
var errors = checkerrors(prop, srp);
if (errors)
{
alert(errors);
return;
}
var link = "http://www." + brand + ".com/" + code1 + "/" + code2;
var a = document.getElementById("link");
a.href = link;
a.textContent = link;
}
function doclear()
{
var a = document.getElementById("link");
a.href = '';
a.textContent = '';
}
function checkerrors(code1, code2)
{
var errors;
var propset;
if (code1.length != 5)
{
errors = "You must enter a valid Code 1";
code1set = 1;
}
if ((code2.length < 4) || (code2.length > 5))
{
if (code1set == 1)
{
errors += " and Code 2";
}
else
{
errors = "You must enter a valid Code 2";
}
}
return errors;
}
</script>
</head>
<body>
<form action="#">
<h1>Link Generator</h1>
<div class="row">
<label>Code 1:</label>
<input type="text" id="code1" />
</div>
<div class="row">
<label>Brand:</label>
<select id="brand">
<option value="brand1">Brand 1</option>
<option value="brand2">Brand 2</option>
<option value="brand3">Brand 3</option>
</select>
</div>
<div class="row">
<label>Code 2:</label>
<input type="text" id="code2" />
</div>
<div class="row">
<div class="buttonrow">
<input type="submit" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear()" id="clear" value="Clear" class="button"/>
</div>
</div>
</form>
<div id="generatedlink"><a id="link"></a></div>
</body>
</html>
我试过把action="#"拿出来，但它似乎没有做任何事情。
所有我想要的是链接被计算并立即显示在屏幕上。
期待您的反馈!谢谢!
edit由于您建议将提交类型更改为按钮，该表单现在在提交时表现正常。
该脚本在Firefox中可以完美地工作。不幸的是，我需要它在IE7中工作，但它没有。正确地调用了验证警报，但是页面上没有显示正确的链接。有人知道我做错了什么吗?
我没有得到任何Javascript错误或警告。
再次编辑最后一个错误是由于我使用的是"textContent"而不是"innerHTML"
现在一切正常!
您不需要表单提交，因为您不需要向服务器发布任何内容，所有工作都由客户端完成。有两种方法可以解决这个问题:
添加'return false'给你的onclick处理程序
<input type="submit" onclick="dogeneratelink(); return false" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear(); return false" id="clear" value="Clear" class="button"/>
将输入类型更改为button
<input type="button" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="button" onclick="doclear()" id="clear" value="Clear" class="button"/>
<form action="" onsubmit="return false;">
将<form action="#">替换为<form>以发布回当前页面，虽然这不是一种有效的HTML技术，但它适用于所有浏览器
更改输入中的提交类型。你不需要在其他地方发送信息，然后使用按钮
<button type="button" onclick="something();">Click Me!</button>
或者设置标签样式
<a href="#" class="button" onclick="something();">Click Me!</a>
查看这个工作示例，它比您要做的要简单得多。注意，单击按钮时链接和链接指向的位置都会发生变化。你可以在文本框中添加内容，它会改变链接的href.
http://jsfiddle.net/BpEMA/1/你自己编写了一些非常复杂的代码。首先，使用jQuery(学习曲线非常小，而收益却是巨大的)。然后，简化你正在做的事情。