如果满足输入值则显示div而不重新加载页面

Question

I have an input field where the expected value is a youtube link. I need to make it so that once a youtube link is put into the input, it automatically shows a div I've created (which shows the video's thumbnail, title, and description) without reloading the page.

Here's the HTML code for the input and where the div needs to be placed:

<div class="formRow">
  <div class="grid2"><label>Link</label></div>
  <div class="grid10" style="position:relative">
    <input name="link" type="text" placeholder="Link to the video..." />
  </div>
  <div class="clear"></div>
</div>

<!-- THE FOLLOWING PHP CODE CONTAINS THE DIV THAT NEEDS TO BE SHOWN -->
<?php
  $url = $_POST['link'];
  parse_str( parse_url( $url, PHP_URL_QUERY ), $youtube_id );

  define('YT_API_URL', 'http://gdata.youtube.com/feeds/api/videos?q=');

  $video_id = $youtube_id['v'];

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, YT_API_URL . $video_id);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  $feed = curl_exec($ch);
  curl_close($ch);

  $xml = simplexml_load_string($feed);

  $entry = $xml->entry[0];

  if(!$entry) { exit('Error: No such video exists.'); }
  $media = $entry->children('media', true);
  $group = $media->group;

  $title = $group->title;
  $desc = $group->description;
  $thumb = $group->thumbnail[0];
  list($thumb_url) = $thumb->attributes();
  $content_attributes = $group->content->attributes();
  $vid_duration = $content_attributes['duration'];
  $duration_formatted = str_pad(floor($vid_duration/60), 1, '0', STR_PAD_LEFT) . ':' . str_pad($vid_duration%60, 1, '0', STR_PAD_LEFT);

  $image = WideImage::load('' . $thumb_url . '');
  $resizedImage = $image->resize(320, 180, 'outside')->crop('center', 'middle', 320, 180);
  $resizedImage->saveToFile("../../assets/video_images/" . $video_id . ".jpg");

  echo '<div class="preview-container">
    <div class="preview-image">
        <img src="../../assets/video_images/' . $video_id . '.jpg" width="185" height="104" />
        <div class="preview-timestamp">' . $duration_formatted . '</div>
    </div>
    <div class="preview-title"><a href="https://www.youtube.com/watch?v=' . $video_id . '">' . $title . '</a></div>
    <div class="preview-desc">' . $desc . '</div>
    <div class="clear"></div>
  </div>';
?>

So again, what I need this to do is, once the youtube link has been put into the input field, it should automatically show the div that's echoed in the PHP code without refreshing the page (using AJAX, etc).

Please help.

Answer 1

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 $('input[name=link]').blur(function(){
  $.ajax({
            type: "POST",
            url: "get_video.php",
            data: { link: $(this).val() },
            success:function( v ) {
                        $('#video').html(v);
                    }
        });
 });
});
</script>

<div class="formRow">
  <div class="grid2"><label>Link</label></div>
  <div class="grid10" style="position:relative">
    <input name="link" type="text" placeholder="Link to the video..." />
  </div>
  <div class="clear"></div>
</div>
<div id="video"></div>

Try this please...I have used "blur" function therefore you need to click outside textbox after pasting the youtube link or press "tab" button.