M neha M neha - 6 months ago 28
jQuery Question

Insert a form inside a jquery dialog box

Friends,I want a dialog box that can accept values from the user.I have tried creating one and succeeded to an extent but the problem is that whatever i want to display in my dialog box ,it gets displayed into it as well as in my body section.Please tell me how can i display that form inside my dialog box only.
Thanks in advance.
Here is my code-

<body>
<div id="add_dialog" title="New Entry">
<form >
<p>
Name:<input type="text" name="name" /></p>
<p> Group:<select><option value="p">p</option>
<option value="s">s</option></select></p>
</form>
</div>
</body>


My Jquery-

$('#add_dialog').dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
},
buttons: {
"ADD": function() {
$(this).dialog('close');
alert("added to the list");
},
"CANCEL": function() {
$(this).dialog('close');
alert("Select name from the list");
}
}
});

Answer

Just add display:none style to add_dialog dialog div. so that it will not appear in main screen but in dialog box it will be displayed.

<div id="add_dialog" title="New Entry" style="display:none;">
  <form >
    <p>
    Name:<input type="text" name="name" /></p>
   <p> Group:<select><option value="p">p</option>
    <option value="s">s</option></select></p>
 </form>
</div>