CODEWITHSUNDEEP
javascripthtml
Jack Edwards
Jack Edwards

Reputation: 53

Use JS to put text box values into URL

So I would like to have three text box inputs, and then have these values put into a URL without having the page reload.

I've been looking online but all I can find are JS scripts which give the outputs as ID's, but ID's don't work in URLS.

This is what I've got so far, but I think I may of taken a wrong approach. 

<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>

And here's the output that I would actually like:

Example

I'd appreciate any help I can get on this! Sorry for the noob question :)

Upvotes: 0

Views: 431

Answers (1)

Isaac Fraire
Isaac Fraire

Reputation: 27

Try this:

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

Upvotes: 1

Related Questions