textArea inside jquery dialog box

Question

How can i create a text area inside 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/ .

    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.

Answer 1

Insert after the $("#dialog").("html") ; the following: $("#dialog").append('<textarea class="mandatory"></textarea>') ;

And before you submit, check for the textarea by his class to have some value.

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

Answer 2

You can do it, by adding the textarea tag inside html() as below,

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 required attribute

see the updated Jsfiddle here

Answer 3

Well... just put a <textarea> inside #dialog :

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

Validation should be done upon submitting the form:

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

Answer 4

jQuery UI will display in the modal the text/html you put in #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>