Response title
This is preview!
- Screen name: darrylw99
darrylw99's Profile
37 Posts
6 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- I have potentially several DIV's witha table in it, each with an incremental id (see below) With a jquery function to add and remove rows.I need if they user click the first radio in each row to replace the next 3 radio's with a select box with the same incremental id.I also need a cancel button on each row to revert the content back to the original radio buttons.this really goes over my head. I have no idea where to start.Thanks, Darryl<div id="TextBoxesGroup" name="TextBoxesGroup">
<CENTER><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >
<TR><TD COLSPAN=10><FONT FACE="Tahoma" SIZE="2"><B>*Clinic Template:</B> All new and existing slot times and requirements must be entered here even if there is no change to the slot.</FONT></TD></TR>
<TR><TD COLSPAN=10> </TD></TR>
<TR>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Time<br />HH : MM</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">CAB</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">New</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Follow Up</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Any</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Reserved</FONT></I></TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Urgent</FONT></I></TD>
</TR></table><div id="TextBoxDiv1">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >
<TR class="ClinicTemplateRow">
<TD WIDTH="10%" HEIGHT="40" STYLE="border-style: solid; border-width: 1"><P ALIGN="center">
<SELECT SIZE="1" NAME="HH1">
<OPTION VALUE="07">07</OPTION>
<OPTION VALUE="08">08</OPTION>
<OPTION VALUE="09">09</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="12">12</OPTION>
<OPTION VALUE="13">13</OPTION>
<OPTION VALUE="14">14</OPTION>
<OPTION VALUE="15">15</OPTION>
<OPTION VALUE="16">16</OPTION>
<OPTION VALUE="17">17</OPTION>
<OPTION VALUE="18">18</OPTION>
<OPTION VALUE="19">19</OPTION>
<OPTION VALUE="20">20</OPTION>
<OPTION VALUE="21">21</OPTION>
</SELECT>
<B>:</B><SELECT SIZE="1" NAME="MM1">
<OPTION VALUE="00">00</OPTION>
<OPTION VALUE="05">05</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="15">15</OPTION>
<OPTION VALUE="20">20</OPTION>
<OPTION VALUE="25">25</OPTION>
<OPTION VALUE="30">30</OPTION>
<OPTION VALUE="35">35</OPTION>
<OPTION VALUE="40">40</OPTION>
<OPTION VALUE="45">45</OPTION>
<OPTION VALUE="50">50</OPTION>
<OPTION VALUE="55">55</OPTION>
</SELECT></TD>
<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">
<INPUT TYPE="radio" NAME="clintype1" VALUE="CaB" class="cab" id="1">
</TD>
<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">
<INPUT TYPE="radio" NAME="clintype1" VALUE="New">
</TD>
<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">
<INPUT TYPE="radio" NAME="clintype1" VALUE="Follow Up">
</TD>
<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">
<INPUT TYPE="radio" NAME="clintype1" VALUE="Any">
</TD>
<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-left-style: solid; border-left-width: 5; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<INPUT TYPE="radio" NAME="clinstatus1" VALUE="Reserved">
</TD><TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-style: solid; border-width: 1">
<INPUT TYPE="radio" NAME="clinstatus1" VALUE="Urgent">
</TD>
</tr>
</table>
</div>
</div><IMG SRC="images/plus.jpg" BORDER="0" onMouseOver="this.style.cursor='hand'" onClick="addButton;" value="Add New Row" id="addButton">
<IMG SRC="images/minus.jpg" BORDER="0" onMouseOver="this.style.cursor='hand'" onClick="removeButton;" value="Remove Row" id="removeButton">
$("#addButton").click(function () {
document.Mandate.count.value = counter;
if(counter>31){
alert("Only 31 rows allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);newTextBoxDiv.html('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >'+
'<TR class="ClinicTemplateRow">'+
'<TD WIDTH="10%" HEIGHT="40" STYLE="border-style: solid; border-width: 1"><P ALIGN="center">'+
'<SELECT SIZE="1" NAME="HH'+counter+'">'+
'<OPTION VALUE="07">07</OPTION><OPTION VALUE="08">08</OPTION><OPTION VALUE="09">09</OPTION><OPTION VALUE="10">10</OPTION><OPTION VALUE="11">11</OPTION>'+
'<OPTION VALUE="12">12</OPTION>'+
'<OPTION VALUE="13">13</OPTION>'+
'<OPTION VALUE="14">14</OPTION>'+
'<OPTION VALUE="15">15</OPTION>'+
'<OPTION VALUE="16">16</OPTION>'+
'<OPTION VALUE="17">17</OPTION>'+
'<OPTION VALUE="18">18</OPTION>'+
'<OPTION VALUE="19">19</OPTION>'+
'<OPTION VALUE="20">20</OPTION>'+
'<OPTION VALUE="21">21</OPTION>'+
'<OPTION VALUE="22">22</OPTION>'+
'</SELECT>'+
' <B>:</B><SELECT SIZE="1" NAME="MM'+counter+'">'+
'<OPTION VALUE="00">00</OPTION>'+
'<OPTION VALUE="05">05</OPTION>'+
'<OPTION VALUE="10">10</OPTION>'+
'<OPTION VALUE="15">15</OPTION>'+
'<OPTION VALUE="20">20</OPTION>'+
'<OPTION VALUE="25">25</OPTION>'+
'<OPTION VALUE="30">30</OPTION>'+
'<OPTION VALUE="35">35</OPTION>'+
'<OPTION VALUE="40">40</OPTION>'+
'<OPTION VALUE="45">45</OPTION>'+
'<OPTION VALUE="50">50</OPTION>'+
'<OPTION VALUE="55">55</OPTION>'+
'</SELECT></TD>'+'<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
'<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="CaB" class="cab"></TD>'+
'<div id="whatever'+counter+'"><TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
'<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="New"></TD>'+
'<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
'<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Follow Up"></TD>'+
'<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
'<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Any"></TD></div>'+'<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-left-style: solid; border-left-width: 5; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">'+
'<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Reserved"></TD>'+
'<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
'<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Urgent"></TD>'+
'</tr></table>');newTextBoxDiv.appendTo("#TextBoxesGroup");counter++;
});$("#removeButton").click(function () {
if(counter==1){
alert("No more rows to remove");
return false;
}counter--;
document.Mandate.count.value = counter-1;
$("#TextBoxDiv" + counter).remove();
});- 16-May-2013 08:55 AM
- Forum: Using jQuery UI
:I have the above. What I need, is if you click on the first radio, 2,3,4 are replaced with a select box with the same index id (a incremental number added to the text and radio boxes. everytime one is added it is called with a new index). And a reset button to put the original radio buttons back.There will be a few rows of these each with a different id,eg hours1,mins1,clintype1 (x4) & clinstatus1 (x2)hours2,mins2,clintype2 (x4) & clinstatus2 (x2)Thanks- I have a table with my rows in it and a row contains 3 td's with radio button's in them (im open for a redesign idea).When i validate i get 'big' red boxes around each radio button and the text goes below and 'This field is required' appearing after the first radio button. ( bec i havnt got any validation on the page for it)How do i create validation just for these and put some error msg somewhere appropriate?
<tr rowheight=40 valign=bottom class="normal">
<td class="normal"><input type="radio" name="rehabLevel" value="A" class="required"> Hub - Category A</td>
<td class="normal"><input type="radio" name="rehabLevel" value="B"> Spoke - Category B</td>
<td class="normal"><input type="radio" name="rehabLevel" value="I"> Spoke - Individual Case Consideration</td>
</tr>- I have a long form and I have setup some validation but I'd like some help tidyuing it up and enhancing my requirements. The following displays an error message but its messy. I'd like to know howa) Highlight the whole rowb) Put an asterix at the end of the appropriate item.c) Any other techniques you think good.Also can you explain to me why, when its validated the Address fields go out of alignment with the other text fields.If possible could you tell me how to (in realtime using ajax) check (for example) if the NHS No exists in one of my databases. If not display an error message and not allow the form to be submitted.I have trawled the internet for the answer but I cant find the right answer.One last thing: If I have a datepicker field, Ive noticed that you cant edit the field directly! Any opinions?ThanksDarryl---------------------------------------------------------------------------------------------------------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Cheshire and Merseyside Rehabilitation Network Referral Proforma</title>
<!--<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />//-->
<LINK rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script>
$(function() {
$( "#dateOfCondition" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-15:+0'
});
$( "#dateOfCondition" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#dateOfLastScreen" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-20:+0'
});
$( "#dateOfLastScreen" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-100:+0'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$("#Proforma").validate({
rules: {
completedBy: "required",
completedByEmail: {
required: true,
email:true
},
nhsNumber: "required",
dob: {
required: true,
date: true
}
},
messages: {
nhsNumber: "*",
surname: "*",
firstname: "*",
completedBy: "Please enter your firstname",
completedByEmail: "* valid email",
dob: "* valid date"
}
});
});
</script>
<style type="text/css">
#Proforma .error {
margin-left: 10px;
width: auto;
display: inline;
color:red;
}</style>
</head>
<body><form method="post" action="/development/cmrehab/referralform.asp" id="Proforma" name="Proforma">
<table width="90%">
<tr><td colspan=2 align=right>
<img src="images/nhs.jpg" border=0 style="margin-top:0px;padding-bottom:10px;">
<br>Cheshire and Mersyside<br>Rehabilitation Network</td>
</tr>
<tr><td colspan=2 align=center>
<div style="width:440px;">
<h1>Cheshire and Merseyside Rehabilitation Network Referral Proforma</h1>
</div>
</td>
</tr>
<tr><td colspan=3 class="highlight">Please indicate Level of rehabilitation need and service required</td></tr>
<tr>
<td colspan=2 align=left>
<table width="100%" style="border:1px solid black;padding-left:10px;padding-bottom:20px;" border=0>
<tr><td colspan=3> </td></tr><tr rowheight=40 valign=bottom class="normal">
<td class="normal"><input type="radio" name="rehabLevel" value="A" class="required"> Hub - Category A</td>
<td class="normal"><input type="radio" name="rehabLevel" value="B" class="required"> Spoke - Category B</td>
<td class="normal"><input type="radio" name="rehabLevel" value="I" class="required"> Spoke - Individual Case Consideration</td>
</tr>
<tr class="normal" align=left>
<td colspan=3>
<table width="100%" border=0>
<tr>
<td class="normal" width="40%">Name of person Completing form:</td>
<td colspan=2><input type="text" name="completedBy" id="completedBy" size="30" ></td>
</tr>
<tr>
<td class="normal">Email of person Completing form:</td>
<td colspan=2><input type="text" name="completedByEmail" id="completedByEmail" size="30" ></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Patient Demographics and Referral Details</td></tr>
<tr valign=top align=left>
<td>
<table width="100%" style="border:1px solid black;padding-left:10px; height:266px" border=0>
<tr>
<td class="heading">NHS No:</td><td><input type="text" name="nhsNumber" size=20 maxlength=10 class="required"></td>
</tr>
<tr><td colspan=2><hr width="100%"></td></tr>
<tr>
<td class="heading" colspan=2>Patient Details:</td>
</tr>
<tr><td class="normal">Surname:</td><td><input type="text" size="20" name="surname" id="surname" class="required"></td></tr>
<tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname" class="required"></td></tr>
<tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob" class="required"></td></tr>
<tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1" class="required"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address2" id="address2"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address3" id="address3"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address4" id="address4" class="required"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px;height:268px;" border=0>
<tr>
<td class="heading">GP:</td>
<td><input type="text" name="gp" size=20 class="required"></td>
</tr>
<tr>
<td colspan=2 class="heading">Next of Kin:</td>
</tr>
<tr>
<td class="heading">Name:</td>
<td><input type="text" name="nextOfKin" size=20 class="required"></td>
</tr>
<tr>
<td class="heading">Address:</td>
<td><input type="text" name="nextofkin_address1" size=20 class="required"></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address2" size=20></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address3" size=20></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address4" size=20 class="required"></td>
</tr>
<tr>
<td class="heading">Tel No:</td>
<td><input type="text" name="nextofkin_telNo" size=20 class="required"></td>
</tr></table>
</td>
</tr>
<tr valign=top align=left>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
<tr><td class="heading" width="36%">Current Placement:</td><td><input type="text" name="currentPlacement" size=20></td></tr>
<tr><td class="heading">Contact No:</td><td><input type="text" size="20" name="contactNo" id="contactNo"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
<tr valign="middle">
<td class="heading" width="29%">Consultant:</td>
<td><input type="text" name="consultant" size=20 class="required"></td>
</tr>
</table>
</td>
</tr>
<tr valign=top align=left>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
<tr><td class="heading" width="36%">Diagnosis:</td><td><input type="text" name="diagnosis" size=20 class="required"></td></tr>
<tr><td class="heading">Description of condition</td><td><input type="text" size="20" name="condition" id="condition" class="required"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
<tr valign="middle">
<td class="heading" width="29%">Date of condition /<br>injury /<br>illness</td>
<td><input type="text" name="dateOfCondition" id="dateOfCondition" class="required"/></td>
</tr>
</table>
</td>
</tr><tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr valign=top align=left><td colspan=2 class="heading" align=center><h1>Summary of Surgical/Medical interventions completed to date</h1></td></tr>
<tr><td class="heading" width="50%">Glasgow Coma Scale score <br>(on admission and current)</td><td width="45%" class="heading"><textarea name="glasgowComa" id="glasgowComa" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Current Medication</td><td width="45%" class="heading"><textarea name="currentMed" id="currentMed" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Latest Blood Results</td><td width="45%" class="heading"><textarea name="bloodResults" id="bloodResults" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Infection Control Considerations (inc MRSA;CDT)</td><td width="45%" class="heading"><textarea name="infectionControl" id="infectionControl" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Date of last screen</td><td width="45%" class="heading"><input type="text" size=10 name="dateOfLastScreen" id="dateOfLastScreen"></td></tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Pre-condition/injury/illness information</td></tr>
<tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr><td class="heading" width="50%">Significant medical history</td><td width="45%" class="heading"><textarea name="medicalHistory" id="medicalHistory" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Significant pre-morbid psychological/psychiatric history</td><td width="45%" class="heading"><textarea name="preMorbid" id="preMorbid" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Social history (inc family/carer; Advocate; MCA; POA; SW)</td><td width="45%" class="heading"><textarea name="socialhistory" id="socialhistory" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Housing</td><td width="45%" class="heading"><textarea name="housing" id="housing" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Work</td><td width="45%" class="heading"><textarea name="work" id="work" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=center><u>Summary of functional Status</u></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Sensory</u></td></tr>
<tr><td class="heading" width="50%">Vision</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_vision" id="sensory_vision"></td></tr>
<tr><td class="heading" width="50%">Hearing</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_hearing" id="sensory_hearing"></td></tr>
<tr><td class="heading" width="50%">Perceptual</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_perceptual" id="sensory_perceptual"></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" align=left>Airway Management (inc tracheostromy/oxygen)</td><td width="45%" class="heading"><input type="text" size=40 name="airway_management" id="airway_management"></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Pressure Management</u></td></tr>
<tr><td class="normal" width="50%">Pressure sore</td><td width="45%" class="normal">
Yes <input type="radio" size=40 name="pm_sore" value="True"> No <input type="radio" size=40 name="pm_sore" value="false">
</td>
</tr>
<tr>
<td class="normal" width="50%"><span style="margin-left:20px;">Grade</span></td>
<td width="45%" class="heading"><input type="text" name="pm_grade" id="pm_grade" size=2></td>
</tr>
<tr>
<td class="normal" width="50%"><span style="margin-left:20px;">Location</span></td>
<td width="45%" class="heading"><input type="text" name="pm_location" id="pm_location" size=20></td>
</tr>
<tr><td class="normal" width="50%"><span style="margin-left:20px;">Waterlow score</span></td><td width="45%" class="heading">
<input type="text" name="pm_waterlow" id="pm_waterlow" size=2>
</td>
</tr>
<tr><td class="heading" width="50%">Mobility (inc falls risk)</td><td width="45%" class="heading"><textarea name="mobility" id="mobility" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Continence</td><td width="45%" class="heading"><textarea name="continence" id="continence" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:bottom;"><td class="heading" width="100%" colspan=2 align=left><u>Nutrition</u></td></tr>
<tr valign=top><td class="normal" width="50%">Weight</td><td width="45%" class="heading"><textarea name="nut_weight" id="nut_weight" cols=30 rows=5></textarea></td></tr>
<tr valign=top><td class="normal" width="50%">MUST</td><td width="45%" class="heading"><textarea name="nut_must" id="nut_must" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:top;">
<td class="heading" width="50%" align=left><u>Cognitive (inc PTA; STML; Level of Consciousness)</u></td>
<td width="45%" class="heading"><textarea name="lvlConscious" id="lvlConscious" cols=30 rows=5></textarea></td>
</tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Summary of Rehabilitation Needs</td></tr>
<tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr><td class="heading" width="50%">Rehabilitation Goals</td><td width="45%" class="heading"><textarea name="rehabGoals" id="rehabGoals" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Rehabilitation progress, management and any complications</td><td width="45%" class="heading"><textarea name="rehabProgress" id="rehabProgress" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Current Rehabilitation key management plan and profession specific input</td><td width="45%" class="heading"><textarea name="rehabCurrent" id="rehabCurrent" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Other Key information</td><td width="45%" class="heading"><textarea name="otherKeyInfo" id="otherKeyInfo" cols=30 rows=5 onfocus="this.value='';">Further treatment plans/follow up Safeguarding: MCA issues; DOLS; challenging behavious; 1:1 needs
</textarea></td></tr>
</table>
</td>
</tr>
<tr><td colspan=2><input type="Submit" value="Send"></td></tr>
</table>
<input type="hidden" name="reload" value=1>
</form></body>
</html>- Can anyone please point me in the right direction for the various methods of validation.Currently I have a form that I validate using Javascript (see below). what I need is when the user submits if a field isnt entered then the whole row is highlightedALSOAn asterix placed inline at the end of the row (all in line with other rows)Any othr techniques you know of.CheersDarryl<tr><td><a href="#" onclick="validateform();"><button>What's not completed</button></a></td></tr>
<tr id="1"><td width="30%" class="header">Firstname</td><td width="60%"><input type="text" name="firstName" id="firstName" size="50" value="Darryl"></td></tr>
<tr id="2"><td width="30%" class="header" id="tdSurname">Surname</td><td width="60%"><input type="text" name="surName" id="surName" size="50" value="Wilson"></td></tr>
<tr id="3"><td width="30%" class="header" id="tdDOB">DOB</td><td width="60%"><input type="text" name="dob" id="dob" size="20" ></td></tr>
<tr id="4"><td width="30%" class="header" name="tdGender">Gender</td><td width="60%" class="normal" name="tdGender">
<input type="radio" name="gender" value="M" checked> Male
<input type="radio" name="gender" value="F" > Female
<input type="radio" name="gender" value="U" > Undisclosed
</td></tr>- 09-Jan-2013 10:24 AM
- Forum: Using jQuery UI
I have a page with divs and li's see below.When i click submit the error message goes right through the radio buttons and underneath the text boxes.How can I place each error message at a fixed (aligned) location on the same line as the object?Also could you show me how I could highlight the WHOLE line in (say red) if its not been filled in or invalid.Many thanks,DarrylCODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Researcher Request Form to access RD&I Volunteer Database</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="/tonic_new/js/jquery.validate.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#form_540751").validate({
rules: {
chkIRequire: {
required: true
},
chkSubjectGroup: {
required: true
},
chkGender: {
required: true
},
txtAgeFrom: {
required: true,
number: true
},
txtAgeTo: {
required: true,
number: true
},
chkSmoker: {
required: true
}
},
messages: {
chkIRequire: "Select what you require",
chkSubjectGroup: "Select your Subject Group",
chkGender: "Sselect your Gender",
element_1_15: "Please click the E-Signed to prove you have read this"
}
});
});
$(function() {
$( "#DOBdatepicker" ).datepicker();
});
</script>
<style type="text/css">
.address {display:block; font-size:8pt; margin-right;8px; }
h1 {text-align:center }
form.cmxform {
width: 370px;
font-size: 1.0em;
color: #333;
}
form.cmxform legend {
padding-left: 0;
}
form.cmxform legend, form.cmxform label {
color: #333;
}
form.cmxform fieldset {
border: none;
border-top: 1px solid #C9DCA6;
background: url(../images/cmxform-fieldset.gif) left bottom repeat-x;
background-color: #F8FDEF;
}
form.cmxform fieldset fieldset {
background: none;
}
form.cmxform fieldset p, form.cmxform fieldset fieldset {
padding: 5px 10px 7px;
background: url(../images/cmxform-divider.gif) left bottom repeat-x;
}
label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
color: red;
font-style: italic;
}
div.error {
background-color:#F3E6E6;
border-color: #000000;
border-style: solid solid solid none;
border-width: 12px;
padding: 5px;}
input {color:#000000;}
input.checkbox { border: none }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
form.cmxform .gray * { color: gray; }</style>
</head>
<body id="main_body">
<div id="form_container">
<div style="background-image: url('images/nhs.jpg');background-position:right top; background-repeat:no-repeat;margin-right:3px;">
<div style="position:relative; text-align:right;width:360px; height:50px;left:370px;top:10px;font-family:arial;font-size:18pt;">The Royal Liverpool and Broadgreen University Hospitals</div>
<div style="position:relative; text-align:right;top:20px;margin-right:90px; font:12px arial grey;">NHS TRUST</div>
<div style="position:relative; top:30px; text-align:right; margin-right:3px;">
<span class="address">Royal Liverpool University Hospital</span>
<span class="address">Prescot street</span>
<span class="address">Liverpool</span>
<span class="address">L7 8XP</span>
<span class="address"><br />Tel : 0151 706 2000</span>
<span class="address">Fax: 0151 706 5806</span>
</div>
<div style="width:180px; position:relative; top:-40px; left:420px;"><img src="images/consentlogo.jpg" width="180" height="70" border=0></div>
</div><h1>Consent to be included on a Register of Interest for Research</h1>
<form id="form_540751" class="appnitro" method="post" action="/development/RLU/researcher_request.asp">
<div class="form_description">
<p>Please indicate whether you require only metrics around cohorts or full volunteer contact details:</p>
<ul>
<li id="li_3" >
<label class="description" for="element_3">I require </label>
<span>
<input id="chkIRequire_1" name="chkIRequire" class="element radio" type="radio" value="Metrics Only" />
<label class="choice" for="chkIRequire_1">Metrics Only</label>
<input id="chkIRequire_2" name="chkIRequire" class="element radio" type="radio" value="Full Volunteer Contact Details" />
<label class="choice" for="chkIRequire_2">Full Volunteer Contact Details</label>
</span>
</li>
</ul>
</div>
<div class="form_description">
<h2>Section 1 : Subject Criteria</h2>
<ul>
<li id="li_3">
<label class="description" for="element_3">Subject Group</label>
<span>
<input id="chkSubjectGroup_1" name="chkSubjectGroup" class="element radio" type="radio" value="Patients" />
<label class="choice" for="chkSubjectGroup_1">Metrics Only</label>
<input id="chkSubjectGroup_2" name="chkSubjectGroup" class="element radio" type="radio" value="Healthy Volunteers" />
<label class="choice" for="chkIRequire_2">Full Volunteer Contact Details</label>
</span>
</li>
<li id="li_4">
<label class="description" for="element_3">Gender</label>
<span>
<input id="chkGender_1" name="chkGender" class="element radio" type="radio" value="Male" />
<label class="choice" for="chkSubjectGroup_1">Male</label>
<input id="chkGender_2" name="chkGender" class="element radio" type="radio" value="Female" />
<label class="choice" for="chkGender_2">Female</label>
</span>
</li>
<li id="li_5">
<label class="description" for="element_3">Age Range</label>
<span>
<input id="txtAgeFrom_1" name="txtAgeFrom" class="element text" type="text" size=2 />
<input id="txtAgeFrom_2" name="txtAgeTo" class="element text" type="text" size=2 />
</span>
</li>
<li id="li_6">
<label class="description" for="element_3">Smoker</label>
<span>
<input id="chkSmoker_1" name="chkSmoker" class="element radio" type="radio" value="Yes" />
<label class="choice" for="chkSmoker_1">Yes</label>
<input id="chkGender_2" name="chkSmoker" class="element radio" type="radio" value="No" />
<label class="choice" for="chkSmoker_2">No</label>
<input id="chkSmoker_3" name="chkSmoker" class="element radio" type="radio" value="Ex" />
<label class="choice" for="chkSmoker_3">Ex</label>
<input id="chkGender_4" name="chkSmoker" class="element radio" type="radio" value="Does not matter" />
<label class="choice" for="chkSmoker_4">Does not matter</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_3">Disorder(s) subject <u>MUST</u> have:<br>(eg: Asthma, IBS etc)</label>
<span>
<textarea id="txtDisorderMustHave" name="txtDisorderMustHave" class="element textarea" cols=40 rows=5></textarea></span>
</li>
<li id="li_8">
<label class="description" for="element_3">Disorder(s) subject <u>MUST NOT </u> have:<br>(eg: Asthma, IBS etc)</label>
<span>
<textarea id="txtDisorderMustNotHave" name="txtDisorderMustNotHave" class="element textarea" cols=40 rows=5></textarea>
</span>
</li>
<li id="li_9">
<label class="description" for="element_3">Subjects(s) subject <u>MUST NOT </u> be allergic to:<br>(eg: Penicillin)</label>
<span>
<textarea id="txtSubjectsMustNotHave" name="txtSubjectsMustNotHave" class="element textarea" cols=40 rows=5></textarea>
</span>
</li>
<li id="li_10">
<label class="description" for="element_3">Additional Criteria</label>
<span>
<textarea id="txtAdditional" name="txtAdditional" class="element textarea" cols=40 rows=5></textarea>
</span>
</li>
</ul>
</div>
<div class="form_description">
<h2>Section 2 : Project Details</h2>
<ul>
<li id="li_11">
<label class="description" for="element_3">Project Short Title</label>
<span>
<input id="txtProjectShortTitle" name="txtProjectShortTitle" class="element textbox" size=40 type="text" />
</span>
</li>
<li id="li_12">
<label class="description" for="element_3">RD&I Number (if registered)</label>
<span>
<input id="txtRDINumber" name="txtRDINumber" class="element textbox" size=40 type="text" />
</span>
</li>
<li id="li_13">
<label class="description" for="element_3">Number of subjects required</label>
<span>
Patients <input id="txtSubjects_Patients" name="txtSubjects_Patients" class="element textbox" type="text" size=2 />
Healthy Volunteers <input id="txtSubjects_HealthyVolunteer" name="txtSubjects_HealthyVolunteer" class="element textbox" type="text" size=2 />
</span>
</li>
<li id="li_14">
<label class="description" for="element_3">Study Synopsis<p style="font-weight:0;">(please include protocol if project not registered</p></label>
<span>
<textarea id="txtStudySynopsis" name="txtStudySynopsis" cols=40 rows=4></textarea>
</span>
</li>
</ul>
</div>
<div class="form_description">
<h2>Section 3 : Sign Off</h2>
<ul>
<li id="li_11">
<label class="description" for="element_3">Researcher Name</label>
<span>
<input id="txtResearcher" name="txtResearcher" class="element textbox" size=40 type="text" />
</span>
</li>
<li id="li_12">
<label class="description" for="element_3">Researcher Signature</label>
<span>
<input id="chkResearcher_ESig" name="chkResearcher_ESig" class="element checkbox" type="checkbox" value="1" />
</span>
</li>
<li id="li_13">
<label class="description" for="element_3">Date</label>
<span>
<input id="txtSignOff_date_Day" name="txtSignOff_date_Day" class="element textbox" type="text" size=2 maxlength=2 /> /
<input id="txtSignOff_date_Month" name="txtSignOff_date_Month" class="element textbox" type="text" size=2 maxlength=2 /> /
<input id="txtSignOff_date_Year" name="txtSignOff_date_Year" class="element textbox" type="text" size=4 maxlength=4 />
</span>
</li></ul>
<h3>Thank you for completing this Form.</h3>
</div>
<ul><li class="buttons">
<input type="hidden" name="reload" value="1" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
<input type="hidden" name="patientId" value="">
</form>
</div></body>
</html>- I have: <li id="li_9">
<label class="description" for="element_9">Gender *</label>
<span>
<input id="element_9_1" name="element_9" class="required" type="radio" value="1" />
<label class="choice" for="element_9_1">M</label>
<input id="element_9_2" name="element_9" class="required" type="radio" value="2" />
<label class="choice" for="element_9_2">F</label>
</span>
</li>Yet if none are chosen, the error message cuts right through the middle of the two radio boxes.All the error messages appear UNDER the text/check boxes. Can i get the error to be aligned at the RHS of the page?CheersDarryl- I have 3 tabs, on the first i have a list of items.What I need is when you click on an item in tab 1 it opens tab 2 with a parameter that tab 2 can accessThe scenario is Projects on tab 1 with a list of jobs on tab 2. But i only want info relating to the project selected on tab 1.Is this possible. I guess I'd need to code tab 2 as a separate asp page and load it with ajax. or triggerTabDarryl
- 14-Dec-2012 05:01 AM
- Forum: Using jQuery
Sorry if this long winded. Im struggling to find examples to help me do various methods of validation.I'm using tables and not CSS (so no labels)I have the code below and I would really lik eto know how I can validate it in various ways eg: highlight the whole line put an asterix at the beginning /end of the error line. Summary and WarningPlus say I have 3 boxes for dob how can i validate the whole as a date and give one error (as above).Cheers<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Cheshire and Merseyside Rehabilitation Network Referral Proforma</title>
<!--<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />//-->
<LINK rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script>
$(function() {
$( "#dateOfCondition" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-15:+0'
});
$( "#dateOfCondition" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#dateOfLastScreen" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-20:+0'
});
$( "#dateOfLastScreen" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-100:+0'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$("#Proforma").validate({
rules: {
completedBy: "required"
},
messages: {
completedBy: "Please enter your firstname"
}
});
});
</script>
<style type="text/css">#Proforma { width: 670px; }
#Proforma { width: 670px; }
#Proforma error {
margin-left: 10px;
width: auto;
display: inline;
}</style>
</head>
<form method="post" action="<%=sc%>" id="Proforma" name="Proforma">
<table width="80%">
<tr><td colspan=2 align=right>
<img src="images/nhs.jpg" border=0 style="margin-top:0px;padding-bottom:10px;">
<br>Cheshire and Mersyside<br>Rehabilitation Network</td>
</tr>
<tr><td colspan=2 align=center>
<div style="width:440px;">
<h1>Cheshire and Merseyside Rehabilitation Network Referral Proforma</h1>
</div>
</td>
</tr>
<%if reload = 0 then %>
<tr>
<td colspan=2 align=left>
<table width="100%" style="border:1px solid black;padding-left:10px;padding-bottom:20px;" border=0>
<tr><td colspan=3 class="highlight">Please indicate Level of rehabilitation need and service required</td></tr>
<tr><td colspan=3> </td></tr><tr rowheight=40 valign=bottom class="normal">
<td class="normal"><input type="radio" name="rehabLevel" value="A" class="required"> Hub - Category A</td>
<td class="normal"><input type="radio" name="rehabLevel" value="B"> Spoke - Category B</td>
<td class="normal"><input type="radio" name="rehabLevel" value="I"> Spoke - Individual Case Consideration</td>
</tr>
<tr class="normal" align=left>
<td colspan=3>
<table width="100%" border=0>
<tr>
<td class="normal" width="30%">Name of person Completing form:</td>
<td colspan=2><input type="text" name="completedBy" id="completedBy" size="30" style="border:1px;" ></td>
</tr>
<tr>
<td class="normal">Email of person Completing form:</td>
<td colspan=2><input type="text" name="completedByEmail" id="completedByEmail" size="30" style="border:1px;" ></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Patient Demographics and Referral Details</td></tr>
<tr valign=top align=left>
<td>
<table width="100%" style="border:1px solid black;padding-left:10px; height:266px" border=0>
<tr>
<td class="heading">NHS No:</td><td><input type="text" name="nhsNumber" size=20 maxlength=10 class="required"></td>
</tr>
<tr><td colspan=2><hr width="100%"></td></tr>
<tr>
<td class="heading" colspan=2>Patient Details:</td>
</tr>
<tr><td class="normal">Surname:</td><td><input type="text" size="20" name="surname" id="surname"></td></tr>
<tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname"></td></tr>
<tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob"></td></tr>
<tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address2" id="address2"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address3" id="address3"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address4" id="address4"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px;height:267px;" border=0>
<tr>
<td class="heading">GP:</td>
<td><input type="text" name="gp" size=20></td>
</tr>
<tr>
<td colspan=2 class="heading">Next of Kin:</td>
</tr>
<tr>
<td class="heading">Name:</td>
<td><input type="text" name="nextOfKin" size=20></td>
</tr>
<tr>
<td class="heading">Address:</td>
<td><input type="text" name="nextofkin_address1" size=20></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address2" size=20></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address3" size=20></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="nextofkin_address4" size=20></td>
</tr>
<tr>
<td class="heading">Tel No:</td>
<td><input type="text" name="nextofkin_telNo" size=20></td>
</tr></table>
</td>
</tr>
<tr valign=top align=left>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
<tr><td class="heading" width="36%">Current Placement:</td><td><input type="text" name="currentPlacement" size=20></td></tr>
<tr><td class="heading">Contact No:</td><td><input type="text" size="20" name="contactNo" id="contactNo"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
<tr valign="middle">
<td class="heading" width="29%">Consultant:</td>
<td><input type="text" name="consultant" size=20></td>
</tr>
</table>
</td>
</tr>
<tr valign=top align=left>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
<tr><td class="heading" width="36%">Diagnosis:</td><td><input type="text" name="diagnosis" size=20></td></tr>
<tr><td class="heading">Description of condition</td><td><input type="text" size="20" name="condition" id="condition"></td></tr>
</table>
</td>
<td align=left>
<table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
<tr valign="middle">
<td class="heading" width="29%">Date of condition /<br>injury /<br>illness</td>
<td><input type="text" name="dateOfCondition" id="dateOfCondition" /></td>
</tr>
</table>
</td>
</tr><tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr valign=top align=left><td colspan=2 class="heading" align=center><h1>Summary of Surgical/Medical interventions completed to date</h1></td></tr>
<tr><td class="heading" width="50%">Glasgow Coma Scale score <br>(on admission and current)</td><td width="45%" class="heading"><textarea name="glasgowComa" id="glasgowComa" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Current Medication</td><td width="45%" class="heading"><textarea name="currentMed" id="currentMed" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Latest Blood Results</td><td width="45%" class="heading"><textarea name="bloodResults" id="bloodResults" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Infection Control Considerations (inc MRSA;CDT)</td><td width="45%" class="heading"><textarea name="infectionControl" id="infectionControl" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Date of last screen</td><td width="45%" class="heading"><input type="text" size=10 name="dateOfLastScreen" id="dateOfLastScreen"></td></tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Pre-condition/injury/illness information</td></tr>
<tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr><td class="heading" width="50%">Significant medical history</td><td width="45%" class="heading"><textarea name="medicalHistory" id="medicalHistory" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Significant pre-morbid psychological/psychiatric history</td><td width="45%" class="heading"><textarea name="preMorbid" id="preMorbid" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Social history (inc family/carer; Advocate; MCA; POA; SW)</td><td width="45%" class="heading"><textarea name="socialhistory" id="socialhistory" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Housing</td><td width="45%" class="heading"><textarea name="housing" id="housing" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Work</td><td width="45%" class="heading"><textarea name="work" id="work" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=center><u>Summary of functional Status</u></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Sensory</u></td></tr>
<tr><td class="heading" width="50%">Vision</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_vision" id="sensory_vision"></td></tr>
<tr><td class="heading" width="50%">Hearing</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_hearing" id="sensory_hearing"></td></tr>
<tr><td class="heading" width="50%">Perceptual</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_perceptual" id="sensory_perceptual"></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" align=left>Airway Management (inc tracheostromy/oxygen)</td><td width="45%" class="heading"><input type="text" size=40 name="airway_management" id="airway_management"></td></tr>
<tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Pressure Management</u></td></tr>
<tr><td class="normal" width="50%">Pressure sore</td><td width="45%" class="normal">
Yes <input type="radio" size=40 name="pm_sore" value="True"> No <input type="radio" size=40 name="pm_sore" value="false">
</td>
</tr>
<tr>
<td class="normal" width="50%"><span style="margin-left:20px;">Grade</span></td>
<td width="45%" class="heading"><input type="text" name="pm_grade" id="pm_grade" size=2></td>
</tr>
<tr>
<td class="normal" width="50%"><span style="margin-left:20px;">Location</span></td>
<td width="45%" class="heading"><input type="text" name="pm_location" id="pm_location" size=20></td>
</tr>
<tr><td class="normal" width="50%"><span style="margin-left:20px;">Waterlow score</span></td><td width="45%" class="heading">
<input type="text" name="pm_waterlow" id="pm_waterlow" size=2>
</td>
</tr>
<tr><td class="heading" width="50%">Mobility (inc falls risk)</td><td width="45%" class="heading"><textarea name="mobility" id="mobility" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Continence</td><td width="45%" class="heading"><textarea name="continence" id="continence" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:bottom;"><td class="heading" width="100%" colspan=2 align=left><u>Nutrition</u></td></tr>
<tr valign=top><td class="normal" width="50%">Weight</td><td width="45%" class="heading"><textarea name="nut_weight" id="nut_weight" cols=30 rows=5></textarea></td></tr>
<tr valign=top><td class="normal" width="50%">MUST</td><td width="45%" class="heading"><textarea name="nut_must" id="nut_must" cols=30 rows=5></textarea></td></tr>
<tr style="height:50px; vertical-align:top;">
<td class="heading" width="50%" align=left><u>Cognitive (inc PTA; STML; Level of Consciousness)</u></td>
<td width="45%" class="heading"><textarea name="lvlConscious" id="lvlConscious" cols=30 rows=5></textarea></td>
</tr>
</table>
</td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Summary of Rehabilitation Needs</td></tr>
<tr valign=top align=left>
<td align=left colspan=2>
<table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
<tr><td class="heading" width="50%">Rehabilitation Goals</td><td width="45%" class="heading"><textarea name="rehabGoals" id="rehabGoals" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Rehabilitation progress, management and any complications</td><td width="45%" class="heading"><textarea name="rehabProgress" id="rehabProgress" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Current Rehabilitation key management plan and profession specific input</td><td width="45%" class="heading"><textarea name="rehabCurrent" id="rehabCurrent" cols=30 rows=5></textarea></td></tr>
<tr><td class="heading" width="50%">Other Key information</td><td width="45%" class="heading"><textarea name="otherKeyInfo" id="otherKeyInfo" cols=30 rows=5 onfocus="this.value='';">Further treatment plans/follow up Safeguarding: MCA issues; DOLS; challenging behavious; 1:1 needs
</textarea></td></tr>
</table>
</td>
</tr>
<tr><td colspan=2><input type="Submit" value="Send"></td></tr>
<%else%>
<tr><td><h1>Your Referral was sent successfully</h1></td></tr>
<%end if%>
</table>
<input type="hidden" name="reload" value=1>
</form>
<body></body>
</html>- 13-Dec-2012 11:29 AM
- Forum: Using jQuery Plugins
Ive meanaged to create a modal ajax popup but it hardcodes to a html file. Casn I get it to pass a parameter of the current object id to the modal and send it to an asp page with the parameter?- I use tables to create a form and I want to validate it.eg:<tr><td class="normal">Surname:</td><td><input type="text" size="20" name="surname" id="surname"></td></tr>
<tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname"></td></tr>
<tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob"></td></tr>
<tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address2" id="address2"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address3" id="address3"></td></tr>
<tr><td class="normal"></td><td><input type="text" size="20" name="address4" id="address4"></td></tr>How can I use the validation plugin to validate in different wayseg: highlight the error element / Put an asterix next to the element etcCheers- I have 3 elements on the same row (below) but I end up with 3 error messages on the same line, which is crap. Is there a way of creating a date and checking its validity and displaying ONE error message?:<tr>
<td width="30%"><label for="dob">Date of Birth </label></td>
<td width="40%"><input type="text" id="dobDay" name="dobDay" size="4" value="day" onFocus="this.value='';" maxlength=2 /> / <input type="text" id="dobMonth" name="dobMonth" size="4" value="month" onFocus="this.value='';" maxlength=2 validate="required:true,range: [1,12]" /> / <input type="text" id="dobYear" name="dobYear" size="4" value="year" onFocus="this.value='';" maxlength=4 /></td>
<td width="30%"></td>
</tr>With the validation rules:dobDay: {
required:true,
number:true
},
dobMonth: {
required:true,
number:true,
range: [1,12]
},
dobYear: {
required:true,
number:true,
maxlength:4,
minlength:4
},
contactMethod: {
required: true,
minlength:1
},
typeOfMS: {
required:true,
minlength:1
}
,
dmt: {
required:true,
minlength:1
},
edss: {
required:true,
minlength:1
},
email: { required: function() {
return $("#noEmail").is(":checked");
},
email: true
},
DiagnosisMonth: {
number:true,
required:false
},
DiagnosisYear: {
number:true,
required:true
},
qol: {
required:true,
minlength:1
},
completedOther: { required: function() {
return $("#selCompletedBy").val()=='Other';
}
}
},messages: {
contactMethod : "Please select at least one contact Method",
typeOfMS : "Please select your Type of MS",
dmt : "Please select a therapy",
edss : "Please select the EDSS Band",
postcode : "Please enter a valid postcode",
telephone : "Please enter your telephone number",
email : "Please enter a valid email address",
DiagnosisMonth: "Enter a valid month between 1 and 12",
DiagnosisYear : "Enter a valid year",
qol : "Please select the patients' Quality of Life",
dobDay : "Day",
dobMonth : "Month",
dobYear : "Year",
completedOther : "Who completed this form"
}
});- I have had to remove the datepicker and replace it by 3 text boxes.My question is how do I create a validate rule to check that the 3 text boxes (d/m/y) = a valid date.I am using the traditional rules and messages method.also i only want one error message (currently i get 3 erorr messages for each text box - not good)cheersDarryl
- I have the following code:<select name="selCompletedBy" id="selCompletedBy">
<option value="Dr">Dr</option>
<option value="Nurse">Nurse</option>
<option value="Therapist">Therapist</option>
<option value="Psychologist">Psychologist</option>
<option value="Other">Other</option>
</select>
<input type="text" name="completedOther" id="completedOther" size="45" maxlength="50" validate="required:true" >Then in the validation :
completedOther: { required: "#selCompletedBy.selectedvalue=='Other'" }But this causes an error. How do i make the completedOther text field required if the selCompletedBy = 'Other'Thanks- 19-Nov-2012 10:35 AM
- Forum: Using jQuery
I have a dropdown with an option for 'Other'I would like it to validate the text box (and display an error msg with the rest of the validation) for being empty IF the user selects Other from the dropdown. Also it would be nice if the text box for the Other was hidden until the user selects Other from the dropdown.I am using the usual jquery rules and messages, but i have no idea how to do this.CheersDarryl- I downloaded the code below to allow the user to add another form element if required. It works BUT it places the text from the previous text box into the new one.I want to create an email page where the user can create as many recipents as possible, but this isnt acceptable. How do i modify the code to remove the clone and just create a new form element?CheersDarryl<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$('#input' + num).html='';
$('#btnDel').attr('disabled','');
//if (newNum == 5)
// $('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
</head>
<body>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">Name: <input type="text" name="name1" id="name1" /></div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
</body>- I have simply used a H3 tag and standard code and css from jquery. But my H3 tag is huge and you cant see all the text if its a long statement.Can I change the height of the header or the h3 tag pls?thanks
- I have a map of the UK with dots on it. How can I have it so that when you rollover a dot, you get; say an image of the location and some text. Then when you move away this disappears
- 09-Oct-2012 03:55 AM
- Forum: Using jQuery Plugins
I would like to know how to scroll an image into the middle of the screen, pause (x seconsds) then slide out and another image appears in the top left corner and a navigation menu down the left side.When a navigation link is clicked from the menu, can I get the contenta) to be displayed in another container on the right side of the screen (with scrollbars)b) or in another window.c) the link itself be underlined to indication which option is currently selected.ThanksDarryl- I have a Classic ASP page that uses 3 recordsets to create my pageThe first one sets up a select list.The second creates an outer loop and the third provides content based on the id of the 2nd recordset.But its huge and takes ages to load. I have seen examples where it loads a bit of data then when you move down it automatically goes away and adds further more content.How do i do this please.
- im using the standard jquery code to create my tabs eg:<div id="tabs"><ul><li>hjhjkh</li></ul><div id="tab1"></div></div>Can anyone please tell me how to change this code to accommodate tab paging. I've looked at the examples but i'm obviously too thick to figure it out.Thanks
- I potentially could have over 10 tabs been loaded (currently fortunately its only 3) but for each tab a stored procedure is called. Its initially ok except for when i move to another page, then I go back and the page has to reload each tab, calling the Stored Procedures again (for each tab). I have cache:true on the tabs.Is there anything else I can do to speed up each tab?CheersDarryl
- I've inherited a page that has references to jquery 1.4.4 and 1.5 using ui (1.8). I have the usual tabs in a divie: <div id=tabs><ul><li><a href="#tab1">Line 1</a></li></ul></div>then$("#tabs").tabs('select',1)But i have an instance when there's about 20 or more tabs. Ive downloaded a scroller but i cant get it to work within the confines of my company's code.Is there a solution to scrolling tabs using just the existing jquery library??Cheers
- I'm working for a company that is using version 1.4.4. But Ive acquired the need to paging tabs.In the example though, It uses 1.3.2. Is this the only version of the library that i can use. or can I use my existing library?
- I have a simple asp page that pulls info out of a db, but ita takes a while to load and display.Can I put a spinner say onload and then it stops when my page is finished and displayed??Thanks
© 2012 jQuery Foundation
Sponsored by
and others.