Grafx34 Grafx34 - 2 months ago 8
HTML Question

Two forms with submit buttons two different functions. One button to run a javascript

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?

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 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?

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 code to control form2 only:

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

To route it with a certain script (without a form submit) I would use a normal button type.

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

The onclick calls the JavaScript function that contains what you want it to do.

Edited - Added notes: Also this calls just a form in general

$("form").submit

It doesn't specify what form it is, use an ID to find the 2nd form

Code:

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