使用JS将文本框值放入URL

Question

所以我想有三个文本框输入，然后将这些值放入URL而不重新加载页面。

我一直在网上看，但我能找到的只是JS脚本，它们将输出作为ID，但ID在URL中不起作用。

这是我到目前为止所做的，但我想我可能采取了错误的做法。

<script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input").value;
    }
 </script>

<form>
    <label><b>Message</b></label>
    <input type="text" name="message" id="user_input">
 </form>

 <input type="submit" onclick="showInput();"><br/>
 <label>Input:</label>
 <p><span id='display'></span></p>

这是我真正喜欢的输出：

我很感激我能得到的任何帮助！对不起noob问题:)

Answer 1

试试这个：

链接：https://codepen.io/logoys/pen/jZgMXo

HTML：

<form>
  <div>Code 1=<input type="text" class="params" data-var="one" id="one"></div>
  <div>Code 2=<input type="text" class="params" id="one" data-var="two"></div>
  <div>Code 3=<input type="text" class="params" id="three" data-var="three"></div>
</form>

<div id="url"></div>

CSS：

form div{
  margin-bottom: 1rem;
}
#url{
  color: blue;
}

JS（jQuery）：

$('document').ready(function(){
  var URL = 'http://google.com/?',
  queryString = [];
  $('.params').keyup(function(){
    var input = $(this), 
        value = input.val(),
        varParam = input.data('var');
    queryString[varParam] = value;
    var qr = '';
    for(let key in queryString){
      qr += queryString[key] + '&'
    }
    $("#url").html(URL + qr.replace(/(^&)|(&$)/g, ""));
  }); 
});