Dropdown menu Redirection using AJAX and JQuery or Javascript

Question

I am trying to create a dropdown menu with numbers 1 to 6, and when a user selects a number and clicks the button it will redirect the user to the webpage associated with that number selection. The redirected content will display at . I would like to do this using AJAX and jQuery or javascript. I can get a redirection if I give an id to this line: , but that is not what my ultimate goal is. It works for redirection but not to the corresponding webpage associated with a number. I tried assigning id's to each option selection but manipulating the ajax.js file with those id's does not provide any redirection. I am not sure how to "bind", "focus" or "select" a particular dropdown selection in the AJAX code. I may need to create a loop and a variable in the AJAX code or a switch statement to properly redirect to the correct associated webpage with the number selected in the dropdown menu once I am able to get the option selection to "bind", "focus" or "select". I am not sure if AJAX allows a loop or switch in the code, or I may need to create an array, or create an external file for AJAX to select from. If you have any suggestions or ideas as to how to make this work, please let me know. Thank you very much. Have a nice weekend. Anne

In dropdown.html

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<body>

<form name="redirect">
<select name="selection">
  <option id="one" value="pageone.php">1</option>
  <option id="two" value="pagetwo.php">2</option>
  <option id="three" value="pagethree.php">3</option>
  <option id="four" value="pagefour.php">4</option>
 <option id="five" value="pagefive.php">5</option>
 <option id="six" value="pagesix.php">6</option>
</select>

<input type="button" value="Click Here!" id="btn" >
<div id="content"></div>
</form>
<script type='text/javascript' src='js/ajax.js'></script>
</body>
</html>

In js/ajax.js (this works)

$('#btn').click(function() {
    $.ajax({
        url: 'redirpage.html',
        success: function(data) {
            $('#content').html(data);
        }
    });
});

In js/ajax.js (this doesn't work, neither do focus(), select() or other event handlers)

$('#one').bind(function() {
    $.ajax({
        url: 'pageone.php',
        success: function(data) {
            $('#content').html(data);
        }
    });
});

what do you mean by redirect?

code-jaff
– code-jaff

2012-08-18 12:36:29 +00:00
Commented Aug 18, 2012 at 12:36 — code-jaff
– code-jaff, Commented Aug 18, 2012 at 12:36

m7o · Accepted Answer · 2012-08-18 12:31:40Z

1

If I understand it correctly, you want to make an ajax call to the pages that are the values of the select? And they return data that should be displayed in #content?

What kind of data is returned - simple html?

In this case I'd try this:

$('select[name=selection]').change(function(){
  var url = $(this).val();
  $.post(url, function(data) {
    $('#content').html(data);
  });
});

You don't need the IDs for the options.

answered Aug 18, 2012 at 12:31

m7o

9215 silver badges8 bronze badges

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

1 Comment

Anne Over a year ago

Hi, thank you very much, you are very quick and your code works. :)

Collectives™ on Stack Overflow

Dropdown menu Redirection using AJAX and JQuery or Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related