2つのフォームは、2つの異なる機能をサブミットします。 1つのボタンでJavaScriptを実行する

Question

Form1には、外部の.aspxファイルにリンクするアクションがあります。しかし、Form2とjavascriptファイル（contact-us/js/app.js）をページに追加すると、 javascriptは両方のフォーム送信ボタンを制御します。 Form2ボタンが送信されたときにのみjavascriptファイルをリンクするにはどうしたらいいですか？

Form1 
<div id="guestLogin"> 
<form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" > 
<input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" /> 
<input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" /> 
<input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" /> 
</form> 
</div> 

Form2コード。最後のスクリプトは、ページ上の両方の送信ボタンを制御しています。 Form2送信ボタンを制御するにはどうすればよいですか？のみフォーム2を制御する

Form2 
<div id="form-wrapper"> 
<div class="inner cover"> 
<form class="form-signin" id="form-signin" > 
<h4 class="sendMsg">Send us a message</h4> 
<input type="text" id="first" class="form-control" placeholder="First Name" required> 
<input type="text" id="last" class="form-control" placeholder="Last Name" required > 
<input type="text" id="company" class="form-control" placeholder="Company" required > 
<input type="text" id="phone" class="form-control" placeholder="Phone" required > 
<input type="email" id="email" class="form-control" placeholder="Email" required > 
<p> Tell us how we can help you</p> 
<textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required ></textarea> 
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Your Message</button> 
<input id="subject" name="subject" type="hidden" value="Contact Us" /> 

</form> 

</div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="contact-us/js/bootstrap.min.js"></script> 
<script src="contact-us/js/ie10-viewport-bug-workaround.js"></script> 
<script src="contact-us/js/app.js"></script> 

app.jsコード：

$(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('<h2>Thank You, '+first+' '+last+'</h2>'); 
     } 
    }); 
}); 

}）。

Answer 1

特定のスクリプト（フォームの送信なし）でルーティングするには、通常のボタンタイプを使用します。

<input type="button" value="Submit" onclick="myFunction()"> 

onclickは、必要な機能を含むJavaScript関数を呼び出します。

編集 - を追加しましたノート： また、これは一般的な

$（ "フォーム"）でちょうどフォームを呼び出して使用し、それはそれが形成するものを指定しない

を提出します。

$(document).ready(function(){ 
 
    $("#form2").submit(function(){ 
 
     alert("Submitted"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Form 1</h1> 
 
Form one goes to aspx. 
 

 
<form action="AutoLogin.aspx"> 
 
    First name: <input type="text" name="FirstName"><br> 
 
    Last name: <input type="text" name="LastName"><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 

 
<h1>Form 2</h1> 
 

 
Form two goes to the JQuery based off of the form ID (this works with external files as well) 
 
<form id="form2"> 
 
    First name: <input type="text" name="FirstName"><br> 
 
    Last name: <input type="text" name="LastName"><br> 
 
    <input type="submit" value="Submit"> 
 
</form>

：第2回フォームに

コードを見つけるためのID 10