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
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:
<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> <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> <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> <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>
";?>
Asked:
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
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.
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
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.
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 />
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.
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 trialIt'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.
-
Microsoft ApplicationsCertification: MOS Microsoft Office Specialist - Word 2013 Part … 120 lessons
-
IT AdministrationCertification: ISCAP Information Systems Certification and Accreditati… 16 lessons
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
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