title: variable is not found inside ajax
body: <pre><code>                &lt;div class="modal-body"&gt;
          &lt;form&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="email" class="col-form-label"&gt;Email address:&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="signUpEmail" name="email"&gt;
          &lt;/div&gt;
              &lt;div class="form-group"&gt;
          &lt;label for="pwd" class="col-form-label"&gt;Password:&lt;/label&gt;
          &lt;input type="password" class="form-control" id="signUpPassword" name="password" onchange="check_pass()"&gt;
                                           &lt;/div&gt;  
                                                  &lt;div class="form-group"&gt;
                                                      &lt;label for="pwd" class="col-form-label"&gt;Confirm Password:&lt;/label&gt;
                                                      &lt;input type="password" class="form-control" id="signUpConPassword" name="password" onchange="check_pass()"&gt;
                                                  &lt;/div&gt;
                                              &lt;/form&gt;
                                          &lt;/div&gt;
                                          &lt;div class="modal-footer"&gt;
                                              &lt;button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" &gt;Sign Up&lt;/button&gt;
  
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              function check_pass() 
              {
                  //alert(document.getElementById('signUpPassword').value);
              if (document.getElementById('signUpPassword').value ==
                      document.getElementById('signUpConPassword').value) {
                  document.getElementById('signUpSubmit').disabled = false;
              }
              else
              {
                  document.getElementById('signUpSubmit').disabled = true;
              }
          }
          $('#signUpSubmit').click(function() 
          {
              //alert("signup completed");
              var email=document.getElementById('signUpEmail');
              var password = document.getElementById('signUpPassword');
              $.ajax({
                  url: 'signup.php',
                  type: 'POST',
                  data: {
                      email: $email,
                      password: $password
                  },
                  success: function() {
                      alert('Email Sent');
                  }               
              });
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>This code snippet shows <code>ReferenceError: $email is not defined</code> when I click on the <code>signupSubmit</code> button although I defined the variable inside the function.
  I also try  </p>
  
  <pre><code>var email=document.getElementById('signUpEmail').value;
  var password = document.getElementById('signUpPassword').value;
  </code></pre>
  
  <p>but, same error. I guess there is a problem in variable declaration. What is the correct form of variable declaration inside the function?</p>