javascript - How to generate a segment of a page in html when an element is chosen -
i want when page first loads, below date , week element not visible or accessible; when choose week week element in date part of page, entire rest of page generates automatically.
i know involves javascript, other don't know.
<!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 runat="server"><meta http-equiv="content-type" content="text/html; charset=windows-1252"> <style type="text/css"> <!-- .style1 { font-size: 12px; font-weight: bold; } --> </style> </head> <body> <div id="pagecontainer"> <br class="clearfloat"> <div id="contentarea"> <div id="backgroundlines"> <div id="maincontentadmin"> <div style="width: 830px;text-align: center;"> <div style="margin: 0px auto; width: 280px;"> <div class="contentdiv"> <div id="pagecontainer"> <div id="header"> <!--header--> <h1 style="text-align:left;">after action report</h1> </div> <br class="clearfloat"> <div id="contentarea"> <?php if (!isset($_post["btn_submit"])) { ?> <form action="<?php echo $_server['php_self']; ?>" enctype="multipart/form-data" method="post" id="fileuploader"> <table border="0" cellpadding="4" cellspacing="2" width="500"> <tbody> <!--name text box--> <tr> <td align="left">first , last name</td> <td align="left"> <input type="text" name="name" id="name"> </td> </tr> <!--email text box--> <tr> <td align="left">email address</td> <td align="left"> <input type="text" name="email" id="email"> </td> </tr> <!--date calendar (user chooses first monday of week--> <tr> <td align="left">date</td> <td align="left"> <input type="week" name="week" id="week"> </td> </tr> <br> <h2 style="text-align:left">weekly report</h2> <!--shift drop down box (monday)--> <tr> <td align="left"><b>monday</b> (auto date)</td> <td align="left"> <select name="mondayshift" id="mondayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbm'].style.display='none' this.form['ddltbm'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbm'].style.display='none' this.form['ddltbm'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbm'].style.display='inline' this.form['ddltbm'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (monday)--> <tr> <td align="left"> <input type="text" name="ddstbm" id="ddstbm" style="display: none;"> </td> </tr> <!--dropdown large text box (monday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbm" id="ddltbm" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (tuesday)--> <tr> <td align="left"><b>tuesday</b> (auto date)</td> <td align="left"> <select name="tuesdayshift" id="tuesdayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbt'].style.display='none' this.form['ddltbt'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbt'].style.display='none' this.form['ddltbt'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbt'].style.display='inline' this.form['ddltbt'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (tuesday)--> <tr> <td align="left"> <input type="text" name="ddstbt" id="ddstbt" style="display: none;"> </td> </tr> <!--dropdown large text box (tuesday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbt" id="ddltbt" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (wednesday)--> <tr> <td align="left"><b>wednesday</b> (auto date)</td> <td align="left"> <select name="wednesdayshift" id="wednesdayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbw'].style.display='none' this.form['ddltbw'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbw'].style.display='none' this.form['ddltbw'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbw'].style.display='inline' this.form['ddltbw'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (wednesday)--> <tr> <td align="left"> <input type="text" name="ddstbw" id="ddstbw" style="display: none;"> </td> </tr> <!--dropdown large text box (wednesday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbw" id="ddltbw" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (thursday)--> <tr> <td align="left"><b>thursday</b> (auto date)</td> <td align="left"> <select name="thursdayshift" id="thursdayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbtr'].style.display='none' this.form['ddltbtr'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbtr'].style.display='none' this.form['ddltbtr'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbtr'].style.display='inline' this.form['ddltbtr'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (thursday)--> <tr> <td align="left"> <input type="text" name="ddstbtr" id="ddstbtr" style="display: none;"> </td> </tr> <!--dropdown large text box (thursday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbtr" id="ddltbtr" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (friday)--> <tr> <td align="left"><b>friday</b> (auto date)</td> <td align="left"> <select name="fridayshift" id="fridayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbf'].style.display='none' this.form['ddltbf'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbf'].style.display='none' this.form['ddltbf'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbf'].style.display='inline' this.form['ddltbf'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (friday)--> <tr> <td align="left"> <input type="text" name="ddstbf" id="ddstbf" style="display: none;"> </td> </tr> <!--dropdown large text box (friday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbf" box id="ddltbf" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (saturday)--> <tr> <td align="left"><b>saturday</b> (auto date)</td> <td align="left"> <select name="saturdayshift" id="saturdayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbsa'].style.display='none' this.form['ddltbsa'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbsa'].style.display='none' this.form['ddltbsa'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbsa'].style.display='inline' this.form['ddltbsa'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (saturday)--> <tr> <td align="left"> <input type="text" name="ddstbsa" id="ddstbsa" style="display: none;"> </td> </tr> <!--dropdown large text box (saturday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbsa" id="ddltbsa" style="display: none;"> </textarea> </td> </tr> <!--shift drop down box (sunday)--> <tr> <td align="left"><b>sunday</b> (auto date)</td> <td align="left"> <select name="sundayshift" id="sundayshift" onchange= "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ this.form['ddstbsu'].style.display='none' this.form['ddltbsu'].style.display='inline' } if (this.value=='2' || this.value=='7'){ this.form['ddstbsu'].style.display='none' this.form['ddltbsu'].style.display='none' } if (this.value=='4' || this.value=='6'){ this.form['ddstbsu'].style.display='inline' this.form['ddltbsu'].style.display='none' } "> <option selected disabled hidden value=''></option> <option value="1">in office</option><!--generates large text box--> <option value="2">not scheduled</option> <option value="3">worked remotely</option><!--generates large text box--> <option value="4">on call (not called in)</option><!--generates small text box--> <option value="5">on call (called in)</option><!--generates large text box--> <option value="6">holiday</option><!--generates small text box--> <option value="7">unpaid time off-approved</option> <option value="8">unpaid time off-extreme circumstances</option><!--generates large text box--> <option value="9">sick</option><!--generates large text box--> <option value="10">suspended</option><!--generates large text box--> <option value="11">no show</option><!--generates large text box--> <option value="12">no call/no show</option> <!--generates large text box--> </select> </td> </tr> <!--dropdown small text box (sunday)--> <tr> <td align="left"> <input type="text" name="ddstbsu" id="ddstbsu" style="display: none;"> </td> </tr> <!--dropdown large text box (sunday)--> <tr> <td align = "right"> <textarea rows="10" cols="50" name="ddltbsu" id="ddltbsu" style="display: none;"> </textarea> </td> </tr> <tr> <!--troubled areas large text box--> <tr> <td align = "left"> <h2 style="text-align:left">troubled areas</h2> <textarea rows="10" cols="50" name="problems" id="problems">explain issues occurred here</textarea> </td> </tr> <!--improvement large text box--> <tr> <td align = "left"> <h2 style="text-align:left">improvement</h2> <textarea rows="10" cols="50" name="improvement" id="improvement">explain want better here</textarea> </td> </tr> <!--submit button--> <tr> <td align = "left;"> <input type="submit" name="btn_submit" id="btn_submit" style="width:300px; height:50px; font:bold 25px venetian" value="submit report" > </td> </tr> </tbody></table> </form><br> <?php } else { // user has submitted form if( isset($_post['btn_submit']) ) { $name = $_post['name']; $email = $_post['email']; $week = $_post['week']; $mondayshift = $_post['mondayshift']; $ddstbm = $_post['ddstbm']; $ddltbm = $_post['ddltbm']; if($mondayshift == 1){ $mondayshift = "in office"; } if($mondayshift == 2){ $mondayshift = "not scheduled"; } if($mondayshift == 3){ $mondayshift = "worked remotely"; } if($mondayshift == 4){ $mondayshift = "on call (not called in)"; } if($mondayshift == 5){ $mondayshift = "on call (called in)"; } if($mondayshift == 6){ $mondayshift = "holiday"; } if($mondayshift == 7){ $mondayshift = "unpaid time off-approved"; } if($mondayshift == 8){ $mondayshift = "unpaid time off-extreme circumstances"; } if($mondayshift == 9){ $mondayshift = "sick"; } if($mondayshift == 10){ $mondayshift = "suspended"; } if($mondayshift == 11){ $mondayshift = "no show"; } if($mondayshift == 12){ $mondayshift = "no call/no show"; } $tuesdayshift = $_post['tuesdayshift']; $ddstbt = $_post['ddstbt']; $ddltbt = $_post['ddltbt']; if($tuesdayshift == 1){ $tuesdayshift = "in office"; } if($tuesdayshift == 2){ $tuesdayshift = "not scheduled"; } if($tuesdayshift == 3){ $tuesdayshift = "worked remotely"; } if($tuesdayshift == 4){ $tuesdayshift = "on call (not called in)"; } if($tuesdayshift == 5){ $tuesdayshift = "on call (called in)"; } if($tuesdayshift == 6){ $tuesdayshift = "holiday"; } if($tuesdayshift == 7){ $tuesdayshift = "unpaid time off-approved"; } if($tuesdayshift == 8){ $tuesdayshift = "unpaid time off-extreme circumstances"; } if($tuesdayshift == 9){ $tuesdayshift = "sick"; } if($tuesdayshift == 10){ $tuesdayshift = "suspended"; } if($tuesdayshift == 11){ $tuesdayshift = "no show"; } if($tuesdayshift == 12){ $tuesdayshift = "no call/no show"; } $wednesdayshift = $_post['wednesdayshift']; $ddstbw = $_post['ddstbw']; $ddltbw = $_post['ddltbw']; if($wednesdayshift == 1){ $wednesdayshift = "in office"; } if($wednesdayshift == 2){ $wednesdayshift = "not scheduled"; } if($wednesdayshift == 3){ $wednesdayshift = "worked remotely"; } if($wednesdayshift == 4){ $wednesdayshift = "on call (not called in)"; } if($wednesdayshift == 5){ $wednesdayshift = "on call (called in)"; } if($wednesdayshift == 6){ $wednesdayshift = "holiday"; } if($wednesdayshift == 7){ $wednesdayshift = "unpaid time off-approved"; } if($wednesdayshift == 8){ $wednesdayshift = "unpaid time off-extreme circumstances"; } if($wednesdayshift == 9){ $wednesdayshift = "sick"; } if($wednesdayshift == 10){ $wednesdayshift = "suspended"; } if($wednesdayshift == 11){ $wednesdayshift = "no show"; } if($wednesdayshift == 12){ $wednesdayshift = "no call/no show"; } $thursdayshift = $_post['thursdayshift']; $ddstbtr = $_post['ddstbtr']; $ddltbtr = $_post['ddltbtr']; if($thursdayshift == 1){ $thursdayshift = "in office"; } if($thursdayshift == 2){ $thursdayshift = "not scheduled"; } if($thursdayshift == 3){ $thursdayshift = "worked remotely"; } if($thursdayshift == 4){ $thursdayshift = "on call (not called in)"; } if($thursdayshift == 5){ $thursdayshift = "on call (called in)"; } if($thursdayshift == 6){ $thursdayshift = "holiday"; } if($thursdayshift == 7){ $thursdayshift = "unpaid time off-approved"; } if($thursdayshift == 8){ $thursdayshift = "unpaid time off-extreme circumstances"; } if($thursdayshift == 9){ $thursdayshift = "sick"; } if($thursdayshift == 10){ $thursdayshift = "suspended"; } if($thursdayshift == 11){ $thursdayshift = "no show"; } if($thursdayshift == 12){ $thursdayshift = "no call/no show"; } $fridayshift = $_post['fridayshift']; $ddstbf = $_post['ddstbf']; $ddltbf = $_post['ddltbf']; if($fridayshift == 1){ $fridayshift = "in office"; } if($fridayshift == 2){ $fridayshift = "not scheduled"; } if($fridayshift == 3){ $fridayshift = "worked remotely"; } if($fridayshift == 4){ $fridayshift = "on call (not called in)"; } if($fridayshift == 5){ $fridayshift = "on call (called in)"; } if($fridayshift == 6){ $fridayshift = "holiday"; } if($fridayshift == 7){ $fridayshift = "unpaid time off-approved"; } if($fridayshift == 8){ $fridayshift = "unpaid time off-extreme circumstances"; } if($fridayshift == 9){ $fridayshift = "sick"; } if($fridayshift == 10){ $fridayshift = "suspended"; } if($fridayshift == 11){ $fridayshift = "no show"; } if($fridayshift == 12){ $fridayshift = "no call/no show"; } $saturdayshift = $_post['saturdayshift']; $ddstbsa = $_post['ddstbsa']; $ddltbsa = $_post['ddltbsa']; if($saturdayshift == 1){ $saturdayshift = "in office"; } if($saturdayshift == 2){ $saturdayshift = "not scheduled"; } if($saturdayshift == 3){ $saturdayshift = "worked remotely"; } if($saturdayshift == 4){ $saturdayshift = "on call (not called in)"; } if($saturdayshift == 5){ $saturdayshift = "on call (called in)"; } if($saturdayshift == 6){ $saturdayshift = "holiday"; } if($saturdayshift == 7){ $saturdayshift = "unpaid time off-approved"; } if($saturdayshift == 8){ $saturdayshift = "unpaid time off-extreme circumstances"; } if($saturdayshift == 9){ $saturdayshift = "sick"; } if($saturdayshift == 10){ $saturdayshift = "suspended"; } if($saturdayshift == 11){ $saturdayshift = "no show"; } if($saturdayshift == 12){ $saturdayshift = "no call/no show"; } $sundayshift = $_post['sundayshift']; $ddstbsu = $_post['ddstbsu']; $ddltbsu = $_post['ddltbsu']; if($sundayshift == 1){ $sundayshift = "in office"; } if($sundayshift == 2){ $sundayshift = "not scheduled"; } if($sundayshift == 3){ $sundayshift = "worked remotely"; } if($sundayshift == 4){ $sundayshift = "on call (not called in)"; } if($sundayshift == 5){ $sundayshift = "on call (called in)"; } if($sundayshift == 6){ $sundayshift = "holiday"; } if($sundayshift == 7){ $sundayshift = "unpaid time off-approved"; } if($sundayshift == 8){ $sundayshift = "unpaid time off-extreme circumstances"; } if($sundayshift == 9){ $sundayshift = "sick"; } if($sundayshift == 10){ $sundayshift = "suspended"; } if($sundayshift == 11){ $sundayshift = "no show"; } if($sundayshift == 12){ $sundayshift = "no call/no show"; } $problems = $_post['problems']; $improvement = $_post['improvement']; $email_from = $_post['email']; $to = 'th3on3fr33man@gmail.com'; $email_subject = "$name's aar"; $email_body = "<html> <head> <title>after action report week of $week</title> </head> <body> <header> <h1>after action report week of $week</h1> </header> <tr> <td> <h2>weekly report</h2> <p style = padding-left: 5em> <b>shift type:</b> <i>$mondayshift.</i> <br><br>$ddstbm$ddltbm<br><br> <b>shift type:</b> <i>$tuesdayshift.</i> <br><br>$ddstbt$ddltbt<br><br> <b>shift type:</b> <i>$wednesdayshift.</i> <br><br>$ddstbw$ddltbw<br><br> <b>shift type:</b> <i>$thursdayshift.</i> <br><br>$ddstbtr$ddltbtr<br><br> <b>shift type:</b> <i>$fridayshift.</i> <br><br>$ddstbf$ddltbf<br><br> <b>shift type:</b> <i>$saturdayshift.</i> <br><br>$ddstbsa$ddltbsa<br><br> <b>shift type:</b> <i>$sundayshift.</i> <br><br>$ddstbsu$ddltbsu<br><br> </p> </td> </tr> <tr> <td> <h2>troubled areas</h2> <p style = padding-left: 5em> $problems<br> </p> </td> </tr> <tr> <td> <h2>improvement</h2> <p style = padding-left: 5em> $improvement<br> </p> </td> </tr> <tr> <td> <p> regards,<br><br> $name </p> </td> </tr> </body> </html>"; $headers = array(); $headers[] = "mime-version: 1.0"; $headers[] = "content-type: text/html; charset=iso-8859-1"; $headers[] = "to: michael <th3on3fr33man@gmail.com>"; $headers[] = "from: $name <$email_from>"; $headers[] = "cc: peggy <dexter.morrigan@gmail.com>"; $headers[] = "reply-to: $name <$email_from>"; $headers[] = "subject: {$email_subject}"; $headers[] = "x-mailer: php/".phpversion(); mail($to,$email_subject,$email_body,implode("\r\n", $headers)); } } ?> <br class="clearfloat"> copyright © <script language="javascript" type="text/javascript"> var today = new date() var year = today.getfullyear() document.write(year) </script>
<input type="week" onchange="sub();" name="week" id="week"> where sub javascript call create , display data want in div whenever week changes.
Comments
Post a Comment