HTML表單中的數據未保存在我的javascript函數中

Question

所以基本上我有一個使用下拉框的HTML表單。 提交表單后，它將調用我編寫的函數。 但是，在提交此表單后，它將繼續進入另一個HTML頁面，在該頁面中需要使用該表單的數據，但該數據不再可用，我也不知道為什么。

<body>
<h1>Select your input:</h1>
<form id="customize" name="customize" method="get" action="index.html" onSubmit="return checkInfo();">
<p>Please select the right value</p>
<select id="val1" name="val1">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
<input type="submit" value="submit" />
</form>
</body>


function checkInfo() {
var1 = document.getElementById('var1').value;
return true;
}

我遺漏了一些涉及其他變量的javascript代碼，因此與該問題無關，這就是為什么它總是返回true的原因，因為我沒有顯示返回false的選項。 我懷疑這與非全局變量有關，或者由於某種原因，無法從同一Javascript文件中的其他函數訪問此var1。 基本上，提交表單，調用函數，創建變量並分配數據，然后在函數返回true時加載另一個HTML頁面，該頁面在使用該var1進行計算的同一Javascript文件中調用一個單獨的函數。

我最終使用了下面的用戶推薦給我的本地存儲API。 這是我使用的鏈接： https : //www.w3schools.com/html/html5_webstorage.asp

Answer 1

首先：

document.getElementById('var1').value;

應該

document.getElementById('val1').value;

另外，我不知道您想做什么，但據我所知onSubmit（）不會隨請求發送數據，因此讓它返回某內容應該什么都不做（考慮到您希望做的是發送一個http請求，表示加載新頁面）

Answer 2

加載新頁面時狀態不會持久。 如果將數據分配給一頁上的變量，然后導航到新頁，則將重新加載腳本（即使它是同一文件）。

但是，您可以使用localStorage或sessionStorage類的API在頁面之間持久化數據，也可以查看單頁面應用程序解決方案，該解決方案使用頁面內路由通過僅模擬頁面導航來維持相同的狀態/上下文。

Answer 3

您正在使用GET方法通過URL傳遞變量（請參見HTTP方法）。 Javascript具有實驗性的URLSearchParams接口，該接口定義了可與URL的查詢字符串一起使用的實用程序方法... Mozilla Docs 。 您可以將其與getElementById一起使用，以在index.html中設置加載時的值。

<html>
<body>
  <h1>Select your input:</h1>
  <form id="customize" name="customize" method="get" action="index.html" onSubmit="return checkInfo();">
    <p>Please select the right value</p>
    <select id="selectVal" name="val1">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
    </select>
    <input type="submit" value="submit" />
  </form>
  <script>
    let params = new URLSearchParams(document.location.search.substring(1))
    let value = params.get('val1')
    var element = document.getElementById('selectVal');
    element.value = value
  </script>
</body>

HTML表單中的數據未保存在我的javascript函數中

問題描述

3 個解決方案

解決方案1
0 2017-10-16 21:04:08

解決方案2
0 已采納 2017-10-16 21:13:09

解決方案3
0 2017-10-16 21:26:29

HTML表單中的數據未保存在我的javascript函數中

問題描述

3 個解決方案

解決方案1 0 2017-10-16 21:04:08

解決方案2 0 已采納 2017-10-16 21:13:09

解決方案3 0 2017-10-16 21:26:29

解決方案1
0 2017-10-16 21:04:08

解決方案2
0 已采納 2017-10-16 21:13:09

解決方案3
0 2017-10-16 21:26:29