title: jQuery ajax submit form and get value from datepicker, button
body: <p>I'm figuring out how the ajax form I created can respond to an alert box when it succeeds or fails. I have formed with box choice 1, box choice 2, datepicker, email address, and phone number. I want to ask how to get value from datepicker,and value from the button choice to the ajax form. I've made my own code like below. Can anyone help me solve this problem step by step?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    //datepicker
    $(function() {
       $( ".datepicker" ).datepicker({
          dateFormat:'DD, d MM yy',
          firstDay: 0
        });
    });
    
    $('.box-1 button, .box-2 button').on('click', function(e) {
      e.preventDefault();
      $(this).addClass('selected');
      $(this).closest('div').find('button').not(this).removeClass('selected');
    });
    
    //ajax process the form
      $('#myForm').submit(function(event) {
  
          // get the form data
          var formData = {
              'phone' : $('input[name=phone]').val(),
              'email' : $('input[name=email]').val()
          };
  
          // process the form
          $.ajax({
              type        : 'POST', 
              url         : 'myscript.php', 
              data        : formData,
              dataType    : 'json', 
              encode      : true
          })
              // using the done promise callback
              .done(function(data) {
                  alert('success');
              })
              
              // using the fail promise callback
              .fail(function(data) {
                  alert('fail');
              });
  
          event.preventDefault();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button,.datepicker{
    border:none;
    background-color:#1f45;
    padding: .5rem 2.5rem;
    border-radius: 2rem;
  }
  
  .box-1{
    margin-bottom: 15px;
  }
  
  button.selected{
    background-color: #578889;
    color: #fff;
  }
  
  .submit-box{
    margin-top:15px;
    margin-bottom:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" /&gt;
  
  &lt;form action="#" method="post" id="myForm"&gt;
    &lt;h3&gt;Box 1 Choice&lt;/h3&gt;
    &lt;div class="box-1"&gt;
      &lt;button name="choice1"&gt;Box 1 Option 1&lt;/button&gt;
      &lt;button name="choice2"&gt;Box 1 Option 2&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;h3&gt;Box 2 Choice&lt;/h3&gt;
    &lt;div class="box-2"&gt;
      &lt;button name="choice3"&gt;Box 2 Option 1&lt;/button&gt;
      &lt;button name="choice4"&gt;Box 2 Option 2&lt;/button&gt;
    &lt;/div&gt;
   
    &lt;h3&gt;Choose Date&lt;/h3&gt;
    &lt;div class="datepicker-box"&gt;
      &lt;input type="text" class="datepicker" placeholder="Choose your date" name="date"&gt;
    &lt;/div&gt;
    
    &lt;h3&gt;Email Address&lt;/h3&gt;
    &lt;input type="text" placeholder="Your email address" name="email"&gt;
    
    &lt;h3&gt;Phone Number&lt;/h3&gt;
    &lt;input type="text" placeholder="Your phone number" name="phone"&gt;
    
    &lt;div class="submit-box"&gt;
      &lt;button type="submit"&gt;Submit Form&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>