Question

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form>
    <button onclick="demo()" name="btn">click here</button>
    </form>
    <script type="text/javascript">
        function demo()
        {
            location.href="http://www.google.com";
        }
    </script>
</body>
</html>

如果按钮放置时没有表格标签，则表明它正常工作。如果它被放置在标签内部，则单击它时不会被重定向。

Answer 1

始终为<button>元素指定type属性。不同的浏览器对<button>元素使用不同的默认类型。

如果您在HTML表单中使用<button>元素，则不同的浏览器可能会提交不同的值。使用<input>以HTML格式创建按钮。

<form>
  <button type="button" onclick="demo()" name="btn">Click Here</button>
  <!-- or you can use input element -->
  <input type="button" onclick="demo()" value="Click Here" />
</form>

<script>
function demo() {
  window.location.href = "http://www.google.com"
}
</script>

Answer 2

<html>
<head>
    <title></title>
</head>
<body>
    <form>
    <button onclick="return demo()" name="btn">click here</button>
    </form>
    <script type="text/javascript">
        function demo()
        {
            location.href="http://www.google.com";
            return false;
        }
    </script>
</body>
</html>

此修改可防止单击表单内的按钮（即提交表单）并重新定位到Google的默认操作。

如果您不需要表格，请不要使用它。

Answer 3

它应该是这样的。

<form>
    <button onclick="demo(event)" name="btn">click here</button>

    <script type="text/javascript">
        function demo(e) {
            e.preventDefault();
            window.location.href = "http://www.google.com";
        }
    </script>
</form>

或者你也可以尝试这个

<form>
    <button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
        function demo(e) {
            e.preventDefault();
            window.location.href = "http://www.google.com";
        }
</script>

单击表单

3 个答案: