追加URL與表單輸入

這是我第一次嘗試在JavaScript中寫任何東西，雖然這完全按照預期，我相信它可以做得更簡單。不是說這個腳本是有用的，只是一個學習新東西的練習。我也試圖不使用邪惡的文件編寫。追加URL與表單輸入

那麼這樣做的更優雅的方式是什麼？

<html> 
<body> 

<input name="abc" type="text" id="foo"> 
<button onclick="AddInputValue()">Submit</button> 

<p id="displayURL"></p> 

<script> 
function AddInputValue(){ 
var domain = "http://site.com?abc=" 
var qstring = document.getElementById("foo").value; 
document.getElementById("displayURL").innerHTML=domain + qstring; 
} 
</script> 
</body> 
</html>

來源

2013-03-24 Tom

如果使用jQuery的：

<html> 
    <!-- Include jQuery! --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <body> 
     <form id="form1"> 
      <input name="abc" type="text" id="foo"> 
      <button type="submit">Submit</button> 
     </form> 

     <p id="displayURL"></p> 

     <script> 
      $(document).ready(function() { 
       var form = document.getElementById("form1"); 
       $(form).submit(function() { 
        var domain = "http://site.com/?"; 
        var data = $(this).serialize(); 

        document.getElementById("displayURL").innerHTML = domain + data; 

        return false; 
       }); 
      }); 
     </script> 
    </body> 
</html>

，你甚至可以添加更多的表單元素和元素的name將匹配查詢字符串。 http://jsfiddle.net/3muu6/

來源

2013-03-24 09:42:53 flux

我更喜歡http://jsfiddle.net/3muu6/中的示例。那麼「＆」從哪裏來？ innerHTML知道url構造並自動添加「＆」嗎？如果我要在jsfiddle中使用示例，是否需要「include jqerry」和「src =」的中的2行？ – Tom 2013-03-24 13:57:43

＆來自$（）。serialize（）;它所做的是將表單序列化爲一個查詢字符串，然後我們使用return false;以防止表單提交。如果你使用jsfiddle，你不需要在頭部包含jquery，左邊有一個菜單來完成它。但是當你在託管中使用它時，你確實需要它。 – flux 2013-03-25 08:35:54

只需在http://jsfiddle.net/3muu6/中發佈示例。

增加輸入數量。這基本上是Google Analytics（分析）網址構建器的功能，也是此練習的靈感來源。

<html> 
<head> 
<!-- Include jQuery! --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
</head> 

<body> 
<form id="form1"> 
    <input name="abc" type="text" id="foo" /><br /> 
    <input name="def" type="text" id="bar" /><br /> 
    <input name="ghi" type="text" id="tar" /><br /> 
    <input name="jkl" type="text" id="boo" /><br /> 
<button type="submit">Submit</button> 
</form> 
<p id="displayURL"></p> 


<script> 
$(document).ready(function() { 
    var form = document.getElementById("form1"); 
    $(form).submit(function() { 
     var domain = "http://example.com/?"; 
     var data = $(this).serialize(); 

     document.getElementById("displayURL").innerHTML = domain + data; 

     return false; 
    }); 
}); 
</script> 
</body></html>

現在如何在用戶將輸入值留空時省略查詢字符串對？嗯。

來源

2013-03-24 19:25:58 Tom

追加URL與表單輸入

回答

相關問題