如何創建接受字段值作爲URL參數的HTML表單

目標是創建一個獨立的HTML表單，用於預填充以URL參數形式傳遞的文本。如何創建接受字段值作爲URL參數的HTML表單

要進行測試，一個普通的HTML文件名爲「測試」一個textarea的創建。在地址欄中鍵入http://myserver.com/simpleform.html?test=sampletext時，作爲參數測試傳遞的文本不會填充字段。

我認爲將文本預填充到Web窗體中的字段的唯一必要條件是知道目標字段的名稱。當失敗時，我嘗試使用一些Javascript，這些Javascript會在我發現Cerbrus提供的另一個答案時載入：/ a/14070223

但是結果沒有變化。當我在地址欄中輸入http://myserver.com/simpleform.html#test=sampletext時，傳遞的文本不會出現在字段中。這裏是代碼我目前：

<!DOCTYPE html> 
 
<html> 
 

 
<body onload="acceptParam()"> 
 

 
<script> 
 
function acceptParam() { 
 
    var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#` 
 
    for(var i = 0; i < hashParams.length; i++){ 
 
     var p = hashParams[i].split('='); 
 
     document.getElementById(p[0]).value = decodeURIComponent(p[1]);; 
 
    } 
 
} 
 
</script> 
 
<center> 
 
<textarea rows="15" name="test" cols="50"> 
 

 
</textarea> 
 
</center> 
 

 

 

 
</body> 
 
</html>

它甚至有可能創建一個使用一個獨立的HTML文件接受字段值的URL參數網頁表單？我不需要提交數據，只需填寫URL中傳遞的文本即可。

來源

2017-06-28 Brainflurry

如果網址爲「http://myserver.com/simpleform.html?test=sampletext」，你可以做這樣的事情：

<!DOCTYPE html> 
 
<html> 
 

 
<body onload="acceptParam()"> 
 
    
 
<center> 
 
<textarea id='p' rows="15" name="test" cols="50"> 
 

 
</textarea> 
 
</center> 
 

 

 
<script> 
 
function acceptParam() { 
 
    var hashParams = window.location.href.substr(1).split('?'); // substr(1) to remove the `#` 
 
     hashParams = hashParams[1].split('&'); 
 
     var p = hashParams[0].split('='); 
 
     document.getElementById('p').value = p[1]; 
 
} 
 
</script> 
 

 

 
</body> 
 
</html>

來源

2017-06-28 22:14:18 Dij

我複製在這個答案的全部代碼，並試圖都沒有成功如下： http://brainflurry.host-ed.me/files/ testso.html？test = hello http://brainflurry.host-ed.me/files/testso.html#test=hello – Brainflurry

@Brainflurry，代碼是檢查散列，因爲有問題，我已更正爲使用網址代碼現在，請再次檢查，它應該工作。 – Dij

Id在這裏是'p' – Julian

您需要與id 「測試」（因此JavaScript函數getElementById）設置你的textarea ：

<textarea rows="15" id="test" name="test" cols="50"> 

</textarea>

另外，你不應該使用<center>元素。這是更好地創建父div與標籤style="text-align:center"這樣的：

<div style="text-align:center"> 
<textarea rows="15" id="test" name="test" cols="50"> 

</textarea> 
</div>

來源

2017-06-28 22:20:14 Seblor

謝謝你的回答。我明白你的意思是用id參數，但我沒有專門知識去實現JavaScript，使它們一起工作。作爲初學者，在整個劇本中看到它會有所幫助。再次感謝！ – Brainflurry

JS保持不變。你只需要用我的html替換內部主體。 – Seblor

您可以用?或window.location.search與#後window.location.hash後的字符串得到的字符串。

而非自行分析和分割字符串，您可以使用URLSearchParams幫助是：

var queryString = window.location.search; 
let params = new URLSearchParams(queryString.substring(1)); // remove the '?' 
let value = params.get('test'); // will return the requested parameter

當然，你可以再與循環回去取提供參數結合這一點。

另請注意，在您的示例中，您正在通過id搜索元素（表單域），但您的域只有name和id。

來源

2017-06-28 22:22:31

警告：IE – Julian

不支持'URLSearchParams'感謝您對Richard的貢獻。您的回答引發了URLSearchParams在IE中不受支持的寶貴見解。所以，也要感謝你@朱連！ – Brainflurry

甚至有可能創建一個接受字段值的網頁形式爲使用單個獨立HTML文件的網址參數？我不需要提交數據，只需填寫 URL中傳遞的文本字段。

當然可以。

雖然從查詢字符串（？字符後面的部分）獲取數據並獲取URL的片段/哈希部分是兩件不同的事情。

這裏有一個工作示例：

<!DOCTYPE html> 
<html> 

<body onload="fetchParams()"> 

<script> 
    function fetchParams() 
    { 
     document.getElementById('test').value = getQueryStringValue('foo'); 
     document.getElementById('test2').value = getQueryStringValue('bar'); 

     // This fetches the data after the hash-character and the value which has 'test' in front of the equals sign: 
     //document.getElementById('test').value = getHashParam('test'); 
    } 

    function getQueryStringValue(name) 
    { 
     var params = new URLSearchParams(window.location.search.substring(1)); 
     return params.get(name); 
    } 

    function getHashParam(name) 
    { 
     var params = window.location.hash.substring(1).split('&'); 
     console.log(params); 
     for (var i = 0; i < params.length; i++) 
     { 
      if (params[i].split('=')[0].toLowerCase() === name.toLowerCase()) 
      { 
       return params[i].split('=')[1] 
      } 
     } 
    } 

</script> 

<textarea rows="15" id="test" name="test" cols="50"> 
</textarea> 

<textarea rows="15" id="test2" name="test2" cols="50"> 
</textarea> 


</body> 
</html>

來源

2017-06-28 22:32:57 HaukurHaf

謝謝你的回覆@HaukurHaf。我上傳了您的代碼，但仍無法獲取傳遞的參數來填充任一表單字段。請參閱：http://brainflurry.host-ed.me/files/test-HaukurHaf.html?test=sampletext – Brainflurry

這是因爲我的代碼實際上是試圖從名爲foo和bar的參數中讀取值。如果你想從一個名爲test的參數中讀取數據，只需在這裏添加這行：document.getElementById（'test'）。value = getQueryStringValue（'test'）;並刪除fetchParams（）函數中的其他兩行。 – HaukurHaf

謝謝你的回答和幫助。我能夠通過代碼將參數傳遞給獨立的HTML頁面，但我接受了Diwas Joshi的答案，因爲這對我來說更容易理解。 Diwas的代碼更接近我的原始代碼，這使我能夠更容易地看到實現它所需的更改。我沒有完全掌握您提供的示例代碼中的所有其他Javascript。我正在學習！再次感謝。 – Brainflurry

如何創建接受字段值作爲URL參數的HTML表單

回答

相關問題