添加視頻網址，並提供實時預覽選項

Question

我正在創建一個允許用戶輸入視頻網址的表單。標準輸入表單，接受一個URL，如：

http://video.google.com/videoplay?docid=1299927595688205543 

我想添加一個按鈕（在窗體內，它說類似[預覽視頻]））。基本上該按鈕/鏈接追加它們輸入到輸入字段中的鏈接，此代碼：

<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a > 

這是可用之前形成的提交。

Answer 1

<form id="video_upload_form" action=""> 
    <label for="video_input_box">Video URL</label> 
    <input type="text" id="video_input_box" value="" /> 

    <input type="submit" value="Add Video" /> 
</form> 

<p><a href="#" id="video_preview" class="lightbox">Preview Video</a></p> 

<script type="text/javascript"> 
$().ready(function(){ 
    $('#video_upload_form').submit(function(){ 
     var video_url_params = '&lightbox[width]=610&lightbox[height]=360'; 
     var video_url = $('#video_input_box').val() + video_url_params; 
     $('#video_preview').attr('href', video_url); 
     return false; 
    }); 
}); 
</script> 

而且這裏是作爲一個的jsfiddle：​​3210

你需要做的將其放入預覽鏈接之前，由用戶提供的URL一些驗證，但我會離開的那部分最多你，因爲你沒有在你的問題中要求幫助。