单选按钮在内容可编辑的div mysql与ajax

Question

我使用一个可编辑的内容div，里面有一些单选按钮，然后我用ajax请求将结果发送给mysql。

<div class="big_wrapper" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 10px;" contenteditable>
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
<input type="radio" name="r1" value="choice 1" /> Choice 1
<br><br>
-----------------------TEXT HERE-------------------------
<input type="radio" name="r1" value="choice 2" /> Choice 2
<br><br>
-----------------------TEXT HERE-------------------------
<input type="radio" name="r1" value="choice 3" /> Choice 3
<br><br>
-----------------------TEXT HERE-------------------------
</div>
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
<button class="btn btn-blue btn-effect" type="button" id="mybutt">Envoyer</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#mybutt').click(function(){
var myTxt = $('.big_wrapper').html();
$.ajax({
type: 'post',
url:  '/sent_data.php',
data: 'q1=' +myTxt+ ''
});
});
</script>

它被正确地发送到mysql，除了三个单选按钮中的一个的选择，它没有正确地记录在mysql =>检查="checked">

任何帮助都将不胜感激。

Answer 1

似乎contenteditable元素的内容被视为文本，您似乎不太可能让它像表单输入一样工作。如果你在SO上搜索，你会发现很多其他的问题，问如何允许HTML在contenteditable元素中，这里有一个例子:HTML元素在Contenteditable?答案表明，内容确实是纯文本，您需要对其进行解析并转换HTML实体，以便将其实际更改为HTML。除非你这样做，否则你的表单输入不会像实际的表单输入一样，选择的值肯定是不可用的。也许这对你来说是一个选择，但对我来说似乎不是一个好的解决方案。

不清楚为什么您想要在contenteditable元素内的单选按钮，但一个简单而明显的替代方法是将它们分开。您可以有一个或多个contenteditable，并且您的单选按钮将是真正的单选按钮，因此您可以轻松找到所选的选项。您只需收集结果，然后单击按钮发送。

下面的工作示例。sent_data.php将接收到的POST数据如下所示:

_POST: Array
(
[texts] => Array
(
[0] => text a
[1] => more text b
[2] => last text c
)
[value] => choice 2
)

如果你需要把它合并成一个文本，你可以在PHP的后端处理它(当然也可以在JS的前端处理)。

$('#mybutt').click(function () {
// We will save all texts in an array
let texts = [];
let $textFields = $('.big_wrapper');
$textFields.each(function (i) {
texts[i] = $(this).html();
});
// Now get the single radio value
let value = $('input[name="r1"]:checked').val();
// POST away, combining results;
/*
$.ajax({
type: 'post',
url: '/sent_data.php',
data: {
'texts': texts,
'value': value
}
});
*/

// For SO show results on console
let data = {
'texts': texts,
'value': value
};
console.dir(data);
});

.big_wrapper {
border: 1px solid black;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="big_wrapper" contenteditable></div>
<input type="radio" name="r1" value="choice 1" /> Choice 1
<br><br><div class="big_wrapper" contenteditable></div>
<input type="radio" name="r1" value="choice 2" /> Choice 2
<br><br><div class="big_wrapper" contenteditable></div>
<input type="radio" name="r1" value="choice 3" /> Choice 3
<br><br><button class="btn btn-blue btn-effect" type="button" id="mybutt">Envoyer</button>