Question

With the help of Nick Craver, I am now able to have two forms with two separate PHP processing scripts use one submit button. I need to expand on this a little bit. I need it to work so that if you have a value in input#retUser it submits with formOne action. If you have a value in #fname && #lname && #email1 it submits with formTwo Action. If there is NO value in any field return an alert.

  <form name="returning" method="post" action="PHPscript1.php">
  <label>Are you a returning user? Please Enter Your Key</label>
  <input type="text" name="retUser" id="retUser" />
  </form>
  </div>

  <div id="formTwo">
  <form name="newUser" method="post" action="PHPscript2.php">
  <label>Are you a new user? Register here</label>
  <label>First Name</label>
  <input type="text" name="fname" id="fname" />
  <label>Last Name</label>
  <input type="text" name="lname" id="lname" />
  <label>Email</label>
  <input type="text" name="email1" id="email1" />
  </form>
  </div>

  <div id="submitContain">
  <input type="submit" id="sbtBtn" value="submit" />
  </div>

I split the submit function into two separate ones so I can add validation for each later.

$("#formOne").submit(function() {
alert("Trying to submit to: formOne");
return false;
});

$("#formTwo").submit(function() {
alert("Trying to submit to: formTwo");
return false;
});

$("#sbtBtn").click(function() {
if($("#retUser").val()) {      //check if #retUser has a value
$("#formOne").submit();
} else if ($("#fname").val() && $("#lname").val() && $("#email1").val()) {
$("#formTwo").submit();
}
});

what I can’t get is the “If there is NO value in any field return an alert”
thx

Answer 1

I think what you’re after is another else on the end, like this:

$("#sbtBtn").click(function() {
  if($("#retUser").val()) {
    $("#formOne form").submit();
  } else if ($("#fname").val() && $("#lname").val() && $("#email1").val()) {
    $("#formTwo form").submit();
  } else {
    alert("Please fill in something");
  }
});

Also note the changed selectors, since the <form> elements are inside the <div> elements with the IDs.