2015-05-10 38 views
0

我是js的新手。 我試圖抓住textbox的值並在新頁面中顯示。 但不知何故,當我點擊按鈕時,它顯示了一秒鐘的值,然後重定向到相同的表單頁面。 請告訴我我在哪裏做錯了?謝謝。 這裏是我的代碼javascript open()方法衝突

HTML

<div id="myDiv"> 
    <strong>Enter your name in the box below, then click 
     the button to see a personalized page!</strong> 
     <br> 
     <form id="newp" onsubmit="newpage();"> 
      Name: <input type="text" id="yourname" size="25"> 
      <br><br> 
      <input type="submit" onclick="pressedbutton()" value="Submit"> 
     </form> 
     <script type="text/javascript" src="main.js"></script> 
    </div> 

JS

function pressedbutton() 
{ 
    var thename = document.getElementById("yourname").value; 
    document.open(); 
    document.write("<h1>Welcome!</h1>"); 
    document.write("Hello, " + thename + ", and welcome to my page!"); 
    document.close(); 

} 

感謝。

回答

2

請告訴我,我在哪裏做錯誤?

您沒有阻止提交事件的默認操作。提交表單時,瀏覽器將加載action中定義的URL,如果沒有提供,則重新加載頁面。

如果你不希望瀏覽器做到這一點,你必須防止它。有幾種方法可以做到這一點。

你可以return false;從事件處理程序:

onsubmit="return pressedbutton()" 

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

或者你可以調用事件對象的preventDefault method

onsubmit="pressedbutton(event)" 

function pressedbutton(event) { 
    event.preventDefault(); 
    // ... 
} 

查看excellent articles at quirksmode.org瞭解更多關於事件處理的信息。它還介紹了瀏覽器之間的差異。

+0

如何使用數據在新頁面中顯示??像新的HTML文件? –

+0

有多種方式,它取決於您可以使用的工具(例如服務器端語言)。總的來說,這取決於你想要對數據做什麼。 –

+0

我的意思是在這個頁面,我正在編碼,它是否正在創建一個新的頁面? –

3

當您在已經加載的文檔上調用document.open()然後document.write()時,它將清除當前文檔並將其替換爲新的空白文檔。

如果您只是想將一些內容添加到當前文檔,那麼您應該使用DOM操作。創建新元素並將其添加到當前文檔。

例如,你可以這樣做:

function pressedbutton() { 
    var thename = document.getElementById("yourname").value; 
    var div = document.createElement("div"); 
    div.innerHTML = "<h1>Welcome!</h1>Hello, " + thename + ", and welcome to my page!"; 
    document.body.appendChild(div); 

    // prevent form submission 
    return false; 
} 

此外,您的表單提交回您的服務器,這是造成頁面重新加載。您可以通過將您的按鈕更改爲常規按鈕而不是提交按鈕或通過防止提交按鈕的默認行爲來防止這種情況。

如果你不打算提交表單,然後就改從這個按鈕:

<input type="submit" onclick="pressedbutton()" value="Submit"> 

這樣:

<input type="button" onclick="pressedbutton()" value="Submit"> 
+0

告訴我open()方法創建一個新的臨時頁面? –

+0

@MarcAndreJiacarrini - 關於'document.open()'](https://developer.mozilla.org/en-US/docs/Web/API/Document/open),請參見[MDN參考資料]。 – jfriend00

0

我在代碼中看到了幾個問題。該伸出我的一個最是:

document.open(); 
    document.write("<h1>Welcome!</h1>"); 
    document.write("Hello, " + thename + ", and welcome to my page!"); 
    document.close(); 

我個人認爲,任何涉及document.是可怕的,因爲它會覆蓋多少你已經有了發生在HTML文件中的預設代碼。

相反,你可以使用:

location.replace(url) 

這使一切就緒,而是TRULY加載了新的一頁。 在具有url的頁面上,您可以具有相同的document.write()腳本(我不建議這麼做),或者您可以在該頁面上預設HTML,以實現您想要完成的任務,認爲是更好的方法。

而且,這是一種煩我:

變化

</form> 
     <script type="text/javascript" src="main.js"></script> 
    </div> 

 </form> 
    </div> 
<script type="text/javascript" src="main.js"></script> 

這是很好的做法,讓您的腳本在文檔的末尾,而不是內部元素。

關於存儲的價值,我會用下面的代碼:

在第一頁:

function pressedbutton(){ 
    var thename = document.getElementById("yourname").value; 
    localStorage.setItem("Name", thename); 
    location.replace("Page2.html"); 
} 

在Page2.html(同一文件夾),類似的代碼放置到你有什麼(在javascript):

<script> 
var div = document.createElement("div"); 
div.innerHTML = "`<h1>`Welcome!`</h1>`Hello, " + 
localStorage.getItem("Name") + 
", and welcome to my page!"; 
document.body.appendChild(div); 
</script>