How do I use JavaScript to combine the values of three drop down boxes?

Asked by shivian (10

) October 16th, 2007

I want to have a javascript that combines three dropdown boxes (one for date, one for month, and one for year) into a single URL… and I know nothing of javascript. Help? I know this is pretty easy but I’m all thumbs…

Observing members: 0

Composing members: 0

2 Answers

I’m not sure I completely understand what you’re trying to do, but this ought to get you started:

function appendDateTo(url) {
  url += document.getElementById('month').value;
  url += document.getElementById('day').value;
  url += document.getElementById('year').value;
  return url;
}

This snippet assumes that your date fields are given 'month', 'day', and 'year' ids. If you want to redirect to the returned URL, you would write something like this:

function redirectTo(url, options) {
  if(options.append_date) {
    window.location = appendDateTo(url);
  } else {
    window.location = url;
  }
  return true;
}

Your HTML would need to contain a link like this:

<a href="javascript:redirectTo('http://www.shivian.com/controller/action?date=', {append_date : true});">Redirect</a>

Is your test code up on the web somewhere? The question would be a lot easier to answer if I could see exactly what you were trying to do.

sferik (6121

)“Great Answer” (0

) Flag as…

Here’s an example of what I think you’re trying to do (you should be able to copy, paste, and save this as an HTML file):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Example for shivian
    </title>
    <script type="text/javascript">
function appendDateTo(url) {
  url += document.getElementById('month').value;
  url += document.getElementById('day').value;
  url += document.getElementById('year').value;
  return url;
}
function redirectTo(url, options) {
  if(options.append_date) {
    window.location = appendDateTo(url);
  } else {
    window.location = url;
  }
  return true;
}
    </script>
    <style type="text/css">
body {
  font-family: Helvetica;
}
a {
  text-decoration: none;
  padding: 0.4em 0.4em 0.3em 0.4em;
  margin-left: 0.4em;
  color: #333;
  background-color: #9cf;
  border-left: 1px solid #9af;
  border-top: 1px solid #9af;
  border-right: 1px solid #0af;
  border-bottom: 1px solid #0af;
}
a:hover {
  background-color: #9f9;
  border-left: 1px solid #9c9;
  border-top: 1px solid #9c9;
  border-right: 1px solid #0c0;
  border-bottom: 1px solid #0c0;
}
    </style>
  </head>
  <body>
    <h1>
      Example for shivian
    </h1>
    <fieldset>
      <legend>Select Date</legend>
      <label for="month">Month</label>
      <select id="month" name="month">
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <label for="day">Day</label>
      <select id="day" name="day">
        <option value="01">1st</option>
        <option value="02">2nd</option>
        <option value="03">3rd</option>
        <option value="04">4th</option>
        <option value="05">5th</option>
        <option value="06">6th</option>
        <option value="07">7th</option>
        <option value="08">8th</option>
        <option value="09">9th</option>
        <option value="10">10th</option>
        <option value="11">11th</option>
        <option value="12">12th</option>
        <option value="13">13th</option>
        <option value="14">14th</option>
        <option value="15">15th</option>
        <option value="16">16th</option>
        <option value="17">17th</option>
        <option value="18">18th</option>
        <option value="19">19th</option>
        <option value="20">20th</option>
        <option value="21">21st</option>
        <option value="22">22nd</option>
        <option value="23">23rd</option>
        <option value="24">24th</option>
        <option value="25">25th</option>
        <option value="26">26th</option>
        <option value="27">27th</option>
        <option value="28">28th</option>
        <option value="29">29th</option>
        <option value="30">30th</option>
        <option value="31">31st</option>
      </select>
      <label for="year">Year</label>
      <select id="year" name="year">
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
      </select>
      <a href="javascript:alert(appendDateTo(''));">Show Date</a>
      <a href="javascript:alert(appendDateTo('http://www.shivian.com/controller/action?date='));">Show URL</a>
      <a href="javascript:redirectTo('http://www.shivian.com/controller/action?date=', {append_date : true});">Redirect</a>
    </fieldset>
  </body>
</html>

sferik (6121

)“Great Answer” (1

) Flag as…