表单提交和JavaScript在IE，Firefox或Safari中不起作用;在Chrome中工作正常

-1

好的。我提供了一个表单，它在提交时通过JavaScript来决定将用户接下来的页面。表单提交和JavaScript在IE，Firefox或Safari中不起作用;在Chrome中工作正常

当我在我的IDE（Coda 2）中预览它时，以及在Chrome中预览时，一切正常。但是，当我在Firefox，IE（任何版本）或Safari中打开相同的页面时，我无法越过第一页。

<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Page Title</title> 
     <link href="eh_style.css" rel="stylesheet" type="text/css" /> 
    </head> 

    <body> 
     <nav id="navWrapper" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand">Site Title</a> 
       </div> 
       <div class="link-container"> 
        <ul> 
         <li><a href="http://www.link.net">LinkText</a></li> 
         <li><a href="mailto:[email protected]?subject:Help”>Help</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
     <div class="main-container"> 
      <div class="page-container"> 
       <form onsubmit="OpenWindow()" id="page1" action="" method="post"> 
        <fieldset id="mainSelection"> 
         <label><input type="radio" class="radio-button" value="A" name="sel1"> Option A</label><br /> 
         <label><input type="radio" class="radio-button" value="B" name="sel1"> Option B</label><br /> 
         <label><input type="radio" class="radio-button" value="C" name="sel1"> Option C</label><br /> 
         <label><input type="radio" class="radio-button" value="D" name="sel1"> Option D</label><br /> 
        </fieldset><br /> 
        <input type="submit" value="Next" id="submitButton" form="page1"> 
       </form> 
      </div><!--page-container--> 
     </div><!--main-container--> 
     <footer class="site-footer"> 
      Footer Text 
     </footer> 
     <script type="text/javascript" language="javascript"> 
      function OpenWindow() { 
       var choice = document.getElementById("page1"); 
       choice = choice.sel1.value; 

       if (choice == 'A') { 
        window.open('result1.html','_self'); 
       } else if (choice == 'B') { 
        window.open('page2.html','_self'); 
       } else if (choice == 'C') { 
        window.open('page3.html','_self'); 
       } else if (choice == 'D') { 
        window.open('page4.html','_self'); 
       } 
       return: false; 
      } 
     </script> 
    </body> 
</html>

我不知道是怎么回事。非常感激任何的帮助。

每几个建议，我已经添加了return: false;声明到我的脚本的结尾，但事情仍然无法正常工作。

来源

2014-07-01 andrewdcato

命中F12。转到脚本调试器。调试您的页面。（另外，你的openWindow函数应该返回false） – EricLaw

我对你在页面中包含jquery的事实很感兴趣，但在代码中使用纯JS代码但是我的猜测是EricLaw会提到，因为你的openwindow函数不是' t返回false表单将数据提交到同一页面。 – user1094553

@ user1094553这是我第二次与JS混淆 - 我不确定是否需要包含jQuery或不让它正常运行。 – andrewdcato

由于您使用jQuery的，只是用此来获取值：

var choice = $('.radio-button:checked').val();

并取出

var choice = document.getElementById("page1"); 
choice = choice.sel1.value;

不知道为什么，但IE是无法识别“的选择。 sel1.value”。而且，你需要的，如果你想保持“返回false”来解决这个问题，但我不认为它的需要：

return: false;

应该

else 
{ 
return false; 
}

我也删除的onsubmit =“了OpenWindow （）“并将操作更改为”javascript：OpenWindow（）“，这对我很有用。祝你好运！

来源

2014-07-01 20:42:02 deebs

你已经完成了。这似乎是在IE11中工作（有一个小故障，它不会工作的第一次，但第二次尝试它的作品） - 我会在其他浏览器测试确认。 – andrewdcato

小故障是我的错;我没有从表单声明中删除'onsubmit'选项。现在适用于所有浏览器。非常感谢！ – andrewdcato

太棒了！ jQuery非常有帮助。很高兴它为你工作 – deebs

问题就在这里：从action="javascript:OpenWindow()"

表单操作设置为JavaScript函数

<form onsubmit="OpenWindow()" id="page1" action="" method="post">

更改为action=""不被很多浏览器的支持。我很惊讶它受到Chrome的支持。

编辑

JS：

function OpenWindow() { 
var choice = $('input[name="sel1"]:checked').val(); 
     if (choice == 'A') { 
      window.open('http://youtube.com','_self'); 
     } else if (choice == 'B') { 
      window.open('http://facebook.com','_self'); 
     } else if (choice == 'C') { 
      window.open('http://twitter.com','_self'); 
     } else if (choice == 'D') { 
      window.open('http://espn.com','_self'); 
     } 
    return false; 
}

来源

2014-07-01 20:08:58 imbondbaby

它似乎还没有工作，铬包括... 还有什么你可以看到，可能是造成这种情况？ – andrewdcato

在IE中适合我...在这里评论你的JSFiddle – imbondbaby

'action'属性接受一个URL，'javascript：'最终成为一个类似于http或https的协议标识符。 IE似乎解释了这一点，但这确实不是ECMA规范的一部分，所以浏览器支持可能会变得不稳定。相反，使用'action =“＃”onsubmit =“...”'。 –

你onsubmit处理程序需要返回false，或者接受event参数，并取消提交事件。

<form onsubmit="return OpenWindow()" id="page1" action="#" method="post"> 

function OpenWindow() { 
    // ... 
    return false; 
}

不要忘了#为窗体上的action属性的值。

来源

2014-07-01 20:41:59

表单提交和JavaScript在IE，Firefox或Safari中不起作用;在Chrome中工作正常

回答

相关问题