title: Two forms with submit buttons two different functions. One button to run a javascript
body: <p>Form1 has the action to link to an external .aspx file. But once I added Form2 and the javascript file, contact-us/js/app.js, to the page. The javascript now controlls both form submit buttons. How do I link the javascript file to only run when Form2 button is submitted?</p>
  
  <pre><code>Form1
  &lt;div id="guestLogin"&gt;
  &lt;form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" &gt;
  &lt;input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" /&gt;
  &lt;input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" /&gt;
  &lt;input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Form2 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?</p>
  
  <pre><code>Form2
  &lt;div id="form-wrapper"&gt;
  &lt;div class="inner cover"&gt;
  &lt;form class="form-signin" id="form-signin"  &gt;
  &lt;h4 class="sendMsg"&gt;Send us a message&lt;/h4&gt;
  &lt;input type="text" id="first" class="form-control" placeholder="First Name" required&gt;
  &lt;input type="text" id="last" class="form-control" placeholder="Last Name" required &gt;
  &lt;input type="text" id="company" class="form-control" placeholder="Company" required &gt;
  &lt;input type="text" id="phone" class="form-control" placeholder="Phone" required &gt;
  &lt;input type="email" id="email" class="form-control" placeholder="Email" required &gt;
  &lt;p&gt; Tell us how we can help you&lt;/p&gt;
  &lt;textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required &gt;&lt;/textarea&gt;
  &lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;Send Your Message&lt;/button&gt;
  &lt;input id="subject" name="subject" type="hidden" value="Contact Us" /&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="contact-us/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="contact-us/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  &lt;script src="contact-us/js/app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>app.js code to control form2 only:</p>
  
  <pre><code>$(document).ready(function() {
  
  $("form").submit(function(e) {
      e.preventDefault(); 
      //Submit Form
      var first = $("input#first").val();
      var last = $("input#last").val();
      var company = $("input#company").val();
      var phone = $("input#phone").val();
      var email = $("input#email").val();
      var comments = $("textarea#comments").val();
      var subject = $("input#subject").val();
  
      $.ajax({
          type: "POST",
          url: "contact-us.asp",
          data: { first : first,
                  last : last,
                  company : company,
                  phone : phone,
                  email : email,
                  comments : comments,
                  subject : subject },
                  cache : false,
                  contentType:"application/x-www-form-urlencoded; charset=UTF-8",
          success: function() {
              $('.form-signin').hide();
              $('.cover').fadeIn('slow').html('&lt;h2&gt;Thank You, '+first+' '+last+'&lt;/h2&gt;');
          }
      });
  });
  </code></pre>
  
  <p>});</p>