如何仅在选中我的复选框后设置我的值？

Question

我创建了一个带有动态创建字段的表单。我有一个带有唯一 ID 的复选框。当用户 select 选择该复选框时，只有这两个字段可见 ("name and age")。如果用户取消选中 select 框，则这些字段将隐藏。这是代码

 <style>
      .selectContainer{
       display:none;
        }
      input[type=checkbox]:checked ~ .selectContainer {
        display:block;
        }


</style>

而 HTML 代码是：

                  <label for="name">Any Accompanying Person ?:</label>

            <input  type="checkbox" name="person" id="person" >Yes



            <div class="selectContainer">

            <br>



            <label>Person Details</label>
            <p>



             <div style="padding-left:70px;"> 
            <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
            <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
            </div>
            </p>
            <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
            <tbody>
            <tr>
            <p>
            <td><input type="checkbox" name="chk[]" checked="checked" /></td>
            <td>
            <label>Name</label>
            <input type="text" size="20" name="name[]" id="name"   >
            </td>
            <td>
            <label>Age</label>
            <input type="text" size="20" name="age[]" id="age"  >
            </td>

            </p>
            </tr>
            </tbody>
            </table>
            <div class="clear"></div>
            </fieldset>

            </div>
                          <h3>Choose Your Payment Option</h3>
        <h1>

        <div style="padding-left:150px;">
        <input type="radio" name="type" value="visa" required value="1" >VISA/MASTER CARD:<br />
        <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
        <input type="radio" name="type" value="neft">NEFT<br /><br/>

        </div>
        <label></label>
        <input type="submit" name="submit" id="submit" value="submit"><br />

而 php 代码是：

  if(isset($_POST['submit'])){


    $name = $_POST['name'];
    $age = $_POST['age'];

    $intIncrement = 0;
    for($l=0; $l < count($name); $l++)
    {
    if ($age[$l]>=12)
    {
    $intIncrement++;
    }


    $user_name="name";

    $user_id=123;


    $qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)

    VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";

问题：我正在存储随行人员的姓名和年龄。如果用户选中复选框并添加姓名和年龄，那么它会成功存储在数据库中，但问题是当用户来时只需选中然后取消选中复选框（任何随行人员？）然后空值存储在数据库中。如何避免这种情况。我只想存储那些值复选框（随行人员？）被选中。请帮我。

Answer 1

在将 $name 和 $age 的值存储到数据库之前，请检查它们是否具有有效的非空值。

您可以通过以下方式检查空值 -

if (!isset($name) || empty($name)) {
  // $name is either NULL or empty.
  // display error message
}

Answer 2

在数据库中设置姓名和年龄的默认值。检查复选框是否被选中。如果未选中复选框，则禁用年龄和姓名。表单不会 post 禁用输入。所以它不会保存为空

Answer 3

试试这个..

    if (empty($_POST['name'])) {
          $firstNameErr = "Name is required";
          $valid = false; //false
       }
       else {
          $name= test_input($_POST["name"]);
       }
       if (empty($_POST['age'])) {
          $ageErr= "Age is required";
          $valid = false;
       }
       else {
          $age= test_input($_POST["age"]);
       }
 if($valid){
  // do the insert here
  }

Answer 4

虽然您仍然需要验证服务器端，但在 PHP 中，此方法在前端运行以禁用与复选框同一行中的每个 <input> 元素.禁用的元素不被视为 'successful,'，因此不会提交给服务器：

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

Controls that are disabled cannot be successful.

_{"Successful controls," W3.org 访问于 13:21（格林威治标准时间），2015 年 1 月 19 日。}

function toggleRowInputs() {
  // caching a reference to the changed checkbox element:
  var checkbox = this,
      // the starting point for the (following) while loop:
    row = checkbox;
  
  // while the tagName of the 'row' variable is neither 'tr' nor 'body':
  while (row.tagName.toLowerCase() !== 'tr' && row.tagName.toLowerCase() !== 'body') {
    // row is changed to the current node's parentNode and we run again:
    row = row.parentNode;
  }

  // if the checkbox was found inside of a <tr> element:
  if (row.tagName.toLowerCase() === 'tr') {
    // we find all the <input> elements of that row, and use filter()
    // to keep only those elements that are not of type="checkbox":
    var inputs = Array.prototype.filter.call(row.querySelectorAll('input'), function(input) {
      if (input.type !== 'checkbox') {
        return input;
      }
    });
    
    // iterating over those found inputs:
    inputs.forEach(function(input) {
      // if the checkbox is checked we enable (disabled = false) the input,
      // otherwise if it's unchecked we disable (disabled = true) the input:
      input.disabled = !checkbox.checked;
    });
  }

}


// using Array.prototype.forEach() to iterate over the array-like NodeList
// returned by document.querySelectorAll() (which uses CSS syntax to find
// the <input> elements of type="checkbox":
Array.prototype.forEach.call(document.querySelectorAll('input[type=checkbox]'), function(checkbox) {
  // adding an event-listener for the 'change' event to each of those
  // <input> elements, which executes the named function:
  checkbox.addEventListener('change', toggleRowInputs);
});

input[disabled] {
  opacity: 0.5;
}

<table style="padding-left:50px;" id="dataTable" class="form" border="1">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="chk[]" checked="checked" />
      </td>
      <td>
        <label>Name</label>
        <input type="text" size="20" name="name[]" id="name" />
      </td>
      <td>
        <label>Age</label>
        <input type="text" size="20" name="age[]" id="age" />
      </td>
    </tr>
  </tbody>
</table>

请注意，我略微更改了您的 HTML，删除了最初包围某些 <td> 元素的不必要的 <p> 标签，因为仅 <tr> 元素的有效子元素是 <td> 或 <th>，如果您想要一个段落，则它必须位于内部这些元素之一。

参考文献：

HTML:
- Forms in HTML documents.
- "Successful Controls."
JavaScript:

Answer 5

请使用此代码

if(isset($_POST['submit'])){


$name = $_POST['name'];
$age = $_POST['age'];
$checkBox = $_POST['chk'];

$intIncrement = 0;
for($l=0; $l < count($name); $l++)
{
if ($age[$l]>=12)
{
$intIncrement++;
}

$user_name="name";

$user_id=123;
if(isset($checkBox[$l])){
$qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)

VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";
}

}

Answer 6

如果你想让Javascript发挥一些作用，你应该做的第一件事就是在点击复选框时放置一个回调。此后，您可以检查 Name 和 Age data.If 这两个值是否都存在，然后只调用 addRow()。这是简单的原型

<input type='checkbox' id='chk' onclick='check();'/>
<input type='text' id='name' />
<input type='text' id='age' '/>

和javascript片段为：

function check(){
if(document.getElementById('chk').checked){
    var name= document.getElementById('name').value;
    var age=document.getElementById('age').value;
    if(name && age){
        //Only when both name and age, then addRow function call
    }
}
}

希望你能从这里拿走它！

如何仅在选中我的复选框后设置我的值？

How to set my value only after checking my checkbox?

php

checkbox