video, form then video in html

Question

video, form then video in html

130 Views Asked by Raul Jacinto At 04 April 2025 at 19:48

I can play a video clip, detect the end of the video and then create a form, and then play another videoclip. My problem is, the form is not reacting correctly, i´ve created the form with a submit button and two radio buttons to select. I am expecting to let the user to do a selection, validate the response and then load the next clip.But the only way to see the form is by using an alert message. code is:

function makeForm(){

    var mypara=document.getElementById("miArea");
    var myform =document.createElement("form");
    myform.id="miid";
    myform.name='registration' ;
    myform.setAttribute("onSubmit","formValidation()");

    var x = document.createElement("INPUT");
    var y = document.createElement("INPUT");
    var z= document.createElement("INPUT");
    var s = document.createElement("br");
    var s1 = document.createElement("br");
    x.setAttribute("type", "radio");
    x.setAttribute ("name","huevos");
    y.setAttribute("type", "radio");
    y.setAttribute ("name","huevos");
    z.setAttribute("type", "button");
    z.setAttribute("value","Submit")
    z.setAttribute("onclick", "formValidation()")
    x.value="revueltos";
    y.value="estrellados";

    //submit button
    var contenido1 = document.createTextNode("Revueltos");
    var contenido2 = document.createTextNode("Estrellados ");

    myform.appendChild(contenido1);
    myform.appendChild(x);
    myform.appendChild (s);
    myform.appendChild(contenido2);
    myform.appendChild(y);
    myform.appendChild(s1);
    myform.appendChild(z);
    mypara.appendChild(myform);
    alert ("antes de crear la forma9");}

function videoEnded(){
    deleteVideo();
    makeForm();
    deleteForm();
    loadVideo();
}
function deleteForm() {
    mform=document.getElementById("miid");
    mform.parentNode.removeChild(mform);
}

/*onEnded is called once the first video ends.
this is the body part*/
<body>
    <p id="miArea">

        <video width="640" height="480" src="reglamento1.mp4" id="video" controls onended="videoEnded()">
            video not supported
        </video>
    </p>
</body>

Hope you can help me out.

Original Q&A

There are 2 best solutions below

**Kevin Peña** · Answer 1

Your code here

deleteVideo();
makeForm();
deleteForm();
loadVideo();

deletes the video, makes the form, and then inmediately destroys it (and loads the video again).

I think you want the deleteForm();loadVideo(); part to be executed when you press the Submit button.

In the onclick attribute from the Submit button you could call a function to do that.

function buttonClick(){
    deleteForm();
    loadVideo();
}

**zipzit** · Answer 2

Two issues.

You must define all functions fully before calling them.
You have to insert the myForm element into the Document Object Model (DOM)

Here is a jsfiddle:

<script>
function endOfVideo(){
    deleteVideo();
    makeForm();
   // deleteForm();
  //  loadVideo();
}

function makeForm(){

    var mypara=document.getElementById("miArea");
    var myform =document.createElement("form");
    myform.id="miid";
    myform.name='registration' ;
    myform.setAttribute("onSubmit","formValidation()");

    var x = document.createElement("INPUT");
    var y = document.createElement("INPUT");
    var z= document.createElement("INPUT");
    var s = document.createElement("br");
    var s1 = document.createElement("br");
    x.setAttribute("type", "radio");
    x.setAttribute ("name","huevos");
    y.setAttribute("type", "radio");
    y.setAttribute ("name","huevos");
    z.setAttribute("type", "button");
    z.setAttribute("value","Submit")
    z.setAttribute("onclick", "formValidation()")
    x.value="revueltos";
    y.value="estrellados";

    //submit button
    var contenido1 = document.createTextNode("Revueltos");
    var contenido2 = document.createTextNode("Estrellados ");

    myform.appendChild(contenido1);
    myform.appendChild(x);
    myform.appendChild (s);
    myform.appendChild(contenido2);
    myform.appendChild(y);
    myform.appendChild(s1);
    myform.appendChild(z);
    mypara.appendChild(myform);
    // alert ("antes de crear la forma9");
    document.body.insertBefore(myform, mypara); 
}

function deleteVideo(){
    var firstVideo = document.getElementById('video');
    firstVideo.parentNode.removeChild(firstVideo);
}

function deleteForm() {
    mform=document.getElementById("miid");
    mform.parentNode.removeChild(mform);
}

</script>

video, form then video in html

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in FORMS

Related Questions in HTML5-VIDEO

Trending Questions

Popular # Hahtags

Popular Questions