title: How do I split a PHP form into two sections to be sent separately using jQuery?
body: <p>This is what I have so far using jQuery:</p>
  
  <pre><code>var url = "my-path-to-url";
  
  $("button.btn-book").on("click", function(e, response){
  
      e.preventDefault();
  
      $.post(url, {
          "your-name": $("input[name='your-name']").val(),
          "email": $("input[name='email']").val(),
          "phone": $("input[name='phone']").val().replace(/\s/g, ''),
          "initial_form": "true"
      }, function(response){
  
          if(response == "sent"){
  
              $(".form-submit").on("click", function(){
  
                  $.post(url, {
                      "treatment": $("input[name='treatment']").val(),
                      "method": $("input[name='method']").val(),
                      "long_form": "true"
                  });
  
              });
          }
  
          if(response == "fail"){
  
              alert("Please make sure all fields are filled in.");
  
  
          }
  
      });
  
  });
  </code></pre>
  
  <p>I'm trying to set it so when the user fills out the first part of the form, i.e. the first 3 fields, it sends an email so if they opt out, it grabs the important details. </p>
  
  <p>The second part of the form is just ticking radio buttons and if the user fills these out, the form sends another email but with all the information - (The text fields + the radio button fields).</p>
  
  <p>What I think I'm stuck on is joining these two elements so it does something like this: "If only the first 3 fields are filled out, grab these values and send it to the url with the form script. </p>
  
  <p>If all fields are filled out, grab all the data and send it to the url with the form script.</p>
  
  <p>Hope it makes sense, thanks.</p>
  
  <p>Tom's asked me to paste my form HTML:</p>
  
  <pre><code>        &lt;form class="booking-form" method="post" accept-charset="utf-8" id="booking-form"&gt;
  
          &lt;input name="booking-form" value="true" type="hidden"&gt;
  
          &lt;div class='booking-progress'&gt;
              &lt;label class='active'&gt;Step 1&lt;/label&gt;
              &lt;label&gt;Step 2&lt;/label&gt;
              &lt;label&gt;Step 3&lt;/label&gt;
              &lt;label&gt;Done&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;h1&gt;&lt;?php the_title() ?&gt;&lt;/h1&gt;
  
          &lt;h2&gt;We look forward to helping you at this complimentary consultation&lt;/h2&gt;
  
          &lt;div class="booking-form-container"&gt;
              &lt;div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=0 data-cycle-slides="&gt; div" data-cycle-next=".cycle-next" data-cycle-allow-wrap="false"&gt;   
                  &lt;div class="personal-details"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control" name="your-name" id="your-name" placeholder="Name &amp;#42;" required data-min-length="3" data-error='This field is required'&gt;
                          &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control" name="email" id="email" placeholder="Email &amp;#42;" required data-minlength="7" data-error='This field is required, and must be at least 7 characters'&gt;
                          &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control" name="phone" id="phone" placeholder="Phone &amp;#42;" required data-minlength="6" data-error='This field is required, and must be at least 6 digits'&gt;
                          &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;button type="button" class="btn btn-book cycle-next"&gt;Go!&lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;div class="treatment-details"&gt;
  
                      &lt;h3&gt;Select your Treatment&lt;/h3&gt;
  
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="treatment" class="next-arrow" value="General Patient" id="general-patient"&gt;
                          &lt;label class="cycle-next" for="general-patient"&gt;General Patient&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="treatment" class="next-arrow" value="Dental Implants" id="dental-implants"&gt;
                          &lt;label class="cycle-next" for="dental-implants"&gt;Dental Implants&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="treatment" class="next-arrow" value="Teeth Whitening" id="teeth-whitening"&gt;
                          &lt;label class="cycle-next" for="teeth-whitening"&gt;Teeth Whitening&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="treatment" class="next-arrow" value="Teeth Straightening" id="teeth-straightening"&gt;
                          &lt;label class="cycle-next" for="teeth-straightening"&gt;Teeth Straightening&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="treatment" class="next-arrow" value="Facial Aesthetics" id="facial-aesthetics"&gt;
                          &lt;label class="cycle-next" for="facial-aesthetics"&gt;Facial Aesthetics&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="contact-method"&gt;
  
                      &lt;h3&gt;Best method of contact?&lt;/h3&gt;
  
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="method" class="phone-icon form-submit" value="Phone" id="by-phone"&gt;
                          &lt;label class="cycle-next" for="by-phone"&gt;By Phone&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;input type="radio" name="method" class="mail-icon form-submit" value="Email" id="by-email"&gt;
                          &lt;label class="cycle-next" for="by-email"&gt;By Email&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="thanks-message"&gt;
                      &lt;h3&gt;All done&lt;/h3&gt;
                      &lt;p&gt;Thank you, we will contact you soon.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;          
  
      &lt;/form&gt; 
  </code></pre>