javascript - 视频结束时提交表格

Question

基本上我有一个表单需要提交才能显示网站的下一部分，在这种情况下是在视频播放和结束时，值是通过 POST 提交的，所以我不能只如果我使用 GET ie，我可以硬编码 URL。 thecycle.ie/test02.php?click='场景 09'。 EventListener 有效，但我无法让它提交表单。

function listen(evnt, elem, func)
        {
            if (elem.addEventListener)
            elem.addEventListener(evnt, func, false);
            else if (elem.attachEvent)
        {
        var r = elem.attachEvent("on" + evnt, func);
            return r;
        }
        else window.alert("I'm sorry, I'm afraid I can't do that.");
        }

        listen("ended", document.getElementById("bgvid"), changePage);

        function changePage() {

        document.getElementById('formID').submit(); // SUBMIT FORM
        }

下面是全文

<form name="formID" id="formID" method="post" action="test02.php">
    <input type="hidden" id="bgstate" name="bgstate" value="1">
    <input type="hidden" id="vostate" name="vostate" value="">
    <input type="hidden" id="choice" name="choice" value="0">

    <script type="text/javascript">     
        $(document).ready(function() {
        var bgAudio = document.getElementById("background_audio");
            if(bgAudio) {

                bgAudio.volume = 1.0;
                bgAudio.play();
                }
        }); 
    </script>
    <script type="text/javascript">
            function PlayBG()
                                {
        document.getElementById("bgstate").value = "0";
        var bgAudio = document.getElementById("background_audio");
        bgAudio.volume = 1.0;
        bgAudio.play();
                }               
        function StopBG()
            {
        document.getElementById("bgstate").value = "1";
        var bgAudio = document.getElementById("background_audio");
                bgAudio.volume = 0.0;
                bgAudio.pause();
                bgAudio.currentTime = 0;
            }
            </script>

    <div id="timeline">
    <!-- top point of ogham -->
    <img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
    <input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
    <input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
    <input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
    <!-- bottom point of ogham -->
    <img src="img/timeline/timeline_end.png" alt="timeline"><br>
    </div>
    <div id="banner">
    <a href="index.php"><img src="img/smalllogo.png" alt="the cycle"></a>
    <div class="menu">
        <ul>
            <li>
            <a href="index.php">Home</a>
            </li>
            <li>
            <a href="wiki.php?chosenEntry=wiki" target="_blank">Wiki</a>
            </li>
            <li>
            <a href="about.php">About</a>
            </li>
        </ul>
        </div>
        <div id="music">
        <img src="img/music.png" alt="music">&nbsp;
        <input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
        <input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
    </div>
        </div>      


    <script type="text/javascript">
        function PlayVO18()   
            {
            document.getElementById("vostate").value = "0";
            var voAudio = document.getElementById("voiceover_audio18");
            var bgAudio = document.getElementById("background_audio");
            var oldBGVolume = bgAudio.volume;
                voAudio.volume = 1.0;
                voAudio.play();
                }
        function StopVO18()
                {
        document.getElementById("vostate").value = "1";
        var voAudio = document.getElementById("voiceover_audio18");
                voAudio.volume = 0.0;
                voAudio.pause();
                voAudio.currentTime = 0;
                        }
                    </script>
        <audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>

        <audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>    

        <video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">

        <source src="vids/balorlugh_01.webm" type="video/webm">
        <source src="vids/balorlugh_01.mp4" type="video/mp4">
        </video>

        <div id="decision">
        <div class="container">

        <div class="toggle18">

        <h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>

        <p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
        <br>
        <div class="toggle">

        <script type="text/javascript">
        function listen(evnt, elem, func)
            {
            if (elem.addEventListener)
                elem.addEventListener(evnt, func, false);
            else if (elem.attachEvent)
                    {
            var r = elem.attachEvent("on" + evnt, func);
                    return r;
                    }
            else window.alert("I'm sorry, I'm afraid I can't do that.");
                }

            listen("ended", document.getElementById("bgvid"), changePage);

            function changePage()
                                {
            document.getElementById('formID').submit(); // SUBMIT FORM
                    }
            </script>
            <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
            <input type="hidden" id="submit" name="bgstate" value="SCENE 09">


                </div>
                </div>

            </div>
        </div>

    <script type="text/javascript">
        var menu_elements = document.querySelectorAll('.toggle'),
        menu_length = menu_elements.length;
        for (var i = 0; i < menu_length; i++) 
            {
                menu_elements[i].addEventListener('click', function (e) 
                    {
        var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
        Array.prototype.filter.call(target.parentNode.children, function (siblings) 
            {
        siblings.style.display = 'none'; // hide sibling elements
            });
        target.style.display = 'block'; // show clicked element
            });
        }

        function MakeChoice08()   
            {
                document.getElementById("choice").value = "08";
            }
        function MakeChoice04()   
            {
                document.getElementById("choice").value = "04";
            }
    </script>
    </form>

Answer 1

您不能在 NAME 或 ID 属性中将“提交”与 submit() 方法一起使用，因为它会混淆它认为由名称或 ID 引用的对象和方法。

只需更改<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>到

<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>

和<input type="hidden" id="submit" name="bgstate" value="SCENE 09">到

<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">