CODEWITHSUNDEEP
javascriptjquery
javing
javing

Reputation: 12423

How to change the format of an URL with javascript?

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:

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

Upvotes: 0

Views: 1845

Answers (2)

js1568
js1568

Reputation: 7032

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.

Upvotes: 1

one.beat.consumer
one.beat.consumer

Reputation: 9504

Javascript has a DecodeURIComponent function:

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

  1. **DecodeURIComponent(uriString) (ex. %2F becomes /).

  2. Use search(regEx) to find your Check parameter, and get its last occuring index.

  3. Use subStr(0, uriString.Length - index + 1) to grab the URI from the beginning to right before the parameter you want removed.

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

Upvotes: 0

Related Questions