Question

Form1具有链接到外部.aspx文件的操作。但是，一旦我添加了Form2和javascript文件，请联系-us / js / app.js到页面。 javascript现在控制两个表单提交按钮。如何将javascript文件链接到仅在提交Form2按钮时运行？

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提交按钮？

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>

仅限控制form2的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函数。

已编辑 - 已添加备注：这也只是一般的表格

$（＆＃34;形式＆＃34）。提交

它没有指定它的形式，使用ID来查找第二种形式

代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

两个表单与提交按钮两个不同的功能。一个按钮来运行JavaScript

1 个答案: