Option select kills form button

Hi Guys
I've run into a strange problem that I have not been able to find the source.
Simply put, the button does not function when the Select Option Section is on the page.
When I delete the entire Select Option Section the button functions as it should.
I checked my error log and there are no errors for the document.
Can you pin-point the problem and give me a solution?


You can see the document in action at: "http://bizigogo.com"

Much appreciated,
Sas

<?php
$STYLE_COLOR_of_textFIELD="#FFF99";
$BACKGROUND_COLOR_of_textFIELD_ONLY="#EE333";
$p_OR_cg="p_TASK_hour";
if($p_OR_cg=="cg_TASK_hour"){$p_OR_cg_frequency="cg_frequency"; $p_OR_cg_HOUR="cg_TASK_hour"; $p_OR_cg_DoW ="cg_DoW"; $p_OR_cg_DoM ="cg_DoM";  $RemindWho ="During which hour should the task be executed?";}
elseif($p_OR_cg=="p_TASK_hour"){$p_OR_cg_frequency="p_frequency"; $p_OR_cg_HOUR="p_TASK_hour"; $p_OR_cg_DoW ="p_DoW"; $p_OR_cg_DoM ="p_DoM"; $RemindWho ="During which hour should the  task be executed?";}
else{$RemindWho  ="During which hour do you want your task performed?";}


print "<form name='f1' id='f1'  form='f1'  action='SAVE_TASK.php' method='post' >";


echo"<BR>

<script type='text/javascript'>
function loadSMS_Sel(sel) {
  frequencyField.style.display='none';
  
  if(sel.selectedIndex == 1)
  {
   frequencyField.style.display='block' 	// Show if yes
   frequencyField_DoW.style.display='none'  // Hide
   frequencyField_DoM.style.display='none'  // Hide
 ;} 
  else if(sel.selectedIndex == 2)
  {
   frequencyField_DoW.style.display='block' // Show if yes
   frequencyField.style.display='none' 		// Hide
   frequencyField_DoM.style.display='none'  // Hide
 ;}   
  else if(sel.selectedIndex == 3)
  {
   frequencyField_DoM.style.display='block' 	// Show
   frequencyField.style.display='none' 		// Hide 
   frequencyField_DoW.style.display='none' 	// Hide
 ;} 
}
</script> 

<TABLE WIDTH=222><TR><TD>
<FONT face='Verdana, Arial' size=2 COLOR=RED>*</FONT><FONT face='Verdana, Arial' size=2 color=black> How Frequently Should The Task Be Executed: 
&nbsp;&nbsp; 
<BR></font>
  <select name='$p_OR_cg_frequency' required onchange='loadSMS_Sel(this)'   
  style='background-color:$BACKGROUND_COLOR_of_textFIELD_ONLY;'>
  <option value='' hidden selected='selected'>Choose A Task Schedule</option>
  <option value='Daily'>Daily</option>
  <option value='Weekly'>Weekly</option>
  <option value='Monthly'>Monthly</option>
 </select>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~ SHOW DAILY SCHEDULE OPTIONS ~~~~~~~~~~~~~~~~~~~~~~~~ -->
 <div id='frequencyField'  
	style='
	padding-left:30px;
	padding-top: 12px;
    padding-right: 30px;
    padding-bottom: 13px; 
    display:none; background-color:#fbe8f3; border-style:ridge; border-color:#67b4fb;border-width:5px;  '>  
<FONT face='Arial' size=2 color=black>&nbsp; <BR>
<SELECT NAME='$p_OR_cg_HOUR' required SIZE='1' required $STYLE_COLOR_of_textFIELD />
<OPTION selected VALUE='' hidden >Which Hour? </OPTION>
<OPTION VALUE='00'>MIDNIGHT</OPTION>
<OPTION VALUE='01'>1 AM</OPTION>
<OPTION VALUE='02'>2 AM</OPTION>
<OPTION VALUE='03'>3 AM</OPTION>
<OPTION VALUE='04'>4 AM</OPTION>
<OPTION VALUE='05'>5 AM</OPTION>
<OPTION VALUE='06'>6 AM</OPTION>
<OPTION VALUE='07'>7 AM</OPTION>
<OPTION VALUE='08'>8 AM</OPTION>
<OPTION VALUE='09'>9 AM</OPTION>
<OPTION VALUE='10'>10 AM</OPTION>
<OPTION VALUE='11'>11 AM</OPTION>
<OPTION VALUE=''> </OPTION>
<OPTION VALUE='12'>NOON</OPTION>
<OPTION VALUE='13'>1 PM</OPTION>
<OPTION VALUE='14'>2 PM</OPTION>
<OPTION VALUE='15'>3 PM</OPTION>
<OPTION VALUE='16'>4 PM</OPTION>
<OPTION VALUE='17'>5 PM</OPTION>
<OPTION VALUE='18'>6 PM</OPTION>
<OPTION VALUE='19'>5 PM</OPTION>
<OPTION VALUE='20'>7 PM</OPTION>
<OPTION VALUE='21'>8 PM</OPTION>
<OPTION VALUE='22'>9 PM</OPTION>
<OPTION VALUE='23'>10 PM</OPTION>
<OPTION VALUE='24'>11 PM</OPTION>
</SELECT>
<P></div>


