Databases
StackOverflow2013
Postsdbo
POForm not being displayed in pop-up window #Jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm not being displayed in pop-up window #Jquery
    text
    copied!<p>I'm a jquery/javascript beginner. I have to accept a few details in a pop-up form (On clicking the "Add an employee" button). The form isnt being displayed in the pop-up. Infact the popup itself isnt coming. I know im going drastically wrong somewhere, can someone please help! I've been stuck on this issue since a while now. Here's my code:</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Add an Employee!!&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt; &lt;style&gt; body { font-size: 80.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:1; border:1; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } &lt;/style&gt; &lt;script&gt; $(function() { var empid = $( "#empid" ), empname = $( "#empname" ), empdesig = $( "#empdesig" ), $( "#add-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "Add Employee Details": function() { var bValid = true; if ( bValid ) { $( "#employees tbody" ).append( "&lt;tr&gt;" + "&lt;td&gt;" + empid.val() + "&lt;/td&gt;" + "&lt;td&gt;" + empname.val() + "&lt;/td&gt;" + "&lt;td&gt;" + empdesig.val() + "&lt;/td&gt;" + "&lt;/tr&gt;" ); $( this ).dialog( "close" ); } }, "Cancel": function() { $( this ).dialog( "close" ); }, "Close": function() { $( this ).dialog( "close" ); } }); $( "#add-employee" ) .button() .click(function() { $( "#add-form" ).dialog( "open" ); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="add-form" title="Add an Employee"&gt; &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Provide Employee details:&lt;/legend&gt; &lt;label for="empid"&gt;Employee ID&lt;/label&gt; &lt;input type="text" name="empid" id="empid"&gt; &lt;label for="empname"&gt;Employee Name&lt;/label&gt; &lt;input type="text" name="empname" id="empname"&gt; &lt;label for="empdesig"&gt;Employee Designation&lt;/label&gt; &lt;input type="text" name="empdesig" id="empdesig"&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;h1&gt;Existing Employees:&lt;/h1&gt; &lt;table id="employees" &gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Employee ID&lt;/th&gt; &lt;th&gt;Employee Name&lt;/th&gt; &lt;th&gt;Employee Designation&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Sandeep Nagpure&lt;/td&gt; &lt;td&gt;Team Lead&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;button id="add-employee"&gt;Add an Employee!&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload