如何添加单选按钮和测试日程与日期和时间？

Question

I had created the form with some details but I added the radio button and it is not working for getting the values to print on my mail and I have tried to add the date and time using dropdown list but it is not working fine.

the radio buttons should be required.It has to show as in below image as alert for radio button and Test schedule but it is not getting as in the image

Please any one help me.It is very important for me.

My form

  <form action="http://www.labwise.in/devel/zensearch/order" id="bookingtest" method="post">
<div class="fieldset">
    <ul class="form-list">
        <li class="fields">
        <div class="field">
            <label for="testname" class="required"><em>*</em><?php echo $this->__('Test Name') ?> </label>
                <div class="input-box">
                    <input type="text" id="testname" name="testname" value="<?php echo $_GET['name']?>" class="input-text required-entry" title="<?php echo $this->__('Test Name') ?>" />
                </div>
            </div>  

            <div class="field"> 

            <label for="city" class="required"><em>*</em><?php echo $this->__('City') ?> </label>
                <div class="input-box">
                        <input type="text" id="city" name="city" value="<?php echo $_GET['city']?>" class="input-text required-entry" title="<?php echo $this->__('City') ?>" />
                </div>
        </div>
        </li>
        <li>

            <label for="location" class="required"><em>*</em><?php echo $this->__('Location') ?> </label>
                <div class="input-box">
                        <input type="text" id="location" name="location" value="<?php echo $_GET['location']?>" class="input-text required-entry" title="<?php echo $this->__('Location') ?>" />
                </div>

        </li>
        <li class="fields">
        <div class="field">
            <label for="cname" class="required"><em>*</em><?php echo $this->__('Name') ?> </label>
                <div class="input-box">
                        <input type="text" id="cname" name="cname" value="" class="input-text required-entry" title="<?php echo $this->__('Name') ?>" />
                </div>
            </div>
        <div class="field">
         <label for="email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
                <div class="input-box">
                    <input type="text" name="email" value="<?php echo $this->escapeHtml($this->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $this->__('Email Address') ?>" />
                </div>
        </div>
        </li>
        <li>

            <label for="mobile" class="required"><em>*</em><?php echo $this->__('Mobile Number') ?> </label>
                        <div class="input-box">
                            <input type="text" id="mobile" name="mobile" value="" class="input-text required-entry validate-mobileno" title="<?php echo $this->__('Mobile Number') ?>" />
                        </div>
         </li>
          <li>
          <label class="required"><em>*</em><?php echo $this->__('Sample Collection') ?> </label></li>
          <li>
                <div class="radio_button">
                <input type="radio" name="radio" class="input-text required-entry validate-select" value="I will visit Lab"> I will visit Lab
                </div>
                <div>
                <input type="radio" name="radio" class="input-text required-entry validate-select" value="Visit me at home/office +Rs50.00" > Visit me at home/office +Rs50.00
                </div>
         </li>
         <li>
                <label for="requiredby" class="required"><em>*</em><?php echo $this->__('Test Schedule') ?> </label>
                    <div class="input-box">
                        <input type="text" id="requiredby" name="requiredby" value="" class="input-text required-entry" title="<?php echo $this->__('Test Schedule') ?>" style="width: 150px;" />
                        <img style="" title="Select Date" id="date_select_trig" alt="" src="<?php echo $this->getSkinUrl("images/calendar.gif");?> "/>
                        <select name="date_time" id="date_time" class="input-text required-entry validate-select" style="width: 50px;" />
                                    <option value=""><?php echo $this->__('--')?></option>
                                    <option value="1"><?php echo $this->__('1')?></option>
                                    <option value="2"><?php echo $this->__('2')?></option>
                                    <option value="3"><?php echo $this->__('3')?></option>
                                    <option value="4"><?php echo $this->__('4')?></option>
                                    <option value="5"><?php echo $this->__('5')?></option>
                                    <option value="6"><?php echo $this->__('6')?></option>
                                    <option value="7"><?php echo $this->__('7')?></option>
                                    <option value="8"><?php echo $this->__('8')?></option>
                                    <option value="9"><?php echo $this->__('9')?></option>
                                    <option value="10"><?php echo $this->__('10')?></option>
                                    <option value="11"><?php echo $this->__('11')?></option>
                                    <option value="12"><?php echo $this->__('12')?></option>
                            </select>
                            <b>:</b>


                    </div>
        </li>

    </ul>
    </div>
    <div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
    <button id= "submit"  type="submit" class="button" title="<?php echo $this->__('Book Test') ?>" name="send" id="send2"><span><span><?php echo $this->__('Book Test') ?></span></span></button>
</div>


 </form>

  <script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar.js" ?>" type="text/javascript"></script>

   <script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar-setup.js" ?>" type="text/javascript"></script>

   <link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl('js') ?>calendar/calendar-win2k-1.css"  />
<?php echo $this->getLayout()->createBlock('core/html_calendar')->setTemplate('page/js/calendar.phtml')->toHtml();?>

  <script type="text/javascript">

    if(Validation) {
     Validation.addAllThese([
['validate-mobileno','Enter correct mobile number (Eg:9986858483)',
   function(v){
    //var timePat ="^((\+){0,1}91(\s){0,1}(\-){0,1}(\s){0,1}){0,1}9[0-9](\s){0,1}(\-){0,1}(\s){0,1}[1-9]{1}[0-9]{7}$";

var timePat ="^{0,1}9[0-9](\s){0,1}(\-){0,1}(\s){0,1}[1-9]{1}[0-9]{7}$";
// var matchArray = v.match(timePat);
if(v.length > 0){
if(v.length !=10){
    return false;
   }else if(v[0]!=9 && v[0]!=8 && v[0]!=7){

    return false;
   }


return true;

}else {
return false;
}

}
   ]])
  };
   var dataForm = new VarienForm('bookingtest', true); 
 </script>
 <script type="text/javascript">
   // <![CDATA[
 Calendar.setup({
 inputField : 'testschedule',
   ifFormat : '%d-%b-%Y',
showsTime: false,
 button : 'date_select_trig',
 singleClick : true,
 });
   // ]]>
</script>

Answer 1

This is one way of getting rid of that deep level of nesting.

    var visit = document.getElementById('visit-required');
    var form = document.forms.bookingtest;
    form.addEventListener('submit', function(e){
       if(!form.lab.checked && form.office.checked){
         e.preventDefault(); 
         visit.style.display = 'block';
         
       }
    });

.marked-required{
    color: #FF0000;
}
.message-required{
    display: none;
    color: #FF0000;
}
#options{
    border: 2px solid #FF0000;
}
#datetime > input{
    display: inline-block;
    vertical-align: top;
}

Place this php in the file you want to post to.
/* example.php */
<?php
  print_r($_POST);
?>

<form action="example.php" id="bookingtest" method="post">
<strong>Sample collection <span class='marked-required'>*</span></strong>
<div id='options'>
    <input type='radio' name='visit' id='lab'/>I will visit Lab<br/>
    <input type='radio' name='visit' id='office'/>Visit me at home/office + Rs50.00
 </div>
<small class='message-required' id='visit-required'>Please select one of the option.</small>
<br/>
<strong>Test schedule<span class='marked-required'>*</span></strong>
<div id='datetime'>
    <input type='text' />
    <select>
        <option>From</option>
    </select>
     <select>
        <option>To</option>
    </select>
     <select>
        <option>AM</option>
        <option>PM</option>
    </select>
  
    <small class='message-required'>This is a required option</small>
</div>
<input type='submit' id='submit' value='Submit'/>
</form>

</div>