jQuery ajax 提交表单并从 datepicker、按钮获取值

Posted 2023-05-08

【中文标题】jQuery ajax 提交表单并从 datepicker、按钮获取值

【英文标题】：jQuery ajax submit form and get value from datepicker, button

【发布时间】：2021-04-22 14:27:18

【问题描述】：

我正在弄清楚我创建的 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>

【参考方案1】：

你是说

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

【讨论】：

我已经编辑了我的 sn-p。如何获取日历值和按钮选择并输入到formData数组中@mplungjan

为什么每次点击表单中的任意按钮，总是出现alert callback fail？

我不知道。测试服务器