jQuery ajax 提交表单并从日期选择器、按钮获取值

问题描述

我正在弄清楚我创建的 ajax 表单如何在成功或失败时响应警报框。我已经形成了框选择 1、框选择 2、日期选择器、电子邮件地址和电话号码。我想问一下如何从datepicker中获取值，以及从按钮选择到ajax表单中的值。我已经制作了自己的代码，如下所示。谁能帮我一步一步解决这个问题？

$(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();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></script>
<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" />
<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" />

<form action="#" method="post" id="myForm">
  <h3>Box 1 Choice</h3>
  <div class="Box-1">
    <button name="choice1">Box 1 Option 1</button>
    <button name="choice2">Box 1 Option 2</button>
  </div>

  <h3>Box 2 Choice</h3>
  <div class="Box-2">
    <button name="choice3">Box 2 Option 1</button>
    <button name="choice4">Box 2 Option 2</button>
  </div>
 
  <h3>Choose Date</h3>
  <div class="datepicker-Box">
    <input type="text" class="datepicker" placeholder="Choose your date" name="date">
  </div>
  
  <h3>Email Address</h3>
  <input type="text" placeholder="Your email address" name="email">
  
  <h3>Phone Number</h3>
  <input type="text" placeholder="Your phone number" name="phone">
  
  <div class="submit-Box">
    <button type="submit">Submit Form</button>
  </div>
</form>

解决方法

你的意思

$("#myForm").on("submit",function(e) { 
  e.preventDefault();

  var formData = {
        'phone' : $('input[name=phone]').val(),'email' : $('input[name=email]').val(),'buttons' : [...this.querySelectorAll("button.selected")]
                    .map(but => but.name),'date'  :  $(".datepicker",this).val()
  };