Dynamic URL from user input to search

Question

What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )

    <script type="text/javascript">
    $(function () {
$('#submit').click(function() {
        $('#button').click(function(e) {
                var checkInDate = document.getElementById('checkInDate').value;
                        var checkInMonthYear = document.getElementById('checkInMonthYear').value;
                        var checkOutDate = document.getElementById('checkOutDate').value;
                        var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
                        var numberOfAdults = document.getElementById('numberOfAdults').value;
                        var rateCode = document.getElementById('rateCode').value
                window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en&regionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");

    window.location = url;
});

});

Answer 1

Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".

For this to work you need to use the "GET" method.

<form action="http://www.Link.com/redirect" method="GET">
  <input type="hidden" name="path" value="hd"><br>
  <input type="hidden" name="brandCode" value="cv"><br>
  <input type="hidden" name="localeCode" value="en"><br>
  <input type="hidden" name="regionCode" value="1"><br>
  <input type="hidden" name="hotelCode" value="DISCV"><br>
  <input type="text" name="checkInDate"><br>
  <input type="text" name="checkInMonthYear"><br>
  <input type="text" name="checkOutDate"><br>
  <input type="text" name="checkOutMonthYear"><br>
  <input type="text" name="numberOfAdults"><br>
  <input type="text" name="rateCode"><br>
  <input type="submit">
</form>

Clicking "Submit" changes the URL to the desired one.

---

If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link

This is much better than trying to re-implement URL manipulation on your own.