表單提交和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中工作正常

回答

相關問題