So I have been at this and have tried so many different things, I am hoping that I could get some help. I have the following form that I want to use. I understand all the backend access components etc, but I can’t seem to get the form to behave including timepicker, datepicker, autcomplete, and replicate. can someone find the bug(s) in my code? I have been banging my head against the wall for a while now. The replicate function also seems to have broken. Any Ideas?
Thanks!
Jon
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(document).ready(function($) {
var drugs = [
"Atenolol (Tenormin)",
"Atropine",
"Atropine Ophthalmic Solution",
"Azathioprine (Imuran)",
"Azithromycin (Zithromax)",
"Benazepril (Fortekor)",
"Betaxolol and Levobetaxolol",
"Bethanechol (Urecholine, etc.)",
"Bisacodyl (Dulcolax)",
"Bismuth Subsalicylate (Pepto-Bismol)",
"Brinzolamide (Azopt)",
"Bromides",
"Buprenorphine (Buprenex)",
"Burow's Solution",
"Buspirone HCl (BuSpar)",
"Butorphanol Tartrate (Torbugesic, Torbutrol)",
"Calcitonin"];
$(".autocomp").autocomplete({source:drugs});
$( ".datepicker_txt" ).datepicker();
$(".timePick_txt").timepicker({'step' : 15,
'scrollDefaultNow': true });
$("#btnAdd").click(function(){
var $table = $(document.getElementById('drug_treatment_table'));
var $tr = $(document.getElementById('drug_treatment_table')).find('tr:last').clone(true);
$tr.find('input').attr('id',function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1]+ ++parts[2];
}).attr('name',function(){
var parts = this.name.match(/(\D+)(\d+)$/);
return parts[1]+ ++parts[2];
});
$tr.find('select').attr('id',function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1]+ ++parts[2];
}).attr('name',function(){
var parts = this.name.match(/(\D+)(\d+)$/);
return parts[1]+ ++parts[2];
});
$tr.find(".datepicker_txt").datepicker();
$tr.find(".autocomp").autocomplete({source:drugs});
$tr.find(".timePick_txt").timepicker();
$table.find("tr:last").after($tr);
$(document.getElementById("numEntries")).attr('value',$table.rows.length-1);
});
$("#btnDel").click(function($){
var $table = $(document.getElementById('drug_treatment_table'));
var rowsNum = table.rows.length;
if(rowsNum>2){
$table.remove($table.find('tr:last'));
}
});
});
</script>
<link href="style/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="button" name="btnAdd" id="btnAdd" value="Increase Drug Treatments"/>
<input type="button" name="btnDel" id="btnDel" value="Decrease Drug Treatments"/>
</form>
<form id="add_drugs" name="add_drugs" method="post" action="">
<input type="hidden" name="numEntries" id="numEntries" value="1" />
<table width="100%" border="1" name="drug_treatment_table" id="drug_treatment_table">
<tr>
<th width="3%" scope="col">#</th>
<th width="14%" scope="col">Drug</th>
<th width="32%" scope="col">Special Directions </th>
<th width="18%" scope="col">Quantity</th>
<th width="12%" scope="col">How Often</th>
<th width="8%" scope="col">Starting</th>
<th width="13%" scope="col">Finishing</th>
</tr>
<tr>
<td>1</td>
<td>
<input type="text" name="drug_name_1" id="drug_name_1" class="autocomp"/></td>
<td>
<input name="special_driections_1" type="text" id="special_driections_1" size="60" /></td>
<td nowrap="nowrap">
<input type="text" name="quant_1" id="quant_1" />
<select name="quant_unit_1" id="quant_unit_1">
<option>cc</option>
<option>mg</option>
<option>g</option>
</select></td>
<td nowrap="true"><select name="how_often_drug_1" id="how_often_drug">
<option>Q1hr</option>
<option>Q2hr</option>
<option>Q3hr</option>
<option>QID</option>
<option>TID</option>
<option>BID</option>
<option selected="selected">SID</option>
<option>Q2 Day</option>
<option>Q3 Day</option>
<option>Q4 Day</option>
<option>Q5 Day</option>
<option>Q6 Day</option>
<option>Q1 Week</option>
<option>Q2 Week</option>
</select><input type="text" id="start_time_1" class="timePick_txt" /></td>
<td><input type="text" id="datepicker_start_drug_1" name="datepicker_start_drug_1" class="datepicker_txt"></td>
<td><input type="text" id="datepicker_end_drug_1" name="datepicker_end_drug_1" class="datepicker_txt"></td>
</tr>
</table>
</form>
</body>
</html>
After playing with the code for a while, I think I was able to produce your desired outcome. Just a couple comments on your code.
First, you could benefit from a refresher on how selectors work in jQuery. You are using javascript to grab elements and casting them as jQuery objects when you could simply use their selectors.
Second, please make sure to proofread your code. There are numerous typos and misspellings that will cause problems in the future. I tried to fix as many as I could find.
Here is a link to the fiddle: http://jsfiddle.net/jlange88/5594c/19/
Some caveats:
I simply created a long string to represent a new table row, you should devise some way to programmatically do this. Also, there is most certainly a better way to apply generic id’s to your new tables, I just don’t feel like implementing it now :).