<!-- ~~~~~~~~~~~~~~~~~~~~~~~~ SHOW WEEKLY SCHEDULE OPTIONS ~~~~~~~~~~~~~~~~~~~~~~~~ -->
 <div id='frequencyField_DoW'  
	style='
	padding-left:30px;
	padding-top: 12px;
    padding-right: 30px;
    padding-bottom: 13px; 
    display:none; background-color:#fbe8f3; border-style:ridge; border-color:#67b4fb;border-width:5px;  '>  
<FONT face='Arial' size=2 color=black>&nbsp; <BR>
<select name='$p_OR_cg_DoW' required    style='background-color:$BACKGROUND_COLOR_of_textFIELD_ONLY; width:222px; '>
<option selected hidden value=''>Select The Day Of The Week</option>

<option value='Sunday'> Sunday</option> 
<option value='Monday'> Monday</option> 
<option value='Tuesday'> Tuesday</option> 
<option value='Wednesday'> Wednesday</option> 
<option value='Thursday'> Thursday</option> 
<option value='Friday'> Friday</option> 
<option value='Saturday'> Saturday</option>
</select>

<P/>
<SELECT NAME='$p_OR_cg_HOUR' SIZE='1' required $STYLE_COLOR_of_textFIELD />
<OPTION VALUE='' hidden >Which Hour? </OPTION>
<OPTION VALUE='00'>MIDNIGHT</OPTION>
<OPTION VALUE='01'>1 AM</OPTION>
<OPTION VALUE='02'>2 AM</OPTION>
<OPTION VALUE='03'>3 AM</OPTION>
<OPTION VALUE='04'>4 AM</OPTION>
<OPTION VALUE='05'>5 AM</OPTION>
<OPTION VALUE='06'>6 AM</OPTION>
<OPTION VALUE='07'>7 AM</OPTION>
<OPTION VALUE='08'>8 AM</OPTION>
<OPTION VALUE='09'>9 AM</OPTION>
<OPTION VALUE='10'>10 AM</OPTION>
<OPTION VALUE='11'>11 AM</OPTION>
<OPTION VALUE=''> </OPTION>
<OPTION VALUE='12'>NOON</OPTION>
<OPTION VALUE='13'>1 PM</OPTION>
<OPTION VALUE='14'>2 PM</OPTION>
<OPTION VALUE='15'>3 PM</OPTION>
<OPTION VALUE='16'>4 PM</OPTION>
<OPTION VALUE='17'>5 PM</OPTION>
<OPTION VALUE='18'>6 PM</OPTION>
<OPTION VALUE='19'>5 PM</OPTION>
<OPTION VALUE='20'>7 PM</OPTION>
<OPTION VALUE='21'>8 PM</OPTION>
<OPTION VALUE='22'>9 PM</OPTION>
<OPTION VALUE='23'>10 PM</OPTION>
<OPTION VALUE='24'>11 PM</OPTION>
</SELECT>
<P></div>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~ SHOW MONTHLY SCHEDULE OPTIONS ~~~~~~~~~~~~~~~~~~~~~~~~ -->
 <div id='frequencyField_DoM'
	style='
	padding-left:30px;
	padding-top: 12px;
    padding-right: 30px;
    padding-bottom: 13px; 
    display:none; background-color:#fbe8f3; border-style:ridge; border-color:#67b4fb;border-width:5px;  '>  
<FONT face='Arial' size=2 color=black>&nbsp; <BR>
<select name='$p_OR_cg_DoM' required   style='background-color:$BACKGROUND_COLOR_of_textFIELD_ONLY; width:222px; '>
<option selected hidden value=''>Select The Day Of The Month</option>

