如何在 mysql 数据库表中自动保存不同 class 和名称属性的多个单选按钮值
[英]how to autosave the multiple radio-button value of different class and name attribute in mysql database table
问题描述
I have multiple radio button with different name attribute and with different class names.
我有多个具有不同名称属性和不同 class 名称的单选按钮。 I need to auto-update these value to the mysql database table.我需要将这些值自动更新到 mysql 数据库表中。 I am able to auto-update the first value of radio button(ie,"gender-type") and when I click on second radio button(ie,"skincolor") it's value is not updating into the database table.我能够自动更新单选按钮的第一个值（即，“性别类型”），当我单击第二个单选按钮（即，“肤色”）时，它的值不会更新到数据库表中。
Can anyone help me with this?谁能帮我这个？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender: </h6>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Female" id="femaleGender" />
<label class="form-check-label " for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Male" id="maleGender" />
<label class="form-check-label " for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Other" id="otherGender" />
<label class="form-check-label " for="otherGender">Other</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color: </h6>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color1" id="color1" />
<label class="form-check-label " for="color1">color1</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color2" id="color2" />
<label class="form-check-label " for="color2">color2</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color3" id="color3" />
<label class="form-check-label " for="color3">color3</label>
</div>
</div>
<script>
function autosave()
{
var gender = $("input:radio[name='gender']:checked").val();
var s_color = $("input:radio[name='s_color']:checked").val();
if(gender !=" "&& s_color !=" ")
{
$.ajax({
url:"fetch1.php",
method:"POST",
data:
{
send_gender:gender,
send_s_color:s_color,
send_id:id
},
dataType:"text",
success:function(data){
if(data != ""){
$("#post_id").val(data);
}
$("#autosave").text("Data saved");
} /* success */
}) /* ajax */
} /* filter */
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 2023-01-07 10:49:42
It is not clear from the code given how the Javascript/jQuery function autosave is actually invoked and nor is it clear whether or not this is an issue with the PHP so the following might or might not be of interest.从代码中不清楚 Javascript/jQuery function autosave是如何实际调用的，也不清楚这是否是 PHP 的问题，因此以下内容可能会或可能不会引起兴趣。 There is no jQuery in this small fragment of Javascript - I don't use it so would do it a disservice but this is simple vanilla Javascript.在 Javascript 的这个小片段中没有 jQuery - 我不使用它所以会对它造成伤害，但这是简单的香草 Javascript。
A small modification to the HTML ( not absolutely necessary but syntactically correct ) would be to use a section to define each of the radio groupings - which has the benefit of allowing us to easily count the number of radio groupings on the page and to compare that with the number of checked radio buttons - when these are the same the ajax function will be sent - thus ensuring that all radio buttons are included in the POST request which should mean the PHP can update the db OK.对 HTML 的一个小修改（不是绝对必要但在语法上是正确的）将使用一个section来定义每个无线电分组 - 这有利于我们轻松计算页面上无线电分组的数量并进行比较使用checked的单选按钮的数量 - 当这些相同时，将发送 ajax function - 从而确保所有单选按钮都包含在 POST 请求中，这应该意味着 PHP 可以更新数据库 OK。
const d=document; // 1 radio button from each of these MUST be checked before ajax request is sent let oSections=d.querySelectorAll('section'); d.addEventListener('change',e=>{ if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){ // Find ALL checked radio buttons let col=d.querySelectorAll('section [type="radio"]:checked'); if( col.length === oSections.length ){ // 1 radio from EACH section is now checked, create // the FormData payload to send via AJAX to the server. let fd=new FormData(); col.forEach(n=>fd.set(n.name,n.value)); // Send the request fetch( 'fetch1.php', { method:'post',body:fd } ).then(r=>r.text()).then(data=>{ d.querySelector('#post_id').value=data; d.querySelector('#autosave').textContent='Data saved'; }).catch(alert) } } });
section{ border:1px dotted grey; margin:0.25rem; padding:0.5rem } h6{ margin:0 0 1rem 0; }
<section class="col-md-6 mb-4"> <h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender:</h6> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="gender" type="radio" name="gender" value="Female" />Female </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="gender" type="radio" name="gender" value="Male" />Male </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="gender" type="radio" name="gender" value="Other" />Other </label> </div> </section> <section class="col-md-6 mb-4"> <h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color:</h6> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="scolor" type="radio" name="s_color" value="Green" />Green </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="scolor" type="radio" name="s_color" value="Orange" />Orange </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="scolor" type="radio" name="s_color" value="Purple" />Purple </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="scolor" type="radio" name="s_color" value="Red" />Red </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="scolor" type="radio" name="s_color" value="Gold" />Gold </label> </div> </section>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.