如何使用HTML按鈕將用戶重定向到新的.html頁面，同時還使用.value從表單輸入保存數據？

我已經創建了一個表單，用戶可以輸入數據提交時保存在變量中的數據。我正在申請一個解決方案，既可以保存用戶的數據，又可以在按下按鈕時將用戶重定向到新的.html頁面。如何使用HTML按鈕將用戶重定向到新的.html頁面，同時還使用.value從表單輸入保存數據？

<button type="button" onclick="getInfo()">Submit</button>

正如你可以在上面看到，該按鈕被激活的功能，那將節省這樣的信息：

function getInfo(){ 
    var firstname = document.getElementById("firstname").value 
    var lastname = document.getElementById("lastname").value 
    var adress = document.getElementById("adress").value 
    var password1 = document.getElementById("password1").value 
    var password2 = document.getElementById("password2").value 
}

我怎樣才能實現這一目標？此致，分散。

來源

2017-05-29 Decentralized

保存數據在哪裏？ – j08691

你的意思是保存這些變量並在另一個HTML頁面中使用它們？這是無法完成的，因爲在新頁面上這些變量將不存在，或者將不具備您需要的值，如果不使用服務器端編程我認爲您只能使用GET變量並通過JS獲取它們除了本地存儲之外的其他頁面。 – Lixus

按下按鈕時，數據保存在變量中，至少我相信。給出的示例：當用戶鍵入她/他的名字時，它將被存儲在變量「firstname」中。 – Decentralized

也許你正在尋找類似的東西：

function getInfo(){ 
    var firstname = document.getElementById("firstname").value 
    var lastname = document.getElementById("lastname").value 
    var adress = document.getElementById("adress").value 
    var password1 = document.getElementById("password1").value 
    var password2 = document.getElementById("password2").value 
    localStorage['firstname'] = firstname; // store data into browser's storage 
    window.location = 'http://overpage.html'; // change the browser's page 

}

注：

你可以訪問數據的一個使用

var firstnameNewPage = localStorage['firstname'];

在sessionStorage如果你想看看該療法頁面保持數據僅適用於會話使用

來源

2017-05-29 22:16:50

嗨你c與各種形式屬性的使用形態的動作就像這樣

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

來源

2017-05-29 22:19:38 Gopikrishn

首先，這不是你應該如何處理credentias和驗證，但對於這個問題的緣故，我會忽略。

由於您的問題非常廣泛，可以有很多可能的答案。所以，我的回答將是一般

下面是一些你可以存儲這些數據，並在另一頁顯示它的方式是：

的數據發送到服務器，因此它可以存儲在服務器的會話或數據庫中，以便後者檢索（通過ajax調用或html表單）。
將您的應用設置爲single page application，以便您所有的「頁面」共享一個可用於移動數據的狀態。

維基百科被實現爲SPA JavaScript框架的一些例子：

AngularJS，Ember.js，Meteor.js，ExtJS的和應對
使用瀏覽器的API叫做sessionStorage或localStorage。它們可以用來存儲要訪問的字符串的鍵值對。您還可以使用JSON.parse和JSON.stringify函數在其中存儲JSON數據。

我的建議：

從這些可能性，我會說選項3（localStorage）會喜歡的東西最容易實現的：

localStorage.setItem('first name', fname);

和

var fname = localStorage.getItem('first name');

這將在瀏覽器中保存這些值。

然後您可以在location.replace('/path/to/other/page.html')之後執行此操作，並將這些值加載到其他頁面中，只要您在相同的域中使用它即可。

來源

2017-05-29 22:57:12

如果我會選擇2，我將如何去實施這個？你寫的代碼行是選項二？它是一個單頁面應用程序，這是否使它無法重新加載到新頁面？我需要做什麼代碼行？使按鈕同時保存數據的代碼行（我猜測已經由我完成了）？以及將用戶重定向到新頁面的代碼行是什麼？ – Decentralized

1）我編輯了答案來澄清。 2）我顯示的代碼行是關於選項3（'localStorage' API）。實施一個SPA實際上是一個不同的範圍，編輯問題或答案可能太多了。我建議你爲這個和谷歌的東西選擇一個JavaScript框架，只有當你遇到問題時纔會打開一個新的問題。 3）你現有的代碼沒有多大幫助，因爲你只將數據保存到JavaScript變量（在RAM /內存中），當你刷新頁面時，所有的數據都被刪除。您需要將數據保存到持久存儲器中。 –

好的，我認爲最好的選擇是學習一個JavaScript框架。你會爲初學者推薦哪一種？ – Decentralized

如何使用HTML按鈕將用戶重定向到新的.html頁面，同時還使用.value從表單輸入保存數據？

回答

相關問題