<option value='01'> 01</option> 
<option value='02'> 02</option> 
<option value='03'> 03</option> 
<option value='04'> 04</option> 
<option value='05'> 05</option> 
<option value='06'> 06</option> 
<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> 
<option value='23'> 23</option> 
<option value='24'> 24</option> 
<option value='25'> 25</option> 
<option value='26'> 26</option> 
<option value='27'> 27</option> 
<option value='28'> 28</option> 
<option value='29'> 29</option> 
<option value='30'> 30</option>
</select>

<P>
<SELECT NAME='$$p_OR_cg_HOUR' SIZE='1' required $STYLE_COLOR_of_textFIELD />
<OPTION VALUE='' hidden >Which Hour? </OPTION>
<OPTION VALUE='00'>MIDNIGHT</OPTION>
<OPTION VALUE='01'>1 AM</OPTION>
<OPTION VALUE='02'>2 AM</OPTION>
<OPTION VALUE='03'>3 AM</OPTION>
<OPTION VALUE='04'>4 AM</OPTION>
<OPTION VALUE='05'>5 AM</OPTION>
<OPTION VALUE='06'>6 AM</OPTION>
<OPTION VALUE='07'>7 AM</OPTION>
<OPTION VALUE='08'>8 AM</OPTION>
<OPTION VALUE='09'>9 AM</OPTION>
<OPTION VALUE='10'>10 AM</OPTION>
<OPTION VALUE='11'>11 AM</OPTION>
<OPTION VALUE=''> </OPTION>
<OPTION VALUE='12'>NOON</OPTION>
<OPTION VALUE='13'>1 PM</OPTION>
<OPTION VALUE='14'>2 PM</OPTION>
<OPTION VALUE='15'>3 PM</OPTION>
<OPTION VALUE='16'>4 PM</OPTION>
<OPTION VALUE='17'>5 PM</OPTION>
<OPTION VALUE='18'>6 PM</OPTION>
<OPTION VALUE='19'>5 PM</OPTION>
<OPTION VALUE='20'>7 PM</OPTION>
<OPTION VALUE='21'>8 PM</OPTION>
<OPTION VALUE='22'>9 PM</OPTION>
<OPTION VALUE='23'>10 PM</OPTION>
<OPTION VALUE='24'>11 PM</OPTION>
</SELECT>
<P></div>

<P><HR><P>

<button type='submit' form='f1'  name='f1' id='f1'  
style='height:26;width:380;
font-family:Arial;
font-size:12px;
color:#FFFFFF;
border:#0280d9;
border-style: solid;
border-width:2px;  
border-radius:8px;
background: linear-gradient(to bottom, #ff9933 30%, #663300 100%);
'>SAVE</button> 
</form>
<P>
<P><P>
<P>
</TD></TR></TABLE>

";?>

Open in new window

LVL 1
sasnaktivAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi,

you have several errors

(index):1 An invalid form control with name='p_DoW' is not focusable.
(index):1 An invalid form control with name='p_TASK_hour' is not focusable.
(index):1 An invalid form control with name='p_DoM' is not focusable.
(index):1 An invalid form control with name='$p_TASK_hour' is not focusable.
(index):1 An invalid form control with name='p_DoW' is not focusable.
(index):1 An invalid form control with name='p_TASK_hour' is not focusable.
(index):1 An invalid form control with name='p_DoM' is not focusable.
(index):1 An invalid form control with name='$p_TASK_hour' is not focusable.

Use Chrome dev tool right click inspect to see the errors
0
Julian HansenCommented:
Your problem is you have controls on the page with the required attribute that are hidden
p_DoM

You have two selects with a name of p_TASK_hour one inside the hidden block also required.

Because these controls are required and you are not giving them a value (because you can't see them) the form wont submit.

Word of advice - clean up your code.
We can forget for the moment that this style of coding has not been in use for decades - the basic implementation is very untidy. Ignoring the duplication issue above take a look at this line of code

<SELECT NAME='p_TASK_hour' required SIZE='1' required #FFF99 />

Open in new window


Note you have TWO required attributes.

Consider also finding out about conventions with respect to CASE, inline styling and quotations.

Messy code is almost always going to be buggy - take some time to
a) Neaten your code
b) Make sure your document is valid (no doctype specified, no <html> or <body> tags)

Run your site through a validator https://validator.w3.org

The above Reports 27 errors and 9 warnings.

Even after you fix the hidden issue which is the cause of your problem - you are very likely to have other issues.

I can't stress this enough - if you are not writing neat code you are not coding.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sasnaktivAuthor Commented:
Thank you for the enlightenment.
Sas
0
Julian HansenCommented:
You are welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.