Question

我有一个简单的表单，当单击一个按钮时，它会通过连接计算链接，并通过覆盖现有方法在同一页面上输出链接。页面不应该在任何地方重定向，甚至不能重定向。

问题是它将一个查询字符串附加到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 =“＃”取出，但它似乎没有做任何事情。

我想要的只是要计算的链接并立即显示在屏幕上。

期待您的反馈！谢谢！

编辑由于您建议将提交类型更改为按钮，表单现在可以在提交时正常运行。

该脚本在Firefox中完美运行。不幸的是，我需要它在IE7中工作，但事实并非如此。正确调用验证警报，但页面上未显示正确的链接。任何人都可以弄明白我做错了吗？

我没有收到任何Javascript错误或警告。

再次编辑导致上一个错误是因为我使用的是“textContent”而不是“innerHTML”

现在一切正常！

Answer 1

您不需要提交表单，因为您不必向服务器发布任何内容，所有工作都由客户端完成。有两种方法可以解决这个问题：

在你的onclick处理程序

中添加'return false'

<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"/>

将输入类型更改为按钮

<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"/>

Answer 2

<form action="" onsubmit="return false;">

Answer 3

将<form action="#">替换为<form>以回发到当前页面，虽然这不是有效的HTML技术，但它适用于所有浏览器。

Answer 4

更改输入中的提交类型。您不需要在其他地方发送信息，然后使用按钮

<button type="button" onclick="something();">Click Me!</button>

或样式标记

<a href="#" class="button" onclick="something();">Click Me!</a>

Answer 5

查看这个工作示例，比您尝试的更简单。注意链接以及链接指向的位置在单击按钮时都会发生变化。您可以在文本框中添加内容，它将更改链接的href。

http://jsfiddle.net/BpEMA/1/

你已经完成了一些非常复杂的代码。首先，使用jQuery（学习曲线非常小，效益很大）。然后，简化您要做的事情。

简单的javascript错误 - 按钮单击在表单提交上附加查询字符串

5 个答案: