如何在不按提交按钮的情况下在表单上键入视频网址后预览视频

Question

Please i need your help!

I am working on a website where users can embedd their videos just by posting their video url. I want the video to show in an iframe or in the same page immediately after typing the video url without clicking on the submit button. This will enable the user to see the preview of their video before hitting the submit button.

<form action="post.php" method="post">

<input  type='url' name='urladdress' >

</form>  

Assuming the url is:

$url= $_POST["urladdress"] 

I know this can be achieved with javascript, jquery or ajax. But I don't know how! Please I really need your help. Thank you very much!

Answer 1

You can bind a change event on the input field. If there is anything changed in the field, a preview iframe will be created if it doesn't exist, or the "src" attribute will update.

An example with jQuery:

$('input[name="urladdress"]').on('change', function() {
    if($('#video-preview').length) {
        $('#video-preview').attr('src', $(this).val());
    } else {
        $(this).after($('<iframe id="video-preview" width="854" height="480" src="' + $(this).val() + '" />'));
    }
});

This example simply add a iframe after the input field.