CODEWITHSUNDEEP
javascriptforms
Santosh
Santosh

Reputation: 19

Get form values to create a custom URL

I have the following form:

<form>
        <div>Adults</div>
        <div>
            <select name="adults">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Children</div>
        <div>
            <select name="children">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Check-in date</div>
        <div>
            <input name="date_from" value="16-04-2015" type="text"></div>
    </div>      
    <div>
        <div>Check-out date</div>
        <div><input name="date_to" value="17-04-2015" type="text"></div>
    </div>      
    <div>
        <input value="Check Availability" type="submit">
    </div>      
</form>

Now I want to call a javascript function on above form submit. This function will get all form elements values and create the following URL to redirect.

online-reservation.html#!/Rooms/date_from:16-04-2015/date_to:17-04-2015/adults:1/children:0

How can I create this JS function?

Thanks.

Upvotes: 1

Views: 2697

Answers (4)

ErDmKo
ErDmKo

Reputation: 603

You don't usually use form for redirect.

But you can create function, which collects data from form fields. It must iterate selects' and inputs' tags of form and generate key value strings, some sort of date_from:16-04-2015. After that you should join this strings with /. As a result you will have right side of url so you can combine it with static piece of url. In your case static piece will be online-reservation.html#!/Rooms/.

Now you can call document.location.href = <here your generated url> to change your location. At the same time if your function is form submission event handler you should remember to prevent default form submission event.

You can find working solution here

Upvotes: 0

zfrisch
zfrisch

Reputation: 8660

Here's a fiddle that will give you exactly what you asked for: http://jsfiddle.net/9Le00jtw/

$("#formone").submit( function() {

document.location.assign( "http://onlinereservation.html#!" + "/" + $("input[name=date_from]").val() + "/" + $("input[name=date_to]").val() + "/adults:" + $("select[name=adults]").val() + "/children:" + $("select[name=children]").val() );
return false;
});

Here's a fiddle for the way that I would do it: http://jsfiddle.net/xLmsb1xo/1/

Now I realize that you want to use the backslash character to separate each value, however, probably the easiest way and, indeed, the most common/standard way is to use the syntax "?variable=", that's why this code is modeled after that. It makes it much easier to parse out variables from the url. You'll notice in the code that i set it up to display as a simple alert() message. In order to link to the page instead of alerting, you would replace alert() with document.location.assign()

JavaScript: 

window.onload = function() {
$("#formone").submit( function() {
    /* when user hits the submit button do following */
   alert( window.location.href + "?datefrom=" + $("input[name=date_from]").val() + "?dateto=" + $("input[name=date_to]").val() + "?adults=" + $("select[name=adults]").val() + "?children=" + $("select[name=children]").val() );
*/get the window location and add "?variable=" then the value of 
the input or select box for that variable a.e. ?dateto=04-17-2015 */
return false;
});
}

In the above code we get the location of the current window using window.location.href and then we append the variables to it, with a variable name and then the value of the appropriate input/select boxes using their name attributes. The selector syntax is tagname[attr=text] - so if we're trying to find an input box with the name bingo, we would use this selector in jQuery $("input[name=bingo]") and if we were looking for a selection box with the name banana we would do use this selector $("select[name=banana]")

HTML: 

<form method="POST" id="formone">
<!-- we added the method="POST" so that the browser knows what to do with 
the form when the submit button is tapped and the id so that we can identify 
it -->
        <div>Adults</div>
        <div>
            <select name="adults">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Children</div>
        <div>
            <select name="children">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select>
        </div>
    </div>      
    <div>
        <div>Check-in date</div>
        <div>
            <input name="date_from" value="16-04-2015" type="text"></div>
    </div>      
    <div>
        <div>Check-out date</div>
        <div><input name="date_to" value="17-04-2015" type="text"></div>
    </div>      
    <div>
        <input value="Check Availability" type="submit">
    </div>      
</form>

EDIT: I added "return false;" to the submit() function. The reason why is because we need to tell the form to stop trying to submit and to process the script as is, this will allow a redirect.

Upvotes: 1

Peleg
Peleg

Reputation: 1224

How about the following:

# Serialize the data like we want it
function serialize (form) {
  return [].slice.call(form.querySelectorAll('[name]'))
    .reduce(function (carry, input) {
      return carry + '/' + input.name + ':' + encodeURIComponent(input.value);
    }, '');
}

function submitHandler (e) {
  e.preventDefault();
  window.location = '/online-reservation.html#!' + serialize(e.target)
}

# Bind handler to form submit
document.querySelector('form')
  .addEventListener('submit', submitHandler);

Upvotes: 2

pingbattlespl0x
pingbattlespl0x

Reputation: 67

This is a string manipulation problem. Your function needs to output a string with the desired fields, yes?

If you have jQuery, you can extract the values from your fields like so:

var adult = $('.select[name=adults]').val();
var date_from = $('.input[name=date_from]').val();

etc...

Then you can add the strings together in your function and return the output.

Upvotes: 0

Related Questions