javascript 如何自动保存mysql数据库表中不同类和名称属性的多个单选按钮值

ih99xse1  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(112)

我有多个具有不同名称属性和不同类名的单选按钮。我需要自动更新这些值到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>
g2ieeal7

g2ieeal71#

从给出的代码中还不清楚Javascript/jQuery函数autosave实际上是如何被调用的,也不清楚这是否是PHP的问题,所以下面的内容可能会引起兴趣,也可能不会引起兴趣。在这一小段Javascript中没有jQuery-我不使用它,所以会对它造成伤害,但这是简单的普通Javascript。
对HTML的一个小修改(不是绝对必要的,但是语法上是正确的)是使用section来定义每个单选按钮组-这具有允许我们容易地计算页面上的单选按钮组的数目并且将其与checked单选按钮的数目进行比较的好处-当它们相同时,ajax函数将被发送-从而确保所有的单选按钮都包含在POST请求中,这意味着PHP可以正常更新数据库。

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>

相关问题