javascript jquery对话框中的textArea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26059711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
textArea inside jquery dialog box
提问by user3684675
How can i create a text areainside a dialog box and that text area should be mandatory field created using jQuery UI. Below is the code through which i am creating submit and close buttons on the dialog box, but could not able to create text area which should be mandatory field when the user click on submit button through that code.Please suggest. Please find the working sample http://jsfiddle.net/M4QM6/34/.
如何在对话框内创建文本区域，并且该文本区域应该是使用 jQuery UI 创建的必填字段。下面是我在对话框上创建提交和关闭按钮的代码，但是当用户通过该代码单击提交按钮时，无法创建应该是必填字段的文本区域。请建议。请找到工作示例http://jsfiddle.net/M4QM6/34/。
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");
}
}
});
}
Thanks.
谢谢。
回答by adiacob
Insert after the $("#dialog").("html"); the following:
$("#dialog").append('<textarea class="mandatory"></textarea>');
在$("#dialog").("html");之后插入 以下内容：
$("#dialog").append('<textarea class="mandatory"></textarea>');
And before you submit, check for the textarea by his class to have some value.
在你提交之前，检查他的班级的 textarea 是否有一些价值。
if($(".mandatory").text().lenght>0) {
// do submit
} else {
// show error message(eg. Mesaage must not be empty)
}
回答by Spokey
jQuery UI will display in the modal the text/html you put in #dialog
jQuery UI 将在模式中显示您输入的文本/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>回答by Santhosh
You can do it, by adding the textareatag inside html()as below,
你可以做到，通过在textarea里面添加标签html()，如下所示，
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>
You could make it mandatory field by adding requiredattribute
您可以通过添加required属性使其成为必填字段
see the updated Jsfiddlehere
在此处查看更新的Jsfiddle
回答by Luigi Belli
Well... just put a <textarea>inside #dialog:
嗯……只要在<textarea>里面放一个#dialog：
$("#dialog").html("<textarea id="myarea" />");
Validation should be done upon submitting the form:
提交表单时应进行验证：
$('form').submit(function(event) {
if ($("#myarea").text() === "" ) {
event.preventDefault();
}
});
