Как получить пользовательский ввод из диалогового окна JQuery UI

0

У меня есть эта страница на английском языке, в которой пользователь должен ввести английскую фразу в форму. Форма находится в модальном диалоге, который вызывается щелчком по значку. Все работает до момента отображения формы в диалоговом окне, но я не знаю, как получить доступ к пользовательскому вводу, которое будет проверяться на регулярное выражение. Вот код jQuery:

jQuery(document).ready(function() {
  var englishTextId = "";
  var t2e_dlog =  jQuery("div#t2e_dialog").dialog({
      autoOpen: false,
      modal: true,
      position: "center",
      resizable: false,
      draggable: false,
      dialogClass: "t2e_dlog",
      height: 140,
      width: 380,
      create: function() {                                 
          jQuery(this).parents(".ui-dialog")
         .css("border", "solid black 1px")                            
          .css("background", "#ece6ff")
          .css("border-radius", "4px")            
          .find(".ui-dialog-content")
          .css("font-family", "verdana")
          .css("font-size", "0.65em")
          .css("font-style", "normal")
          .css("color",   "#1901B2")
          .css("padding", "1px")
          .find(".ui-dialog-header")
          .css("display","none");       
      }
  });

  jQuery("span.t2e_icon").on("click", function(evnt) { 
     t2e_dlog.dialog("open");
     evnt.stopPropagation();
    var elementId = evnt.target.id;
     englishTextId = ("span#t1ee" + elementId.substring(7));
     regexId = ("regex" + elementId.substring(7));
     // to obscure text associated with the dialog box
     jQuery(englishTextId).css({"border-radius" : "3px","background" : "blue", "color" : "blue"});
   });  

   jQuery(function() {
      jQuery( "div#t2e_dialog" ).dialog({dialogClass: 't2e_dialog_style1'});
      // removes the dialog box title bar   
      jQuery("#ui-dialog-title-dialog").hide();
      jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header');
      var input ='<div id="t2e_modal"><p>Please enter the English text here</p><form id="t2e_form" action="#"><input type="text" id="t2e_w" name="t2e_w" size=50><input id="t2e_submit_btn" type="submit" value="Submit"></form></div>';
      jQuery("div#t2e_dialog").append(input);
  }); 

  // unobscures the text         
  jQuery(function() {    
      jQuery("div#t2e_dialog").dialog({
       beforeClose: function( event, ui ) {
         jQuery(englishTextId).css({"border-radius" : "3px","background" : "", "color" : ""});
       }
     });   
 });   
});

Любая помощь приветствуется.

  • 0
    Весь этот код можно заменить prompt('Please enter the English text here') <- Это как лучший ответ!
  • 0
    Можете ли вы предоставить скрипку ???
Показать ещё 1 комментарий
Теги:
modal-dialog
input

1 ответ

0
Лучший ответ

Вот пример с событием keyup. Но вы можете связать любые доступные события:

jQuery("body").on("keyup", "#t2e_w", function() {
  var input_user = jQuery('#t2e_w').val();
  console.log(input_user);
  //reg expression here ...
});

Сценарий: http://jsfiddle.net/j6R22/22/

Поделиться
  • 0
    Ввод отображается в консоли, но как получить его в переменной? var user_input = jQuery ('# t2e_w'). val (); не работает
  • 0
    Я обновил Скрипку. "var user_input = jQuery ('# t2e_w'). val ();" работает ...
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню