title: How to use input type=submit with AJAX form
body: <p>I have the following AJAX script that I am using to return a random PIN number to a user when they register their email address:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form class="form-inline" role="form" id="formRegister"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="srEmail"&gt;Email address&lt;/label&gt;
          &lt;input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email"&gt;
      &lt;/div&gt;
      &lt;button type="button" name="srSubmit" onClick="getSubmitResponse();" class="btn btn-default btn-lg"&gt;Generate PIN&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>        function getSubmitResponse(){
              var emailId = $("#srEmail").val();
              $.ajax({
              type: "POST",
              url: "register-ajax-call.php",
              data: { srEmail: emailId, submiType: 'srSubmit'}
              })
              .done(function( html ) {
  
                  if(html.search('PIN:')!=-1){
                      window.location = "success.php?response="+html;
                  }else{
                      $( "#results").empty();
                      $("#results").append( html );
                  }
              });
          }
  </code></pre>
  
  <p>Question: how can I use button type="submit" rather than type="button" in this situation? My reasoning is that this is better markup for form validation and more consistent behaviours (e.g. when a user hits ENTER).</p>
  
  <p>I am also using jQuery if that is a solution.</p>