0

I have some HTML code that has a few drop down menus and some check boxes and I was wondering how I would go about writing Javascript that would link to a page that specifies their selection. the code is: 

<div class="dropdown">
  <font color="black">
  <div>
    <select name="Days">
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
  <option value="Friday & Saturday">Friday & Saturday</option>
  <option value="Saturday & Sunday">Saturday & Sunday</option>
    <option value="Friday, Saturday, & Sunday">Friday, Saturday, & Sunday</option>

</select>
</form>
  </div>

</div>

<p></p>
<div2>Number of Tickets:</div2>

<div class="dropdown">
  <select name="ticketNumber">
  <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>
</select>
</form>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h4>Total:  </h4>
<form action="http://paypal.com">
    <input type="submit" value="Submit" />
</form>
</div>

<div class="main">
  <h3>Choose Passes</h3>
  <form action="">
  <input type="checkbox" name="gender" value="male"> VIP<br>
  <input type="checkbox" name="gender" value="female"> Meet & Greet<br>
  <input type="checkbox" name="gender" value="other"> Shuttle
</form>
</div>

For example: if a user were to select the saturday option, for 2 tickets, with VIP, i'm not sure how i would do either if statements or case statements to link to another page. Hopefully I've been clear enough, Thanks!

karina3
  • 1

1 Answers1

1

This depends on the meaning of 'link to' – whether you're trying to "auto-navigate" the user as soon as they've selected the options, or change where the form submits to once it's submitted, that is.

Either way, the beginning concept is the same: you'll need to listen to change events on the inputs, extract the input's value, followed by some kind of logic that maps input values to desired URLs and does with the URL whatever your desired outcome is.

For instance, if each ticketNumber maps to some kind of "ticket ID" in, say, a URL query string, you could dynamically change where the form will submit to by changing its action property like so:

function getUrl(id) {
    return 'https://super-tickets.com/order?id=' + id;
}

var form = document.querySelector('form');

document.querySelector('select[name=ticketNumber]').onchange = function changeEventHandler(event) {
    form.action = getUrl(event.target.value);
}
wosevision
  • 123
  • 11