Javascript - Goto URL based on Drop Down Selections (continued!)

Question

This is continued from here: Javascript / jQuery - Goto URL based on Drop Down Selections

Some great folks have given me some code examples, but I am having real trouble on where to insert the code in my example form.

Can someone let me know where exactly the code provided in the previous question location should be added in a form to work properly?

jaime · Accepted Answer · 2011-06-05 19:26:32Z

1

Somewhere in your JavaScript file you need to bind a function to the onsubmit event of your form, so it can do whatever you want.

If you are using jQuery do this:

$(function(){

  $('form').submit(function(e){

      window.location.href = $('#dd1').val() +
                             $('#dd2').val()+
                             $('#dd3').val();

      e.preventDefault();

    });
});

Check how it works here: http://jsfiddle.net/WDtGK/2/

added HTML for context

 <form>
      <select class="dropdown" id="dd1">
        <option>http://</option>
        <option>ftp://</option>
        <option>https://</option>
      </select>
      <select class="dropdown" id="dd2">
        <option>google</option>
        <option>yahoo</option>
        <option>bbc</option>
        <option>hotmail</option>
      </select>
      <select class="dropdown" id="dd3">
        <option>.com</option>
        <option>.net</option>
        <option>.co.uk</option>
      </select>
      <input type="submit" name="button" id="button" value="Go!">
  </form>

edited Jun 5, 2011 at 19:26

answered Jun 5, 2011 at 18:50

jaime

42k10 gold badges85 silver badges52 bronze badges

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

3 Comments

Zach Nicodemous Over a year ago

Is there any way to add an additional function that checks the URL before going to it, and say, for example, if the last character is an "a" then replace it with a "b" - My URLs sometimes include the "+" character which I need to remove if its the last character in a URL. So it basically needs to be "if last character is +, remove it"

jaime Over a year ago

You can store the url into a variable and then use regular expressions. A very simple case would be url = url.replace(/\+$/,'') which would remove that last + in the string.

Roi Over a year ago

I wouldn't use the "+" at all.. rather use: [$('#dd1').val(),$('#dd2').val(),$('#dd3').val()].join("")

Kevin Bowersox · Accepted Answer · 2011-06-05 19:11:05Z

 <form>
  <select class="dropdown" id="dd1" style="margin-right:10px;width:130px">
    <option>http://</option>
    <option>ftp://</option>
    <option>https://</option>
  </select>
  <select class="dropdown" id="dd2" style="margin-right:10px;width:130px">
    <option>google</option>
    <option>yahoo</option>
    <option>bbc</option>
    <option>hotmail</option>
  </select>
  <select class="dropdown" id="dd3" style="width:130px;margin-right:20px">
    <option>.com</option>
    <option>.net</option>
    <option>.co.uk</option>
  </select>
  <button id="button" type="button">GO</button> <!-- notice this change -->
  </form>

In Javascript:

$(document).ready(function () {
      $("#button").click(function(){navigate();});
});

function navigate(){
window.location.href = $('#dd1').val() + $('#dd2').val() + $('#dd3').val();
}

Collectives™ on Stack Overflow

Javascript - Goto URL based on Drop Down Selections (continued!)

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related