How to change the format of an URL with javascript?

Question

I am making a form that submits some values to a site for booking hotel rooms. The urls should look like this:

https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html?autosearch=true&begindate=11/30/11&enddate=12/16/11&adults=1&children=0&rooms=1

I managed only to get a URL that looks like this:

https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html?begindate=11%2F30%2F2011&enddate=12%2F15%2F2011&rooms=1&adults=1&children=0&Check=Check+Availability

Here is what I did:

<!DOCTYPE html>
<html>

<head>
<title>Demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

<script>

    $(function() {
        $('#datepicker1').datepicker({minDate:0,dateFormat:'mm/dd/yy'});
        $("#datepicker2").datepicker({minDate:0,dateFormat:'mm/dd/yy'});
        $('#arrival').datepicker({dateFormat:'mm/dd/yy'});
        $("#departure").datepicker({dateFormat:'mm/dd/yy'});    

        $("#posalji").click(function(){
          var datum1=$('#datepicker1').val();
          var datum2=$('#datepicker2').val();
          var rooms=$('#rooms').val();
          var adults=$('#adults').val();
          var children=$('#children').val();
          datum1=datum1.substring(3,5)+"/"+datum1.substring(0,2)+"/"+datum1.substring(8,10);
          datum2=datum2.substring(3,5)+"/"+datum2.substring(0,2)+"/"+datum2.substring(8,10);
        });     
    }); 
</script>

</head>
<body>      

<table border="0" cellspacing="1" cellpadding="1" style="background-color: #7a7c72; opacity: 0.8; margin-top: 15px; width: 230px;">
    <tbody>
        <tr>
            <td align="center" style="background-color: #61625b; color: #ffffff; font-weight: bold; padding: 3px; font-size: 13px;">CHECK AVAILABILITY</td>
        </tr>
        <tr>
            <td align="center"><form id="availability" type="get" action="https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html">

                <table border="0" cellspacing="2" cellpadding="0" style="width: 200px;">
                    <tbody>
                        <tr>
                            <td height="22" colspan="3" align="left" valign="bottom" style="font-size: 11px; font-weight: bold;"><label>Check in</label></td>
                        </tr>
                        <tr>
                            <td height="17" colspan="3" align="left" valign="bottom"><input name="begindate" type="text" id="datepicker1" /></td>
                        </tr>
                        <tr>
                            <td height="17" colspan="3" align="left" valign="bottom" style="font-size: 11px; font-weight: bold;"><label>Check out</label></td>
                        </tr>
                        <tr>
                            <td height="17" colspan="3" align="left" valign="bottom"><input id="datepicker2" name="enddate" type="text" /></td>
                        </tr>
                        <tr style="font-size: 11px; font-weight: bold;">
                            <td width="65" height="17" align="left" valign="bottom">Rooms</td>
                            <td width="65" height="17" align="left" valign="bottom">Adults</td>
                            <td width="65" height="17" align="left" valign="bottom">Children</td>
                        </tr>
                        <tr>
                            <td width="65" height="17" align="left" valign="bottom"><select name="rooms" id="rooms"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
                            <td width="65" height="17" align="left" valign="bottom"><select name="adults" id="adults"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
                            <td width="65" height="17" align="left" valign="bottom"><select name="children" id="children"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
                        </tr>
                        <tr>
                            <td height="40" colspan="3" align="center">
                            <input id="posalji" name="Check" type="submit" value="Check Availability">
                            </td>
                        </tr>
                    </tbody>
                </table>

                </form></td>
        </tr>
    </tbody>
</table>


</body>

</html>

In order to make it work I need:

to replace %2F from the URL with just /
I need to add autosearch=true after ?
I need to remove the last parameter called Check

I am not really good with javascript, I'll appreciate some help.

where is the actuall url building? I see the vars but not the url building — alonisser
– alonisser, Commented Nov 30, 2011 at 18:19
note that %2F is just the url encode of / I believe this is not a problem — alonisser
– alonisser, Commented Nov 30, 2011 at 18:27

kamaci · Accepted Answer · 2011-11-30 18:28:43Z

1

Add a hidden input element to your form: <input type="hidden" name="autosearch" value="true" />

To remove "Check" parameter, eliminate the name attribute from that input element.

edited Nov 30, 2011 at 18:28

kamaci

75.9k74 gold badges247 silver badges374 bronze badges

answered Nov 30, 2011 at 18:21

js1568

7,0322 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

javing Over a year ago

Best answer, that was what i needed. The destination page accepted the encoded URL, the problem was the in the parameters. Thanks!

one.beat.consumer · Accepted Answer · 2011-11-30 18:28:42Z

0

Javascript has a DecodeURIComponent function:

http://www.w3schools.com/jsref/jsref_decodeURIComponent.asp

**DecodeURIComponent(uriString) (ex. %2F becomes /).
Use search(regEx) to find your Check parameter, and get its last occuring index.
Use subStr(0, uriString.Length - index + 1) to grab the URI from the beginning to right before the parameter you want removed.
Append your autosearch onto the trimmed string.

Note, this assumes Check is truly last as Step 3 will clip everything after the index of of "Check"... using a better regEx expression in Step 2 would allow you to find the beginning and end index of this string and surgically remove it without affecting anything that may or may not occur afterward.

answered Nov 30, 2011 at 18:28

one.beat.consumer

9,51413 gold badges57 silver badges102 bronze badges

1 Comment

one.beat.consumer Over a year ago

If you want to insert autosearch after the "?" character (so it is the first parameter in the URI, you would simply find the index of the ?, split the URI string there, append the autosearch string value to the first string, and then glue the later half of the URI back on... make sure to use an ampersand prefix on the second half of the string as it is no longer the first parameter in the URI.

Collectives™ on Stack Overflow

How to change the format of an URL with javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related