时间戳

首页 > 解决方案 > 使用 Ajax 将检查的无线电输入发送到 PHP

javascript - 使用 Ajax 将检查的无线电输入发送到 PHP

问题描述

我有一些无线电输入，这些不需要检查。所以我只想发送选中的。

这是HTML：

<form>
    <h4>Q1:</h4>
    <label>answer1</label>
    <input type="radio" name="q1" value="answer1" data-id="1" class="answer">
    <label>answer2</label>
    <input type="radio" name="q1" value="answer2" data-id="2" class="answer">
    <label>answer3</label>
    <input type="radio" name="q1" value="answer3" data-id="3" class="answer">

    <h4>Q2:</h4>
    <label>answer1</label>
    <input type="radio" name="q2" value="answer1" data-id="4" class="answer">
    <label>answer2</label>
    <input type="radio" name="q2" value="answer2" data-id="5" class="answer">
    <label>answer3</label>
    <input type="radio" name="q2" value="answer3" data-id="6" class="answer">
  
    <!-- Submit -->  
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

jQuery：

//On form submit
$("form").submit(function(event){

    //Prevent page submit
    event.preventDefault();

    //Loop through checked inputs
    $('.answer:checked').each(function() {
        console.log($(this).val());
        console.log($(this).data('id'));
    });//Each

    //Ajax
    $.ajax({});

});//Submit

这是代码的小提琴：https ://jsfiddle.net/tgp7rfhm/2/

所以我想发送带有data-id属性的检查输入值。

我知道$('form').serialize();，但它不包括数据属性。

那么如何data-id仅使用已检查的输入发送输入值呢？

标签： javascriptjqueryajax

解决方案

您快到了。只需data在您喜欢的结构中构建一个对象，然后使用$.post. 您的代码可能如下所示：

//On form submit
$("form").submit(function(event) {

  //Prevent page submit
  event.preventDefault();

  // Radio button submission data
  let data = []

  //Loop through checked inputs
  $('.answer:checked').each(function() {
    data.push({
      'name': $(this).val(),
      'value': $(this).data('id')
    })
  }); //Each

  //Ajax
  $.post(url, data).done(response => {
    console.log(response);
  });

}); //Submit

提交给服务器的数据将具有以下格式：

[
  {
    'name': 'answer1',
    'value': 1
  },
  {
    'name': 'answer2',
    'value': 2
  }
]

推荐阅读