表单提交成功后重定向

Question

I have a form which should submit data after pressing the submit button. After tagging a few input fields as required the form always shows me when there is no input in the required field after pressing the submit button - so far, so good.

What I would like to realize is that there is a redirection to another page if the submission was successful. If there are some empty required fields the form should show me, without redirecting me to another page.

By now I have the following code:

Submit button:

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
      </div>
  </div>

Also I have the following js function to submit the form and to redirect me to another page:

$('document').ready(function () {
    "use strict";
    $(function () {
        $('#submityes').click(function () {
            $.ajax({
                type: "POST",
                /* url: "process.php", //process to mail
                data: $('form.contact').serialize(), */
                success: function (msg) {
                    window.location.replace("/submit_resolved.php");
                },
                error: function () {
                    alert("error");
                }
            });
        });
    });
});

The problem I have right now is that I will always be redirected to the "submit_resolved.php" page, whether all required fields are complete or not.

How can I solve this problem? I only want to be redirected when all required fields are not empty.

Answer 1

You should bind to the submit event, not click event:

UPDATED TO MATCH THE COMMENTS

$(function () {

    var submityesClicked;

    //catch the click to buttons
    $('#submityes').click(function () {
        submityesClicked = true;
    });
    $('#submitno').click(function () {
        submityesClicked = false;
    });

    $('#webform').submit(function (e) {
        e.preventDefault();//prevent the default action

        $.ajax({
            type: "POST",
            /*url: "process.php", //process to mail
             data: $('form.contact').serialize(),*/
            success: function (msg) {
                window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
            },
            error: function () {
                alert("error");
            }
        });
    });
});

The submit event is triggered only if the form is valid.

Note that the submit event is triggered by the form but the click event is triggered by the input element.

Answer 2

Do redirection on complete . Not on success

$('document').ready(function () {
    "use strict";
    $(function () {
        $('#submityes').click(function () {
            $.ajax({
                type: "POST",
                /* url: "process.php", //process to mail
                data: $('form.contact').serialize(), */
                success: function (msg) {
                    //window.location.replace("/submit_resolved.php");
                },
                complete: function () {
                    window.location.replace("/submit_resolved.php");
                },
                error: function () {
                    alert("error");
                }
            });
        });
    });
});

Answer 3

I assume you are validating form in process.php so, you have to return error if validation fail from process.php like this.

header('HTTP/1.1 500 Internal Server Booboo');
header('Content-Type: application/json; charset=UTF-8');
die(json_encode(array('message' => 'ERROR', 'code' => 1337)));

check this link: Return errors from PHP run via. AJAX?

Hope this may be helpful to you.

Answer 4

The simplest thing you can do is to add "required" attribute to you input elements.Example:

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form> 

It's a HTML5 attribute, so no JavaScript required. And it is supported by all major browsers. Check this link:

http://caniuse.com/#search=required

Anyway, you shouldn't rely just on front-end verification. Check those inputs on back-end, too.

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
        <form action="">
           Username: <input type="text" id="usrname" required>
          <button type="button" name="submityes" 
           id="submityes" class="btn btn-danger">Submit</button>
       </form> 
  </div>

function isValid(){
  var usrname = $("#usrname").val();
    if(usrname == ""){
      return false;
    }
  return true;
}
$(function () {
    $('#submityes').submit(function () {
    if(isValid() == true){
        $.ajax({
            type: "POST",
           /*url: "process.php", //process to mail
            data: $('form.contact').serialize(),*/
            success: function (msg) {
                alert("success");
                window.location.replace("/submit_resolved.php");
            },
        });
        }else{
        alert("error");
        }
    });
});