I need a help with changing HTML and Javascript to Codeigniter

I have HTML and Javascript code which i want to use it on codeigniter.

HERE IS HTML

<tr>
<td>
<div class="editor-label">
<label for="Customer_IDType">ID Type:</label>
</div>
</td>
<td>
<div class="editor-field">
<select class="editor-dropdown" id="ddlIdType" name="Customer.IDType"><option value="SouthAfricanId">South African ID</option>
<option value="Passport">Passport</option>
</select>
<input id="Customer_DisplayPassport" name="Customer.DisplayPassport" type="hidden" value="True">

<img id="tooltipID" align="absmiddle" src="./About You_files/info-icon.jpg">
</div>
</td>
</tr>
<tr>
td>
<div class="editor-label">
<label id="lbIDValue">South African ID:</label>
</div>
<td>
<div class="editor-field">
<input class="textbox" id="txIdValue" maxlength="13" name="Customer.IDValue" type="text" value="">
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<label for="Customer_DOB">Date of birth:</label>
</div>
</td>
<td>
<div class="editor-field">
<div class="editor-field">
<input class="UseDatePicker date-text-box hasDatepicker" id="Customer_DOB" name="Customer.DOB" readonly="readonly" type="text" value=""><img class="ui-datepicker-trigger" src="./About You_files/calendar.gif" alt="..." title="...">
</div>

<script type="text/javascript">
$(document).ready(function() {

$("#Customer_DOB").datepicker({
showOn: 'button',
buttonImage: "../Content/Images/calendar.gif",
//buttonImage: encodeURI("../../../../Content/Images/calendar.gif"),
//buttonImage: "../../../../Content/Images/calendar.gif",
dateFormat: 'dd MM yy',
buttonImageOnly: true,
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true,
yearRange: 'c-95:c+95',
minDate: new Date(1900, 1 - 1, 1)
});

//Sets the max date to 16 years prior to system date
$("#Customer_DOB").datepicker("option", "maxDate", '-16y');
});
</script>

</div>
</td>
</tr>

HERE IS JAVASCRIPT

$("#tooltipID").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
$("#tooltipCellphone").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7,

});
$("#ddlIdType").change(function() {
ChangeLabelDisplay(true);
});

function verifyAddress(control) {
var pattern = new RegExp('[PO.]*\\s?B(ox)?.*\\d+', 'i');
if (control.val().match(pattern)) {
alert("Invalid residential address");
$(control).val("");
$(control).focus;
}
};
$("#txIdValue").blur(function() {
var idCombo = $("#ddlIdType").val();
var idValue = $("#txIdValue").val();
if (idValue == "") {
}
else {
var strYear = "";
var strMonth = "";
var strDay = "";
var dateFull = "";
var sValue = "";
if (idCombo == "SouthAfricanId") {
if (!isNaN(idValue)) {
strYear = "19" + idValue.substring(0, 2);
strMonth = idValue.substring(2, 4);
strDay = idValue.substring(4, 6);
dateFull = strYear + "/" + strMonth + "/" + strDay;
var d = new Date(dateFull);
if (d != "Invalid Date")
$("#Customer_DOB").datepicker("setDate", d);
else {
$("#Customer_DOB").datepicker("setDate", "");
alert("Invalid South African ID number");
}
}
else {
$("#Customer_DOB").datepicker("setDate", "");
}
}
}
});

$(function() {
$("#tabs").tabs({
event: "mouseover"
});
});

function ChangeLabelDisplay(resetValues) {
var option = $("#ddlIdType").val();
var result = "South African ID:";

if (resetValues) {
$("#txIdValue").val("");
$("#Customer_DOB").val("");
}
if (option == 'Passport')
result = "Passport Number:";

$("#lbIDValue").text(result);
}

What do you mean by " I want to change to codeigniter"? Are you asking about using the html functions provided by codeigniter framework like form_input() and or form_select()?

Trible post

http://forum.codeigniter.com/thread-136.html
http://forum.codeigniter.com/thread-137.html

I have HTML and Javascript code which i want to use it on codeigniter.

HERE IS HTML

<tr>
<td>
<div class="editor-label">
<label for="Customer_IDType">ID Type:</label>
</div>
</td>
   <td>
       <div class="editor-field">
           <select class="editor-dropdown" id="ddlIdType" name="Customer.IDType"><option value="SouthAfricanId">South African ID</option>
<option value="Passport">Passport</option>
</select>
           <input id="Customer_DisplayPassport" name="Customer.DisplayPassport" type="hidden" value="True">
                                               
<img id="tooltipID" align="absmiddle" src="./About You_files/info-icon.jpg">
</div>
   </td>
