I am currently working on a form that posts to a PHP script by selecting a date range. For a better understanding, you can check out my visual representation here. Before the data is posted, I would like to display the selected dates in empty boxes or input fields based on the radio button chosen. Can anyone help me with this issue?
Thank you in advance!
Here is an example of what I am trying to achieve:
When I select one month ago:
( ) ( ) (X) ( )
1 day 1 week 1 month 3 months
-----------------
|2014 - 11 - 01 | Date From: (the selected date)
-----------------
-----------------
|2014 - 12 - 01 | Date To: (current date)
---------
| Get AHT | (button)
---------
Below is the structure of my form:
<div id="menu_option">
<h1>Menu Option</h1>
<div id="button_position">
<div id="date_selector">
<label>Select Date Range</label>
<form action="show_aht2.php" method="post" id="formtopost">
<input type="radio" name="date_selected" value="1d" checked="checked"/>1d
<input type="radio" name="date_selected" value="1w" />1w
<input type="radio" name="date_selected" value="1m" />1m
<input type="radio" name="date_selected" value="3m" />3m
<input type="button" id="aht_btn" name="get_aht" value="Get AHT" />
</form>
</div><!--date selector-->
<div class="clear"></div>
<button id="refresh_page">Refresh Page</button>
</div>
CSS: I need assistance in displaying the date boxes before the AHT button and also making all buttons the same size.
/*container for all divs inside*/
#container {
width:1450px;
}
/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
float:left;
}
/*menu bar option*/
#menu_option{
width:230px;
height:600px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
float:right;
overflow:hidden;
text-align:center;
}
input[type="radio"] {
margin-left:10px;
}
#date_selector{
border:3px;
border-color:black;
}
#button_position{
/*width: 100px;
height: 80px
position: absolute;*/
}
#button_position button{
font-weigth:bold;
font-size:1.3em;
}
button:hover{
cursor: pointer;
}
button {
margin:5px auto;
font:16px tahoma; /*every size you want.*/
}
/*clear */
.clear {
clear:both;
}