Ajax Различные флажки должны отправлять пользователей на разные страницы

Question

Я пытаюсь отправить пользователей на разные страницы/URL на основе опции, которую они выбрали в этом флажке. Я пробовал все, но, похоже, не могу понять правильное утверждение «если», чтобы сделать это. Не уверен, что самый простой способ добиться этого. ПОЖАЛУЙСТА ПОМОГИ!

Вот мой HTML код формы:

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

Вот форма Аякса, который обрабатывает форму и отправляет в файл PHP:

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'; 
     } 
     }); 

Вот является 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

Прежде всего, ваш селектор JQuery является не собираюсь ничего сопоставлять.

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

Вам нужно будет использовать:

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

, так как элемент формы не является прямым chidl вашего #Register элемента.

Редактировать: Извините, что это совершенно неправильно, два идентичны.

Далее, serialize() предоставит вам строку 'name = value & name2 = value2' и т. Д., Тогда как данные post должны быть в виде {name: value, name2: value2}.

Попробуйте 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'; 
}); 

Однако я до сих пор не вижу никаких флажков ...