Ajax Different checkboxes should send user to different pages

Question

I am trying to send users to different pages/URL's based on the option they choose in the checkbox. I tried everything but can't seem to figure out the correct "if statement" to do it. Not sure what the easiest way to accomplish this is. PLEASE HELP!

Here is my HTML code for the form:

 <!-- Register start -->
    <section id="register">

        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <h2>Register Now</h2>
            </div>
          </div> 
          <div class="row registration-success-msg">
            <div class="col-md-12">
              <div class="alert alert-success"><strong>Congratulations!</strong> Your registration was successful.</div>
            </div>
          </div>
          <div class="row validation-error-msg">
            <div class="col-md-12">
              <div class="alert alert-danger">Please check your data! All fields are required.</div>
            </div>
          </div>
<!-- Checkboxes Start Here -->
          <div class="row">
           <div class="col-md-6 plans">
             <h3>1. Select your Plan</h3>
             <div class="plan">
               <div class="checkbox">
                 <i class="fa fa-square-o" name="Option1"></i>
               </div>
               <div class="offer">
                 <h4>1 DAY TICKET  <span class="label">$ 29.00</span></h4>
                 <p>Here is some dummy text. You can also use tooltips. on top, but you can have it on the bottom too! </p> 
               </div>
             </div>
             <div class="plan">
               <div class="checkbox">
                 <i class="fa fa-square-o" name="Option2"></i>
               </div>
               <div class="offer">
                 <h4>2 DAYS TICKET  <span class="label">$ 39.00</span></h4>
                 <p>Here is some dummy text. You can also use tooltips. on top, but you can have it on the bottom too! </p> 
               </div>
             </div>
             <div class="plan">
               <div class="checkbox">
                 <i class="fa fa-square-o" name="Option3"></i>
               </div>
               <div class="offer">
                 <h4>3 DAYS TICKET  <span class="label">$ 49.00</span></h4>
                 <p>Here is some dummy text. You can also use tooltips. on top, but you can have it on the bottom too! </p> 
               </div>
             </div>
           </div>
<!-- Checkboxes END Here -->
           <div class="col-md-6 register-form">
             <h3>2. Enter your Personal information</h3>
             <form action="submit-forms.php" method="post">
              <input type="hidden" name="plan">
              <input type="hidden" name="type" value="registration">
               <div class="row">
                <div class="col-md-12">
                  <input type="text" name="first_name" class="form-control" placeholder="First Name">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="last_name" class="form-control" placeholder="Last Name">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="email" class="form-control" placeholder="Email">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="address" class="form-control" placeholder="Address">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="zip_code" class="form-control" placeholder="Zip Code">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="city" class="form-control" placeholder="City">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button class="btn btn-block btn-default" data-loading-text="Loading..." data-complete-text="Registration Successful!" id="submit-registration">Submit Registration</button>
                </div>
              </div>
            </form>
          </div>
        </div> 
      </div>
    </section>
    <!-- Register end -->

Here is the ajax form that process the form and sends to the php file:

var formData = $("#register form").serialize();

  // Send the Form
  $.ajax({
        //this is the php file that processes the data and send mail
        url: "submit-forms.php", 
        //POST method is used
        type: "POST",
        //pass the data     
        data: formData,
        //Do not cache the page
        cache: false,
        //success
        success: function(data) {
          //$("#submit-registration").button('complete');
          //$('.registration-success-msg').fadeIn("slow");
            console.log("success");
            window.location.href = 'http://link1goeshere.com';
        }
      });

Here is the PHP FILE:

if('registration' == $submitType)
    {
        // prepare message
        $body  =    "You have got a new registration from your website : \n\n";
        $body .=    "First Name:  $_POST[first_name] \n\n";
        $body .=    "Last Name:  $_POST[last_name] \n\n";
        $body .=    "Email:  $_POST[email] \n\n";
        $body .=    "Address:  $_POST[address] \n\n";
        $body .=    "Zip Code:  $_POST[zip_code] \n\n";
        $body .=    "City:  $_POST[city] \n\n";
        $body .=    "Plan:  $_POST[plan] \n\n";

        if( $_POST['email'] && !preg_match( "/[\r\n]/", $_POST['email']) ) {
            $headers = "From: $_POST[email]";
        } else {
            $headers = "From: $youremail";
        }

        mail($youremail, 'New Registration', $body, $headers );


    }

Answer 1

First of all your jQuery selector isn't going to match anything.

var formData = $("#register form").serialize();

You will need to use:

var formData = $("#register").find(form).serialize();

since the form element isn't a direct chidl of your #register element.

Edit: Sorry that is completely wrong, the two are identical.

Next, serialize() will give you a string 'name=value&name2=value2' etc whereas post data should be in the form of {name: value, name2: value2}.

Try serializeArray():

var formData = $("#register").find(form).serializeArray();
var postData = {};
formData.forEach(function (form) {
    postData[form.name] = form.value;
});
$.post('submit-forms.php', postData, function (data) {
    console.log(data);
    window.href.location = 'http://link1goeshere.com';
});

However I still see no checkboxes...