jquery對話框中的textArea

如何在對話框中創建文本區域，並且該文本區域應該是使用jQuery UI創建的必填字段。以下是我在對話框中創建提交和關閉按鈕的代碼，但是當用戶通過該代碼單擊提交按鈕時，無法創建應爲必填字段的文本區域。請提示。請找到工作示例http://jsfiddle.net/M4QM6/34/。jquery對話框中的textArea

function showDialog1(){ 
     $("#dialog").html(""); 
     $("#dialog").dialog("option", "title", "Loading....").dialog("open"); 
     $("span.ui-dialog-title").text('title here'); 
     $("#dialog").dialog({ 
      autoOpen: false, 
      resizable: true, 
      width:"350", 
      height:300, 
      modal: true, 
      buttons: { 
       "Submit": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }

謝謝。

來源

2014-09-26 user3684675

在'＃'dialog'把div'一個'textarea'與'id'。添加一個類來隱藏'div'。刪除$（「＃dialog」）。html（「」）;'。檢查按鈕事件中的'textarea' valie。 – 2014-09-26 12:42:05

你可以做到這一點，通過增加內html()，如下textarea標籤，

Dialog1<input type="submit" value="dialog1" onclick="return showDialog1()"/> 
<div id="dialog"></div> 
<br> 
    <script> 
       function showDialog1(){ 
     $("#dialog").html("<textarea name="testArea" required cols='5' rows='3'>your text here</textarea>"); 
      $("#dialog").dialog("option", "title", "Loading....").dialog("open"); 
      $("span.ui-dialog-title").text('title here'); 
      $("#dialog").dialog({ 
       autoOpen: false, 
       resizable: true, 
       width:"350", 
       height:300, 
       modal: true, 
       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     } 
    </script>

您可以通過添加required屬性

看到更新Jsfiddle這裏

來源

2014-09-26 12:43:48

好讓它必填字段...只需在#dialog內部放置一個<textarea>：

$("#dialog").html("<textarea id="myarea" />");

驗證應在提交的形式完成：$("#dialog").("html")後

$('form').submit(function(event) { 
    if ($("#myarea").text() === "") { 
     event.preventDefault(); 
    } 
});

來源

2014-09-26 12:49:10

插入;如下： $("#dialog").append('<textarea class="mandatory"></textarea>');

並且在你提交之前，請檢查textarea是否有一定的價值。

if($(".mandatory").text().lenght>0) { 
// do submit 
} else { 
// show error message(eg. Mesaage must  not be empty) 
}

來源

2014-09-26 12:49:16 adiacob

jQuery用戶界面將在模態顯示的文本/ HTML你把#dialog

$(function() { 
 
    $("#dialog").dialog({ 
 
     autoOpen: false, 
 
     resizable: true, 
 
     width: "350", 
 
     height: 300, 
 
     modal: true, 
 
     buttons: { 
 
      "Close": function() { 
 
       // if textarea is not empty close the modal and do something with the value 
 
       if ($(this).find('textarea').val().length) $(this).dialog("close"); 
 
       else $(this).find('textarea').css({borderColor: 'red'}); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 
function showDialog1() { 
 
    $('#dialog').find('textarea').val(''); // clear textarea on modal open 
 
    $("#dialog").dialog("option", "title", "Loading....").dialog("open"); 
 
    $("span.ui-dialog-title").text('title here'); 
 
}

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
 

 
Dialog1 
 
<input type="submit" value="dialog1" onclick="return showDialog1()" /> 
 
<div id="dialog"> 
 
    <p> 
 
     <textarea></textarea> 
 
    </p> 
 
</div> 
 
<br>

來源

2014-09-26 12:50:40 Spokey

jquery對話框中的textArea

回答

相關問題