javascript - 使用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>

这是我真正想要的输出:

如果我能得到任何帮助，我将不胜感激!抱歉这个菜鸟问题:)

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, ""));
  }); 
});