CODEWITHSUNDEEP
javascriptjqueryhtmldialog
user5800754
user5800754

Reputation:

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");
        }
    }
});

Upvotes: 1

Views: 6095

Answers (2)

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

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>

Upvotes: 1

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

It seems to just work fine. Make sure, you have used proper id

$('#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");
    }

  }


});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<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>

Upvotes: 0

Related Questions