使用Ajax将选中的无线电输入发送到PHP

Question

我有一些无线电输入，这些不需要检查。所以我只想寄检查过的。

这是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发送仅用于检查输入的输入值呢？

Answer 1

您就快到了。只需在您喜欢的结构中构建一个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
}
]

Answer 2

您可以使用map()创建具有任何属性的对象数组，然后发送该数组

在php中，您可以从$_POST('answers')访问阵列

//On form submit
$("form").submit(function(event){
//Prevent page submit
event.preventDefault();

const answers = $('.answer:checked').map(function(){
return {id: $(this).data('id'), value: this.value}
}).get()
console.log(answers)
const postData = {answers};

// $.post(url, postData , callback)
});//S

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

<div>
<input type="submit" value="Submit">
</div>
</form>