CODEWITHSUNDEEP
javascripthtmlforms
Mohammad Dohadwala
Mohammad Dohadwala

Reputation: 311

how to implement JS to two pieces of HTML code?

For example: i have two different pieces of HTML codes, one is an embedded YouTube video:

<iframe width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>

and this is a question about the video:

<form>
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>

What i wanna do now, is when a user navigates to this page, he is gonna see the video first, and then after watching the video he will click on next and the question will appear.

I don't want the next button to link to a different page where the question is, the question has to load on the same page.

The simplest form i can put this in that,

Upvotes: 0

Views: 124

Answers (3)

Antoine
Antoine

Reputation: 2807

You can do it like this:

<iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>
<form id="form" style="display:none;">
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>
<a href="#" id="next">Next</a>

And the js:

document.getElementById('next').addEventListener('click', function() {
    document.getElementById('video').style.display = 'none';
    document.getElementById('next').style.display = 'none';
    document.getElementById('form').style.display = 'block';
});

Demo here: http://jsfiddle.net/Fs73d/2/

Upvotes: 1

tymeJV
tymeJV

Reputation: 104795

Add a button quickly, probably below the iframe:

<input type="button" value="Next" id="btnNext"/>

Make sure that your form is hidden when the page loads, you can do this a number of ways, I'll just add some inline CSS for times sake:

<form style="display: none;">

I'm adding an ID to your iFrame, this will make it easier to target:

<iframe id="iYoutubeVid" ../>

Now for the JS:

document.getElementById("btnNext").onclick = function() {
    document.getElementById("iYoutubeVid").style.display = "none";
    document.getElementById("btnNext").style.display = "";
}

The "Next" button will always be available to click with this example. I'd suggest the Youtube API if you're looking for something more complex.

Upvotes: 0

Joel Murphy
Joel Murphy

Reputation: 2512

The best way I can think of doing this, would be to use the Chromeless Youtube Player API. This would allow you to add an event handler through JS to check for when the video has finished playing. You could then proceed to show the form.

This similar question may be of help to you.

Upvotes: 0

Related Questions