如何从多个单选按钮中选取值并以动态形式打印?

时间:2019-04-11 06:55:29

标签: javascript php jquery html

我无法将单选按钮值回显到由php构造的动态表。

我已经成功让Jquery自动更新了每个添加行的单选按钮的“名称”。但是,单选值似乎仅从第一行获取该值。

<?php
//Pick up the index Row for constructing the tables
if(isset($_POST['submit'])) {
    $row = explode("_", $_POST['rowNumber']);
    if($row[1] > 0){
        $maxRow =  $row[1];}
};
//Pick up form input
$vitalTime = $_POST['vitalTime'];
$vitalResRate = $_POST['vitalResRate'];

echo "<table>";
echo "<tr>";
    for ($i = 0; $i < $maxRow; $i++) {
        //Pick up radio form input
        $radCons = $_POST['radCons' . $i];

        var_dump($radCons);

        echo $i;
        echo "</tr><tr>";
        echo "<td>Vital time:" . $vitalTime[$i] . "</td>";
        echo "<td>Respiration: " . $vitalResRate[$i] . "</td>";
        echo "<td>Level of Conscousness ". $radCons ."</td>";

    }
    echo "</tr>";
    echo "</table>";
?>
<form method="POST">
<div class="row cloned-row">
 <div class="col-sm">
   <h3>Time</h3>
    <input name="vitalTime[]" id="vitalTime_1" type="text">
 </div>
 <div class="vitalCons col-sm">
    <h3>Level of Conscousness</h3>
    <div class="form-check">
      <input name="radCons0" class="form-check-input" type="radio"  value="Alert">
      <label class="form-check-label">Alert</label>
    </div>
    <div class="form-check">
      <input name="radCons0" class="form-check-input" type="radio" value="Voice">
      <label class="form-check-label">Voice</label>
    </div>
    <div class="form-check">
      <input name="radCons0" class="form-check-input" type="radio" value="Pain">
      <label class="form-check-label">Pain</label>
    </div>

 </div>
</div>
<div class="row">
    <input class="btn" name="submit" type="submit"  value="Submit"></input>
</div>
<div class="row">
    <input name="rowNumber" id="rowNumber" type="text" value="Row_1">   
</div>
</form>
var btnAdd = $('#btnAdd');
            btnAdd.click(function(){
                //Select last ID
                var vitalTime = $('.cloned-row .col-sm input[type=text]:nth-child(2)').last().attr('id');
                var vitalCons = $('.cloned-row .vitalCons input[type=radio]').last().attr('name');


                var split_id = vitalTime.split('_');
                var splitResRate = vitalResRate.split('_');

                //New Index
                var index = Number(split_id[1]) + 1;


                //Testing Variable 
                console.log(vitalCons);
                console.log(vitalResRate);
                console.log(index);


                $(rowNumber).val("Row_" + index); 
                //Create Clone
                var newRow = $(".cloned-row:last").clone(true);
                console.log(newRow);
                //Set id or name of new elements on cloned Row
                 $(newRow).find('.col-sm input[type=text]:nth-child(2)').attr("id","vitalTime_"+index);

                $(newRow).find('.vitalCons input[type=radio]').attr("name","radCons" + index);

                 //Set Value
                 $(newRow).find('.col-sm input[type=text]:nth-child(2)').val("vitalTime_"+ index);

                //Insert Element
                $(newRow).insertAfter(".cloned-row:last");
            });

            //Drop Vital Sign Table
            var btnDrop = $('#btnDrop');
            btnDrop.click(function(){
                $(".cloned-row:last").remove();
            });

我希望对于每个新行,单选按钮应循环并相应地输出到“ index”变量。例如,应该输出radConsc1,radConsc2等(单击html中的“添加”按钮时由java-script生成),但单选按钮数组只能保存radCons0的第一个值(从var_dump测试)。

0 个答案:

没有答案