我有多个具有不同名称属性和不同类名的单选按钮。我需要自动更新这些值到MySQL数据库表。我能够自动更新单选按钮的第一个值(即"性别类型"),当我点击第二个单选按钮(即"肤色"),它的值没有更新到数据库表。
有人能帮我吗?
<!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条答案
按热度按时间g2ieeal71#
从给出的代码中还不清楚Javascript/jQuery函数
autosave
实际上是如何被调用的,也不清楚这是否是PHP的问题,所以下面的内容可能会引起兴趣,也可能不会引起兴趣。在这一小段Javascript中没有jQuery-我不使用它,所以会对它造成伤害,但这是简单的普通Javascript。对HTML的一个小修改(不是绝对必要的,但是语法上是正确的)是使用
section
来定义每个单选按钮组-这具有允许我们容易地计算页面上的单选按钮组的数目并且将其与checked
单选按钮的数目进行比较的好处-当它们相同时,ajax函数将被发送-从而确保所有的单选按钮都包含在POST请求中,这意味着PHP可以正常更新数据库。