richrock Posted March 17, 2010 Share Posted March 17, 2010 Okay, I've been scratching my head on this for a while, but can't see why: When I send this form, the Referring Dentist name should highlight with a red background colour, however, it only does it momentarily, before reverting to white - anyone see why? PHP code with JS <html> <head> <script type="text/javascript"> function formValidator(){ var valid = true; var message = ""; // Make quick references to our fields var practitioner_name = document.getElementById('practitioner_name').value; var focused = false; if (practitioner_name == null || practitioner_name == "" || practitioner_name == "Name*") { //if (focused == false ) {document.getElementById('practitioner_name').focus(); focused = true;} document.getElementById('practitioner_name').style.backgroundColor="#ff0000"; alert('pause'); valid = false; } if (valid == false) { document.getElementById('error_in_form').style.display='block'; } else { document.getElementById('vstr').value = 'ax8F5zEeS'; alert('sending form'); //document.getElementById('referral').submit(); } //return valid; } </script> <link href="template.css" rel="stylesheet" type="text/css" /> </head> <body> <?php $separate = "<span style='display: inline-block; width: 100%; border-bottom: 1px solid silver; padding-top:12px; margin-bottom:12px;'><!-- underline --></span>"; ?> <div id="referral_form"> <?php echo $separate; ?> <div id="error_in_form" style="display:none;">Please fill in the highlighted fields.</div> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td width="458" style="padding-right:16px;"> <form action="referral.php" method="post" name="referral"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td colspan="2"><h3>Referring Dentist Details</h3></td> </tr> <tr> <td><input type="text" name="practitioner_name" id="practitioner_name" value="Name*" onfocus="if(this.value == 'Name*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Name*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Name*') { this.value=''; this.style.color = '#a7b325';}" onkeyup="if(this.value == 'Name*') { setSelectionRange(0,0)}" /></td> <td>Date <input type="text" name="practitioner_day_referred" value="DD" size="2" onfocus="if(this.value == 'DD'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'DD';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'DD') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'DD') { setSelectionRange(0,0)}" /> <input type="text" name="practitioner_month_referred" value="MM" size="2" onfocus="if(this.value == 'MM'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'MM';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'MM') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'MM') { setSelectionRange(0,0)}" /> <input type="text" name="practitioner_year_referred" value="YY" size="2" onfocus="if(this.value == 'YY'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'YY';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'YY') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'YY') { setSelectionRange(0,0)}" /> </td> </tr> <tr> <td colspan="2" class="contact-cell"> <textarea name="practice_address" value="Practice Address*" onfocus="if(this.value == 'Practice Address*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Practice Address*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Practice Address*') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Practice Address*') { setSelectionRange(0,0)}" >Practice Address*</textarea> </td> </tr> <tr> <td><input type="text" name="practice_postcode" value="Postcode*" onfocus="if(this.value == 'Postcode*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Postcode*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Postcode*') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Postcode*') { setSelectionRange(0,0)}" /></td> <td><input type="text" name="practice_email" value="Email" onfocus="if(this.value == 'Email'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Email';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Email') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Email') { setSelectionRange(0,0)}" /></td> </tr> <tr> <td><input type="text" name="practice_phone" value="Telephone*" onfocus="if(this.value == 'Telephone*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Telephone*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Telephone*') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Telephone*') { setSelectionRange(0,0)}" /></td> <td><input type="text" name="practice_mobile" value="Mobile" onfocus="if(this.value == 'Mobile'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Mobile';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Mobile') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Mobile') { setSelectionRange(0,0)}" /></td> </tr> <tr> <td colspan="2"> <?php echo $separate; ?> </td> </tr> <tr> <td colspan="2"> <h3>Patients Details</h3> </td> </tr> <tr> <td><input type="text" name="patient_fname" value="First Name*" onfocus="if(this.value == 'First Name*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'First Name*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'First Name*') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'First Name*') { setSelectionRange(0,0)}" /></td> <td><input type="text" name="patient_sname" value="Surname*" onfocus="if(this.value == 'Surname*'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Surname*';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Surname*') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Surname*') { setSelectionRange(0,0); }" /></td> </tr> <tr> <td><input type="text" name="patient_title" value="Patient Title" onfocus="if(this.value == 'Patient Title'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Patient Title';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Patient Title') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Patient Title') { setSelectionRange(0,0); }" /></td> <td>Date <input type="text" name="patient_day" value="DD" size="2" onfocus="if(this.value == 'DD'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'DD';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'DD') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'DD') { setSelectionRange(0,0); }" /> <input type="text" name="patient_month" value="MM" size="2" onfocus="if(this.value == 'MM'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'MM';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'MM') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'MM') { setSelectionRange(0,0); }" /> <input type="text" name="patient_year" value="YY" size="2" onfocus="if(this.value == 'YY'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'YY';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'YY') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'YY') { setSelectionRange(0,0); }" /> </td> </tr> <tr> <td colspan="2" class="contact-cell"> <textarea name="patient_address" onfocus="if(this.value == 'Contact Address'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Contact Address';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Contact Address') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Contact Address') { setSelectionRange(0,0); }" >Contact Address</textarea> </td> </tr> <tr> <td><input type="text" name="patient_postcode" value="Postcode" onfocus="if(this.value == 'Postcode'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Postcode';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Postcode') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Postcode') { setSelectionRange(0,0); }" /></td> <td><input type="text" name="patient_email" value="Email" onfocus="if(this.value == 'Email'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Email';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Email') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Email') { setSelectionRange(0,0); }" /></td> </tr> <tr> <td><input type="text" name="patient_phone" value="Telephone" onfocus="if(this.value == 'Telephone'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Telephone';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Telephone') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Telephone') { setSelectionRange(0,0); }" /></td> <td><input type="text" name="patient_mobile" value="Mobile" onfocus="if(this.value == 'Mobile'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Mobile';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Mobile') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Mobile') { setSelectionRange(0,0); }" /></td> </tr> <tr> <td colspan="2"> <?php echo $separate; ?> </td> </tr> <tr> <td colspan="2"> <h3>Reason for referral</h3> </td> </tr> <tr> <td colspan="2" class="contact-cell"> <textarea name="referral_reason" value="Reason for referral" onfocus="if(this.value == 'Reason for referral'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Reason for referral';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Reason for referral') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Reason for referral') { setSelectionRange(0,0); }" >Reason for referral</textarea> </td> </tr> <tr> <td colspan="2"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td> Investigate and treat Yes <input type="radio" name="investigate" /> No <input type="radio" name="investigate" /> </td> <td> Opinion only Yes <input type="radio" name="opinion" /> No <input type="radio" name="opinion" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="2" class="contact-cell"> <textarea name="medical_details" onfocus="if(this.value == 'Relevant medical details'){ this.style.color = '#b3b3b3';} setSelectionRange(0,0);" onblur="if(this.value == ''){ this.value = 'Relevant medical details';} this.style.color = '#a7b325';" onkeypress="if(this.value == 'Relevant medical details') { this.value=''; this.style.color = '#a7b325'; }" onkeyup="if(this.value == 'Relevant medical details') { setSelectionRange(0,0); }" >Relevant medical details</textarea> </td> </tr> <tr> <td colspan="2">Patient anxious Yes <input type="radio" name="anxious" /> No <input type="radio" name="anxious" /></td> </tr> <tr> <td colspan="2"><button name="checkmail" value="confirm" onclick="formValidator();" >Submit</button></td> </tr> </table> <input type="hidden" name="vstr" id="vstr" value="" /> </form> </td> <td><h3>If you would like to refer one of your patients for specialist treatments, please fill in the form below. If you would like to discuss your patient's needs further, please call 0121 236 7630</h3></td> </tr> </table> </div> </body> </html> And the css just incase (I've looked through this but the inputs are not set with any colors anyway) /*----------------------------------------------------------------------------- [client] Screen Stylesheet version: 1.0 date: 01/10/09 author: richard@newwave-design.co.uk email: richard@newwave-design.co.uk website: http://www.newwave-design.co.uk version history: blank stylesheet created. -----------------------------------------------------------------------------*/ /* This is the global reset to allow fresh styling for each build. -----------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .contentpaneopen, .contentheading { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; outline:none; vertical-align:top; line-height:16px; } html, body { height:100%; } body { font-size: 11px; font-family: Arial, sans-serif; color: #808080; text-align:center; } #mainblock { position:relative; min-height:100%; } #wrapper { /* padding-bottom:156px; */ padding-bottom:166px; } #footer-wrapper { position:absolute; bottom: 0; } #wrapper { font-size: 11px; text-align:left; } /* HTML Tags -----------------------------------------------------------------------------*/ h1, .componentheading { font-size: 46px; color: #bfcc2a; line-height:46px; } h2 { font-size: 20px; } h3 { font-size: 18px; } #content-right h3 { font-size: 18px; color: #000; } h4 { font-size: 16px; } #content-right h4 { font-size: 14px; color: #000; } h5 { font-size: 14px; } h6 { font-size: 12px; } p { font-size: 11px; padding-bottom:6px; } a, a:visited { text-decoration:none; color:red; /* makes it pretty obvious to change */ } a:hover { color:aqua; /* makes it pretty obvious to change */ } ul, ol { padding-left:16px; } li { } dt { color:#000ff0; } dd { color: #ff0000; } legend { font-weight:bold; } input, textarea, select, optgroup { font-size:11px; font-family: Arial, sans-serif; } blockquote { font-family: "Times New Roman", serif; font-size: 16px; font-style: italic; color: #bfcc2a; padding-left:16px; padding-right: 16px; } /* Default Attributes -----------------------------------------------------------------------------*/ .clear { clear:both; } .right { float: right; } .left { float: left; } /* Header -----------------------------------------------------------------------------*/ #banner-wrapper { float:left; width:100%; background-image: url('../images/homepage-banner-background.png'); background-position: top center; background-repeat: repeat-x; } #banner { width:980px; margin-left:auto; margin-right:auto; height:403px; padding-top:16px; } /* Navigation -----------------------------------------------------------------------------*/ #header-wrapper { float:left; width:100%; background-color:#151515; } #header { width:948px; margin-left:auto; margin-right:auto; background-color:#151515; height:80px; } #logo { float:left; width:300px; height:80px; } #menu { float:left; width:648px; height:80px; } #mainmenu ul, #mainmenu li { float:left; display:inline; padding-left:0px; padding-right:24px; font-size: 16px; padding-top:16px; } #mainmenu a, #mainmenu a:visited { color: #fff; } #mainmenu #current, #mainmenu .active a, #mainmenu a:hover { color: #d7e62f !important; } #submenu ul, #submenu li { float:left; display: inline; padding-left:0px; } #submenu li a, #submenu li a:visited { float:left; padding-top: 6px; padding-bottom: 7px; padding-right:12px; padding-left:12px; border-top:4px solid #333; color: #666; } #submenu #active_menu, #submenu li a:hover { border-top:4px solid #87a41e; background-image: url('../images/active-submenu.png'); background-position: top center; background-repeat: no-repeat; color:#000; } #submenu-wrapper { float:left; width:100%; background-image: url('../images/submenu-bar.png'); background-repeat: repeat-x; background-position: bottom left; background-color: #333; } #submenu { width:948px; margin-left:auto; margin-right:auto; background-color:#333; } #submenu li { } /* Footer -----------------------------------------------------------------------------*/ #footer-wrapper { width:100%; background-color:#333; background-image: url('../images/footer-bar.png'); background-position: top center; background-repeat: repeat-x; text-align:left; padding-top: 7px; float:left; } #footer-main { width:948px; margin-left:auto; margin-right:auto; background-image: url('../images/footer-bar.png'); background-position: top center; background-repeat: repeat-x; margin-top: 7px; /*height: 216px;*/ } #footer-modules { width:948px; margin-left:auto; margin-right:auto; background-color:#333; height:182px; } #footer-modules table { margin-top:24px; } #footer-sub-wrapper { float:left; width:100%; background-color:#1a1a1a; color: #666; } #footer-sub { width:948px; background-color:#1a1a1a; margin-left:auto; margin-right:auto; padding-top:4px; height:22px; } #footer-sub a, #footer-sub a:visited { color: #666; } #footer-sub a:hover { color:#ccc; } #footer-sub-left { float:left; width:474px; height:22px; } #footer-sub-right { float:left; width:474px; height:22px; text-align: right; } /* Template q -----------------------------------------------------------------------------*/ #left-column { } #content-wrapper { float:left; width:100%; height:100% !important; } #content { width:948px; margin-left:auto; margin-right:auto; height:100%; padding-top:24px; } #content-left { float:left; padding-top:16px; padding-bottom:16px; } #content-left-narrow { padding-top:16px; padding-bottom:16px; padding-right:16px; float:left; height:100%; } #content-right { float:right; width: 236px; } #content-right div.moduletable { padding-left:28px; padding-top:16px; padding-bottom:16px; border-bottom:1px solid silver; } /* Homepage Modules -----------------------------------------------------------------------------*/ #homepage-module-main { width:948px; float:left; background-color:#bea; padding-left:16px; padding-right:16px; height:30px; } #homepage-sub-modules { float:left; width: 948px; padding-left:16px; padding-right:16px; height:30px; } /* Forms -----------------------------------------------------------------------------*/ input.text { padding: 3px; border: 1px solid #999999; } /* Tables -----------------------------------------------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } table.homepage-table { margin-bottom:32px; } table.homepage-table td { padding-top:28px; padding-left:22px; padding-right: 22px; } /* Components CSS -----------------------------------------------------------------------------*/ #component-contact { display: inline-block; width: 674px !important; } .contact-cell { padding-bottom: 8px; } input, .contact-cell input, .contact-cell textarea { border: 1px solid silver; padding:6px; color: #a7b325; } .contact-cell input { width:206px; } .contact-cell textarea { width:456px; height:126px; } /* Referral Form -----------------------------------------------------------------------------*/ #referral_form { width:690px; } NOTE - I have only done the first field, once I get that right I can do the rest Quote Link to comment Share on other sites More sharing options...
richrock Posted March 18, 2010 Author Share Posted March 18, 2010 Never mind - figured that the return valid line should have been uncommented - works fine now. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.