title: Opening a dialog box with pre-populated fields (after clicking edit link)
body: <p><strong>(after clicking edit link)</strong> : <strong>java.lang.NumberFormatException: null</strong> comes as error</p>
  
  <p>What I am trying to do is to populate the dialog box that popped up after clicking edit button.I used a plugin for the same.<strong>DEMO</strong> : <a href="http://jsbin.com/amixeb/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/amixeb/1/edit?html,css,js,output</a> .I only want to <strong>use the edit part</strong> as descibed in the question.I am not using all the functions in script tag.I just want to <strong>pre-populate the fields</strong> :student-Id,Firsname,lastname,yearlevel <strong>after the dialog box</strong> opens.</p>
  
  <p>//Studentinfo.jsp</p>
  
  <pre><code>    &lt;div class="CSSTableGenerator" &gt;
          &lt;div id="users-contain" class="ui-widget"&gt;
              &lt;h1&gt;Existing Users:&lt;/h1&gt;
      &lt;table id="users" class="ui-widget ui-widget-content" border="1"&gt;
          &lt;thead&gt;
              &lt;tr class="ui-widget-header "&gt;
                  &lt;th&gt;Student ID&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Year Level&lt;/th&gt;
                  &lt;th&gt;Actions&lt;/th&gt;
                 &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
  
          &lt;c:forEach items="${allStudents}" var="stud"&gt;
              &lt;tr class="nr"&gt;
                  &lt;td&gt;${stud.studentId}&lt;/td&gt;
                  &lt;td&gt;${stud.firstname}&lt;/td&gt;
                  &lt;td&gt;${stud.lastname}&lt;/td&gt;
                  &lt;td&gt;${stud.yearLevel}&lt;/td&gt;
                  &lt;td&gt;&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;&lt;/td&gt;
  
              &lt;/tr&gt;
          &lt;/c:forEach&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
                  &lt;hr&gt;
                  &lt;div id="dialog-form" title="Create new user"&gt;
                   &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;
              &lt;form name="frm" action="./StudentServlet" method="POST" onSubmit="return validateForm()"&gt;
                  &lt;fieldset&gt;
                  &lt;label for="student-ID"&gt;Student ID&lt;/label&gt;&lt;input type="text" id="Student-ID"  class="text ui-widget-content ui-corner-all"  name="Student-ID" value="" /&gt;
                  &lt;label for="first-name"&gt;First Name&lt;/label&gt;&lt;input type="text" id="first-name"  class="text ui-widget-content ui-corner-all"  name="first-name" value="" /&gt;
                  &lt;label for="last-name"&gt;Last Name&lt;/label&gt;&lt;input type="text" id="last-name"  class="text ui-widget-content ui-corner-all"  name="last-name" value="" /&gt;
                  &lt;label for="yearLevel"&gt;year Level&lt;/label&gt;&lt;input type="text" id="yearLevel"  class="text ui-widget-content ui-corner-all"  name="yearLevel" value="" /&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt;
                 &lt;/div&gt;
  
  
  
    &lt;/div&gt;
  
              &lt;/section&gt;
       &lt;br&gt;
           &lt;form name="frm" action="./StudentServlet" method="POST" &gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Student ID --&gt;&lt;/strong&gt;&lt;input type="text" name="studentId" value="${student.studentId}" /&gt; &lt;/td&gt;
                  &lt;td&gt;&lt;strong&gt;First Name --&gt;&lt;/strong&gt;&lt;input type="text" name="firstname" value="${student.firstname}" /&gt; &lt;/td&gt;
                  &lt;td&gt;&lt;strong&gt;Last Name --&gt;&lt;/strong&gt; &lt;input type="text" name="lastname" value="${student.lastname}" /&gt; &lt;/td&gt;
                  &lt;td&gt;&lt;strong&gt;Year Level --&gt;&lt;/strong&gt;&lt;input type="text" name="yearLevel" value="${student.yearLevel}" /&gt; &lt;/td&gt;
              &lt;/tr&gt;   
  
          &lt;table&gt;
  </code></pre>
  
  <p>//my scripts</p>
  
  <pre><code>&lt;script&gt;
     $(function () {
  
    var new_dialog = function (type, row) {
      var dlg = $("#dialog-form").clone();
      var Student-ID = dlg.find(("#Student-ID")),
          first-name = dlg.find(("#first-name")),
          last-name = dlg.find(("#last-name")),
          yearLevel = dlg.find(("#yearLevel"));
      type = type || 'Create';
      var config = {
          autoOpen: true,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
  
                  "Cancel": function () {
                  dlg.dialog("close");
              }
          },
          close: function () {
              dlg.remove();
          }
      };
      if (type === 'Edit') {
          config.title = "Edit User";
          get_data();
  
         //commented out delete(config.buttons['Create an account']);
  
           config.buttons['Edit account'] = function () {
              row.remove();
  
  
          };
  
      }
      dlg.dialog(config);
  
      function get_data() {
          var _Student-ID = $(row.children().get(1)).text(),
              _first-name = $(row.children().get(2)).text();
              _last-name = $(row.children().get(3)).text();
              _yearLevel = $(row.children().get(4)).text();
          Student-ID.val(_Student-ID);
          first-name.val(_first-name);
          last-name.val(_last-name);
          yearLevel.val(_yearLevel);
  
  
           }
       //Do I need to use  such function for doing the action mentioned in the above question.
  
       function save_data() {
          $("#users tbody").append("&lt;tr&gt;" + "&lt;td&gt;" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "&lt;/td&gt;" + "&lt;td&gt;" + email.val() + "&lt;/td&gt;" + "&lt;td&gt;" + password.val() + "&lt;/td&gt;" + "&lt;td&gt;&lt;a href='' class='edit'&gt;Edit&lt;/a&gt;&lt;/td&gt;" + "&lt;td&gt;&lt;span class='delete'&gt;&lt;a href=''&gt;Delete&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;" + "&lt;/tr&gt;");
          dlg.dialog("close");
      }
  };
  
  
      //not used
   $(document).on('click', 'span.delete', function () {
      $(this).closest('tr').find('td').fadeOut(1000,
  
      function () {
          // alert($(this).text());
          $(this).parents('tr:first').remove();
      });
  
      return false;
  });
  $(document).on('click', 'td a.edit', function () {
      new_dialog('Edit', $(this).parents('tr'));
      return false;
  });
  
  $("#create-user").button().click(new_dialog);
  
    });
  
   &lt;/script&gt;     
  </code></pre>
  
  <p>MY external links:</p>
  
  <pre><code>        &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>      &lt;style&gt;
       body {
    font-size: 62.5%;
         }
            label, input {
                   display: block;
                }
            input.text {
                  margin-bottom: 12px;
                        width: 95%;
                         padding: .4em;
                      }
            fieldset {
               padding: 0;
               border: 0;
                margin-top: 25px;
         }
              h1 {
             font-size: 1.2em;
              margin: .6em 0;
             }
                     div#users-contain {
                      width: 350px;
                        margin: 20px 0;
                  }
          div#users-contain table {
             margin: 1em 0;
           border-collapse: collapse;
             width: 100%;
       }
          div#users-contain table td, div#users-contain table th {
                 border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
                    }
     .ui-dialog .ui-state-error {
               padding: .3em;
     }
    .validateTips {
    border: 1px solid transparent;
      padding: 0.3em;
    }
      #dialog-form {
         display: none;
     }
        }
     &lt;/style&gt;
  </code></pre>
  
  <p><strong>What is happening here??</strong>:When I CLICK on the edit link (present in every row).I get the following error</p>
  
  <pre><code>   Warning:   StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet   threw exception
              java.lang.NumberFormatException: null
              at java.lang.Integer.parseInt(Integer.java:542)
              at java.lang.Integer.parseInt(Integer.java:615)
              at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
              at com.joseph.controller.StudentServlet.doGet(StudentServlet.java:84)    
  </code></pre>
  
  <p>WHERE  AM I GOING WRONG ?? plz help.</p>