</tr>
<tr>
td>
<div class="editor-label">
<label id="lbIDValue">South African ID:</label>
</div>
   <td>
       <div class="editor-field">
           <input class="textbox" id="txIdValue" maxlength="13" name="Customer.IDValue" type="text" value="">
       </div>
   </td>
</tr>
<tr>
<td>
<div class="editor-label">
           <label for="Customer_DOB">Date of birth:</label>
       </div>
   </td>
   <td>
       <div class="editor-field">
<div class="editor-field">
<input class="UseDatePicker date-text-box hasDatepicker" id="Customer_DOB" name="Customer.DOB" readonly="readonly" type="text" value=""><img class="ui-datepicker-trigger" src="./About You_files/calendar.gif" alt="..." title="...">
</div>      

<script type="text/javascript">
   $(document).ready(function() {

       $("#Customer_DOB").datepicker({
       showOn: 'button',
       buttonImage: "../Content/Images/calendar.gif",
       //buttonImage: encodeURI("../../../../Content/Images/calendar.gif"),
           //buttonImage: "../../../../Content/Images/calendar.gif",
           dateFormat: 'dd MM yy',
           buttonImageOnly: true,
           showWeek: true,
           firstDay: 1,
           changeMonth: true,
           changeYear: true,
           yearRange: 'c-95:c+95',
           minDate: new Date(1900, 1 - 1, 1)
       });

       //Sets the max date to 16 years prior to system date
       $("#Customer_DOB").datepicker("option", "maxDate", '-16y');
   });
</script>

       </div>
   </td>
</tr>

HERE IS JAVASCRIPT

$("#tooltipID").tooltip({
               // place tooltip on the right edge
               position: "center right",
               // a little tweaking of the position
               offset: [-2, 10],
               // use the built-in fadeIn/fadeOut effect
               effect: "fade",
               // custom opacity setting
               opacity: 0.7
           });
           $("#tooltipCellphone").tooltip({
               // place tooltip on the right edge
               position: "center right",
               // a little tweaking of the position
               offset: [-2, 10],
               // use the built-in fadeIn/fadeOut effect
               effect: "fade",
               // custom opacity setting
               opacity: 0.7,
               
           });
$("#ddlIdType").change(function() {
               ChangeLabelDisplay(true);
           });

           function verifyAddress(control) {
           var pattern = new RegExp('[PO.]*\\s?B(ox)?.*\\d+', 'i');
           if (control.val().match(pattern)) {
                   alert("Invalid residential address");
                   $(control).val("");
                   $(control).focus;
               }
           };
$("#txIdValue").blur(function() {
               var idCombo = $("#ddlIdType").val();
               var idValue = $("#txIdValue").val();
               if (idValue == "") {
               }
               else {
                   var strYear = "";
                   var strMonth = "";
                   var strDay = "";
                   var dateFull = "";
                   var sValue = "";
                   if (idCombo == "SouthAfricanId") {
                       if (!isNaN(idValue)) {
                           strYear = "19" + idValue.substring(0, 2);
                           strMonth = idValue.substring(2, 4);
                           strDay = idValue.substring(4, 6);
                           dateFull = strYear + "/" + strMonth + "/" + strDay;
                           var d = new Date(dateFull);
                           if (d != "Invalid Date")
                               $("#Customer_DOB").datepicker("setDate", d);
                           else {
                               $("#Customer_DOB").datepicker("setDate", "");
                               alert("Invalid South African ID number");
                           }
                       }
                       else {
                           $("#Customer_DOB").datepicker("setDate", "");
                       }
                   }
               }
           });

$(function() {
           $("#tabs").tabs({
               event: "mouseover"
           });
       });

       function ChangeLabelDisplay(resetValues) {
           var option = $("#ddlIdType").val();
           var result = "South African ID:";

           if (resetValues) {
               $("#txIdValue").val("");
               $("#Customer_DOB").val("");
           }
           if (option == 'Passport')
               result = "Passport Number:";

           $("#lbIDValue").text(result);
       }

It is straigth forward that you need to build a view file and use it with a controller, this is a suggested code snippet

class Foo extends CI_Controller{
     function index(){
     $this->load->view('yourviewfile', array('message'=>'CI IS FUN')); //you can pass optional array data to view too, ie at the view
                                                                                                        // echo $message then you should see it
}
}

lets assume you name your file as yourviewfile.php,  you need to place this file under  application/views/yourviewfile.php

Once you are done then point your url to http://yourcisite/Foo or http://yourcisite/index.php/Foo
depends on how you write your .htaccess file

Good luck

PS: I would put any css, js , images under a directory says 'assets/css' , 'assets/js', etc  then you can refer them in the view file like

<script scr="<?=base_url()?>assets/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<?=  base_url()?>assets/css/jqgrid/themes/redmond/jquery-ui-custom.css" />
..etc