ALL HTML Select Code - Need Help

Discussion in 'HTML & Website Design' started by AJ Le, Apr 2, 2013.

  1. #1
    Im trying to do something like this site:
    http://www.movie2k.to/Alphas-watch-tvshow-765419.html
    When you pick the season and episode than a video appears to the right.

    So far I have this:
    <center>
    <html>
    <?php
     
    print_r($_POST);
     
    ?>
     
    <head></head>
     
    <body>
     
    <script type="text/javascript">
     
    function setOptions(chosen){
     
    var selbox = document.formName.table;
    selbox.options.length = 0;
     
    if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Select a Episode',' ');
        }
    if (chosen == "1") {
        selbox.options[selbox.options.length] = new Option('S1 - Episode 1','oneone');
        selbox.options[selbox.options.length] = new Option('S1 - Episode 2','onetwo');
        selbox.options[selbox.options.length] = new Option('S1 - Episode 3','onethree');
        selbox.options[selbox.options.length] = new Option('S1 - Episode 4','onefour');
        }
    if (chosen == "2") {
        selbox.options[selbox.options.length] = new Option('S2 - Episode 1','twoone');
        selbox.options[selbox.options.length] = new Option('S2 - Episode 2','twotwo');
        selbox.options[selbox.options.length] = new Option('S2 - Episode 3','twothree');
        selbox.options[selbox.options.length] = new Option('S2 - Episode 4','twofour');
        }
    if (chosen == "3") {
        selbox.options[selbox.options.length] = new Option('S3 - Episode 1','threeone');
        selbox.options[selbox.options.length] = new Option('S3 - Episode 2','threetwo');
        selbox.options[selbox.options.length] = new Option('S3 - Episode 3','threethree');
        selbox.options[selbox.options.length] = new Option('S3 - Episode 4','threefour');
        }
    }
     
    </script>
     
     
    <form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
     
    <select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
        <option value=" " selected="selected">Select a Season</option>
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
        <option value="3">Season 3</option>
    </select>
     
    <select name="table" size="1">
        <option value=" " selected="selected">Select a Episode</option>
    </select>
     
    <input type="Submit" />
     
    </form>
     
     
    </body>
     
    </html>
    </center>
    Code (markup):
    Test my code on this site (If Needed): http://www.draac.com/htmltester.html

    What would I have to do to have a "embedded html video" appear underneath this, after a option is selected.

    (Is it possible to do it all html because I don't know how to make website with all code. I'm using webs.com and hoping this code can work with the html module built in to the website builder on webs.com)
     
    Last edited: Apr 2, 2013
    AJ Le, Apr 2, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, you've got a lot of problems, most of it stemming from what you are already aware, you don't know HTML, or CSS, or proper markup. Just the CENTER tag around HTML+BODY, tags don't go outside HTML... so CENTER belongs INSIDE BODY not around it or it's parent... NOT that any website written after 1998 should even have the CENTER tag on it!!! ... and that's not even addressing what you are trying to do.

    Your method of adding to the SELECT doesn't actually empty it properly, and is a bit too convoluted for it's own good. To be frank I'm wondering why this is even a FORM since you're not really submitting, and the whole thing falls apart miserably if scripting is disabled.

    Much as with your other thread, I'd probably switch all those to anchors, show them all if scripting doesn't load, use a class swap to hide the 'not selected' ones and probably add the season check with the scripting...

    But really that's all over your head from the sounds of things. You really are going to have to learn a LOT more before attempting 'stunts' like this one. That you're using some goofy site builder instead of building code normally is proof enough of that.
     
    deathshadow, Apr 3, 2013 IP
  3. usman.siddiqui

    usman.siddiqui Greenhorn

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    <div id="content">
     
     
        
       
    <div id="menu" style="width: 229px; margin-top:7px;">
     
    <table style="margin-left: 5px;" border="0" cellpadding="0" cellspacing="0" width="225px">
        
     
               <tr>
                   <td style="align: left; padding-bottom:5px;width:80px;">
                       <FORM name="seasonform">
                       <SELECT name="season" onChange="displayEpisodePulldown(this.value);">
                           <OPTION value="1" selected>Season 1</OPTION><OPTION value="2">Season 2</OPTION>
                       </SELECT>
                       </FORM>
                   </td><td style="align: left; padding-bottom:5px;">
                       
                           <div id="episodediv1" style="display:inline">
                               <FORM name="episodeform1">
                                   <SELECT name="episode" style="margin-left:18px;" onChange="gotoEpisode(this.value);">
                                       <OPTION></OPTION>
                                       <OPTION value="tvshows-765419-Alphas.html" selected>Episode 1</OPTION><OPTION value="tvshows-2240387-Alphas.html">Episode 2</OPTION><OPTION value="tvshows-2240391-Alphas.html">Episode 3</OPTION><OPTION value="tvshows-794081-Alphas.html">Episode 4</OPTION><OPTION value="tvshows-2240403-Alphas.html">Episode 5</OPTION><OPTION value="tvshows-815374-Alphas.html">Episode 6</OPTION><OPTION value="tvshows-2240414-Alphas.html">Episode 7</OPTION><OPTION value="tvshows-834265-Alphas.html">Episode 8</OPTION><OPTION value="tvshows-850957-Alphas.html">Episode 9</OPTION><OPTION value="tvshows-860308-Alphas.html">Episode 10</OPTION><OPTION value="tvshows-2240436-Alphas.html">Episode 11</OPTION>
                                   </SELECT>
                               </FORM>
                           </div>
                           <div id="episodediv2" style="display:none">
                               <FORM name="episodeform2">
                                   <SELECT name="episode" style="margin-left:18px;" onChange="gotoEpisode(this.value);">
                                       <OPTION></OPTION>
                                       <OPTION value="tvshows-1503401-Alphas.html" selected>Episode 1</OPTION><OPTION value="tvshows-2469914-Alphas.html">Episode 2</OPTION><OPTION value="tvshows-1522339-Alphas.html">Episode 3</OPTION><OPTION value="tvshows-1569940-Alphas.html">Episode 4</OPTION><OPTION value="tvshows-1707543-Alphas.html">Episode 5</OPTION><OPTION value="tvshows-1696984-Alphas.html">Episode 6</OPTION><OPTION value="tvshows-1749030-Alphas.html">Episode 7</OPTION><OPTION value="tvshows-1772567-Alphas.html">Episode 8</OPTION><OPTION value="tvshows-1831032-Alphas.html">Episode 9</OPTION><OPTION value="tvshows-1888448-Alphas.html">Episode 10</OPTION><OPTION value="tvshows-2654896-Alphas.html">Episode 11</OPTION><OPTION value="tvshows-1989424-Alphas.html">Episode 12</OPTION><OPTION value="tvshows-2012933-Alphas.html">Episode 13</OPTION>
                                   </SELECT>
                               </FORM>
                           </div>
                   </td>
               </tr>
               
           <SCRIPT>
               function clearEpisodePulldown() {document.getElementById('episodediv1').style.display='none';
                       document.forms.episodeform1.episode.selectedIndex=0;document.getElementById('episodediv2').style.display='none';
                       document.forms.episodeform2.episode.selectedIndex=0;
                   return false;
               }
               function displayEpisodePulldown(season) {
                   clearEpisodePulldown();
                   document.getElementById('episodediv'+season).style.display='inline';
                   return false;
               }
               function gotoEpisode(url) {
                   window.location=url;
                   return false;
               }
           </SCRIPT>
           
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-765419-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;background-color:#D0D0D0;"><a href="tvshows-765419-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"style="background-color:#D0D0D0;"><a href="tvshows-765419-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Putlocker Alphas" title="Putlocker Alphas" width="16"> &nbsp;Putlocker</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2240381-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2240381-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2240381-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Videoweed Alphas" title="Videoweed Alphas" width="16"> &nbsp;Videoweed</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2469903-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2469903-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2469903-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Allmyvideos Alphas" title="Allmyvideos Alphas" width="16"> &nbsp;Allmyvideos</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2240383-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2240383-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2240383-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Novamov Alphas" title="Novamov Alphas" width="16"> &nbsp;Novamov</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2240384-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2240384-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2240384-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/divx.gif" alt="Divxstage Alphas" title="Divxstage Alphas" width="16"> &nbsp;Divxstage</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2240380-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2240380-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2240380-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Nowvideo Alphas" title="Nowvideo Alphas" width="16"> &nbsp;Nowvideo</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-1448220-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-1448220-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-1448220-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Filenuke Alphas" title="Filenuke Alphas" width="16"> &nbsp;Filenuke</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2574868-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2574868-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2574868-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/icons/196.gif" alt="Clicktoview Alphas" title="Clicktoview Alphas" width="16"> &nbsp;Clicktoview</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2451945-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2451945-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2451945-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Flashx Alphas" title="Flashx Alphas" width="16"> &nbsp;Flashx</a></td></tr>
     
    <tr id="tablemoviesindex2" onClick="window.location.href = 'tvshows-2577864-Alphas.html';return false;" style="cursor:hand;cursor:pointer;"><td style="padding-left:5px;height:20px;width:80px;"><a href="tvshows-2577864-Alphas.html">Episode 1</a>&nbsp;</td><td align="left" width="150"><a href="tvshows-2577864-Alphas.html" style="margin-left:18px;"><img border=0 style="vertical-align:top;" src="http://img.movie2k.to/img/flashPlayer2.gif" alt="Donevideo Alphas" title="Donevideo Alphas" width="16"> &nbsp;Donevideo</a></td></tr>
     
     
    </table>
     
     
    <div id="xline2"></div>
     
    <!-- MarketGidComposite Start -->
    </div>
     
    <div id="tdmoviesheader"><span style="padding-left: 2px; font-weight: bold;">Mirrors</span><H1 style="padding-left: 191px; font-weight: bold;display:inline;font-size:14px;">Watch movie</H1></div>
     
    <div id="maincontent5">
     
    <div style="width:742px">
     
     
        
        </div>
     
     
     
        
    <script>
    $(document).ready(function() {  
           $('#voting').load('starvote.php?id=765419','',showNewContent);
        function showNewContent() {  
            $('#content').show('normal',hideLoader());  
        }  
        function hideLoader() {  
            $('#load').fadeOut('normal');  
        }  
        return false;  
    });  
    </script>
    <div style="min-height:170px;">
    <span style="font-size:18px;">
        <H1 style="font-size:18px;display:inline;">
            <a href="http://www.movie2k.to/Alphas-watch-tvshow-765419.html" style="color:#000000;">
                Alphas<span style="font-weight:100;">, Season 1, Episode 1</span>        </a>
        </H1>
        &nbsp;<img src="http://img.movie2k.to/img/us_flag_small.png" width=24 height=14 border=0>&nbsp;&nbsp;
            </span>
    <div class="moviedescription">
        When a witness is inexplicably murdered in a locked room at a federal courthouse, Dr. Lee Rosen is put on the case...&nbsp;</div>
     
    <BR>
    <BR>
    <BR>
    </div>
     
        
        <BR>
        <div style="display:none" id="help1">
            <BR>
                        <img src="http://img.movie2k.to/img/flashPlayer2.gif" width="15" height="15" border="0" /> The movie does not play properly?<BR>
                You need the Flash Web-Player to watch Flash movies! <a href="http://get.adobe.com/flashplayer/" target="_blank">Click here to download it for free!</a>
                <BR>
                        <img src="http://img.movie2k.to/img/divx.gif" width="15" height="15" border="0" /> 
            <img src="http://img.movie2k.to/img/flashPlayer2.gif" width="15" height="15" border="0" /> 
            The movie stream is too slow?<BR>
            Check the mirror links on the left menu. Here you see hoster listed, which might be faster!        <BR>
        </div>
        <BR>    
     
       <div id="emptydiv">
         <iframe src="http://www.putlocker.com/embed/3C34854E049B41DA" width="600" height="360" frameborder="0" scrolling="no"></iframe>
         <BR>
       </div><div id="underplayer">
                </div>
       <div id="details">
            <div style="height:5px;">&nbsp;</div>
                    IMDB Rating: <a href="http://www.imdb.com/title/tt1183865" target="_blank">7.20</a>&nbsp;| 
                                                   <SCRIPT>
                    $(document).ready(function(){
                        $("#offlinevote").click(function () {
                            if (confirm('REPORT AS OFFLINE?')) {
                                $.get('offline.php?id=765419');
                            }
                            return FALSE;
                        });
                    });
                    </SCRIPT>
                    <a href="#" rel="nofollow" id="offlinevote"><u style="font-size:12px; vertical-align:top;" >REPORT AS OFFLINE</u></a> 
                        
                    <BR>
           Genre: 
                       <a href="http://www.movie2k.to/tvshows-genre-1-Action.html">Action</a>
            ,             <a href="http://www.movie2k.to/tvshows-genre-2-Drama.html">Drama</a>
            ,             <a href="http://www.movie2k.to/tvshows-genre-21-Sci-Fi.html">Sci-Fi</a>
            ,             <a href="http://www.movie2k.to/tvshows-genre-23-Thriller.html">Thriller</a>
           &nbsp;|
           Length: 45 minutes&nbsp;|
           Land/Year: USA/2010<BR></span>
                       Director: <a href="movies-regie-Nick+Copus.html">Nick Copus</a> &nbsp;|&nbsp; 
                   Actors: 
            <a href="movies-cast-Ryan+Cartwright.html">Ryan Cartwright</a>, <a href="movies-cast-David+Strathairn.html">David Strathairn</a>, <a href="movies-cast-Malik+Yoba.html">Malik Yoba</a>, <a href="movies-cast-Warren+Christie.html">Warren Christie</a>, <a href="movies-cast-Laura+Mennell.html">Laura Mennell</a>, <a href="movies-cast-Azita+Ghanizada.html">Azita Ghanizada</a>        <BR>
                   <B style="font-weight:bolder;">                </B></div>
       <br>
        <BR>
          <!--cached movie.php 04/03/13 06:06:35 900-->
     
    <!-- from cache -->
    <script type="text/javascript" src="http://www.wigetmedia.com/tags/movie2k.js"></script>
    <script>
                function showNewContent() {  
                    $('#content').show('normal',hideLoader());  
                }  
                function hideLoader() {  
                    $('#load').fadeOut('normal');  
                }  
                
                window.setTimeout("$('#movieviews').load('user_movieviews.php?movieid=765419');", 120000);
                
            </script>
     
     
    </div>
     
    </div>
    Code (markup):
    I have copy all scripts and codes.Just you need to replace links and read the script carefully hope you would get it.you can use editor for it.

    Regards
     
    usman.siddiqui, Apr 3, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Tables for layout, static style in the markup, event handlers on non-render elements (TR), using the same ID more than once (complete gibberish), HTML 3.2 mixed with 4 elements, non-breaking spaces in empty DIV doing margin or padding's job, jquery bloat (for something that would likely be less code without the fat bloated library)...

    In other words how NOT to build a website :(
     
    deathshadow, Apr 3, 2013 IP