Javascript и JQuery - вставка DOM в JQuery

Question

Хорошо, вот моя проблема. У меня есть окно, которое показывает FB Pic пользователя, чтобы подтвердить его ввод, но у меня возникла проблема с выяснением того, как получить то, что пользователь вводит в поле ввода, чтобы увидеть в ссылке, которая находится внутри Функция JQuery.

Вот сценарий

  $("#fb").blur(function(){
   $.fancybox(
   '<img src="http://graph.facebook.com/ *user's input here* /picture?type=large"/> <br> is that you? ',
      {
       'autoDimensions' :  true,
       'transitionIn'   : 'none',
       'transitionOut'  : 'true'
      }
    );
   });

Вот HTML-форма

<input type="text" id="fb" size="10" name="fb" value="" />

Как я могу получить то, что напечатано в этом поле ввода, чтобы появиться в этой ссылке в скрипте при вызове функции?

Answer 1

Вы должны быть в состоянии использовать $(this).val():

$("#fb").blur(function() {
    var t   = $(this).val();
    var img = '<img src="http://graph.facebook.com/'
            + encodeURIComponent(t)
            + '/picture?type=large"/>';
    $.fancybox(img + '<br/>is that you?', {
        //...
    });
});

Если, конечно, ваш текстовый ввод <input id="fb" type="text">, тогда this будет тем вводом текста внутри обработчика размытия.

Answer 2

Если я понимаю, о чем вы спрашиваете, вы извлекаете значение из поля ввода, а затем просто используете добавление строки для построения нужной вам строки следующим образом:

 $("#fb").blur(function(){
   var text = this.value;
   $.fancybox(
   '<img src="http://graph.facebook.com/' + text + '/picture?type=large"/> <br> is that you? ',
      {
       'autoDimensions' :  true,
       'transitionIn'   : 'none',
       'transitionOut'  : 'true'
      }
    );
   });