Hi All,

I have a following visualforce page..

<apex:page showHeader="false"  ><br/>
<center><apex:image id="TheImage" value="{!$Resource.BenefitFocus}" /></center><br/>
 <div>
 <style>
 h1 {
     font-size: 20px;
     margin-left: 10px;
     font-family:"Times New Roman";
     text-align:justify;
    }
 b 
   {
     font-size: 10pt;
     margin-left:80px;
     font-family:"Times New Roman";
     text-align:justify;
   }
 
   .button 
     {
       border-top: 1px solid #96d1f8;
       background: #65a9d7;
       background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
       background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
       background: -moz-linear-gradient(top, #3e779d, #65a9d7);
       background: -ms-linear-gradient(top, #3e779d, #65a9d7);
       background: -o-linear-gradient(top, #3e779d, #65a9d7);
       padding: 7.5px 15px;
       -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
       border-radius: 6px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: white;
       font-size: 20px;
       font-family: Helvetica, Arial, Sans-Serif;
       text-decoration: none;
       vertical-align: middle;
     }
  .button:hover
   {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active
   {
   border-top-color: #1b435e;
   background: #1b435e;
   }
 </style>
 </div>
     <script type="text/javascript">
    function checkBox(c)
    {

        if(c.checked)
        {
            c.classList.add("marked");
        }
        else
        {
            c.classList.remove("marked");
        }

        if(document.getElementsByClassName("marked").length>1)
        {
            alert("Please select only one option");
            c.checked=false;
            c.classList.remove("marked");
        }

    }
    </script> 
 <apex:define name="body">  
 <center>
 <apex:panelGrid bgcolor="#28597a" columns="1"> <br/><br/>
 <apex:panelGrid width="858" cellpadding="0" cellspacing="0" bgcolor="#28597a" columns="1" styleClass="topPanelContainer"> <br/>
 <apex:outputPanel layout="block" styleClass="topPanel">
 <apex:panelGrid width="858" cellpadding="0" cellspacing="0" bgcolor="white" columns="2">
 <apex:panelGroup ><br/>
 <center> <h1>Payroll Deduction File  Feedback</h1></center><br/><br/>
 <center><h1> {!Account.Name}</h1></center><br/><br/>
 <h1> 1. Please rate the overall quality of the file - </h1><br/><br/>
 <apex:form >
 <b><apex:inputCheckbox id="Great" onclick="checkBox(this)" /> </b> <h1>Great - Loaded with no errors or exceptions</h1><br/><br/>
 <b><apex:inputCheckbox id="Good" onclick="checkBox(this)"/> </b><h1>Good - Loaded with minimal exceptions </h1><br/><br/>
 <b><apex:inputCheckbox id="Okay" onclick="checkBox(this)"/></b> <h1>Okay - Loaded with minor exceptions and errors</h1><br/><br/>
 <b><apex:inputCheckbox id="Poor" onclick="checkBox(this)"/></b> <h1>Poor - Loaded with a large number of errors</h1><br/><br/>
 <b><apex:inputCheckbox id="Bad" onclick="checkBox(this)"/> </b><h1>Bad  - Would not load </h1><br/><br/>
 <h1> 2. Please provide additional information if any -</h1><br/><br/>
 <h1><b><apex:inputTextArea style="width: 380px; height: 100px;" /></b></h1><br/><br/>
 <center><button class="button">Submit Feedback</button></center><br/><br/>
 </apex:form>
 </apex:panelGroup>
 </apex:panelGrid> 
 </apex:outputPanel>
 <br/>
 </apex:panelGrid> 
 </apex:panelGrid>
 </center>
 <br/>
</apex:define>
</apex:page>




When i'll click on submit feedback button the feedback should be saved into a case..

can anyone help me with it??
Either by using java script or by apex controller..

Thanks in advance..!!

Regards,
Mounika