SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    combine 2 drop down into 1 variable

    Hello I need to combine the values of 2 drop down boxes into one hidden text variable. The form should look like this:

    <td width="36%" bgcolor="F7F7F7">
    <div align="left" class="text">Fecha de Vencimiento MM/AA</div>
    </td>
    <td width="64%">
    <div align="left">
    month:
    <select name="ExpDate_m">
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select>
    year:

    <select name="ExpDate_y">
    <option value="08">2008</option>
    <option value="09">2009</option>
    <option value="10">2010</option>
    <option value="11">2011</option>
    <option value="12">2012</option>
    <option value="13">2013</option>
    </select>
    <input type="hidden" name="Expires" id="Expires" class="text">
    </div>
    </td>

    --------------------------------------------------------

    IMPORTANT: the drop down boxes must form a date with a / between month and year. So if it is feb 2009 the hidden text field value should look like this: 02/09

    I appreciate your help!

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a bit messy, but it works fine.

    JavaScript:
    Code:
    var month;
    var year;
    			
    function setExpireMonth() {
    	month = document.expiration.expM.options[document.expiration.expM.selectedIndex].value;
    	document.expiration.expires.value = month + "/" + year;
    			}
    function setExpireYear() {
    	year = document.expiration.expY.options[document.expiration.expY.selectedIndex].value;
    	document.expiration.expires.value = month + "/" + year;
    }
    function showHiddenValue() {
    	alert(document.expiration.expires.value);
    }
    And the HTML:

    HTML Code:
    <form name="expiration">
                    <select name="expM" onchange="setExpireMonth();">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                    <select name="expY" onchange="setExpireYear();">
                        <option value="08">2008</option>
                        <option value="09">2009</option>
                        <option value="10">2010</option>
                        <option value="11">2011</option>
                        <option value="12">2012</option>
                        <option value="13">2013</option>
                    </select>
                    <input type="hidden" name="expires" id="expires" class="text">
                    <input type="button" value="Hidden Value" onclick="showHiddenValue();" />
                </form>

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!

    It works perfectly! I appreciate your fast response! =)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •