增量单选按钮以两种不同的方式动态创建

时间：2017-08-17 10:44:13

标签： javascript php html arrays

我想在表格中动态创建一个单选按钮，我已经这样做了

var newRow = jQuery('<tr><td colspan="3"><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="No">No</label></td></tr>');
    counter++;
    jQuery('table.table').append(newRow);

这是我的javascript代码，当添加新行时，将调用此函数

<?php
session_start();
error_reporting(0);
?>
<?php include 'mqsqlconnection.php';
?>
<?php
mysql_select_db("training_db");
$sql = "SELECT trainer_name as tr_name FROM training_details";
$res = mysql_query($sql);
 $trainer_name=mysql_result($res,0);
 $sql1 = "SELECT training_name as trng_name FROM training_details";
$res1 = mysql_query($sql1);
 $training_name=mysql_result($res1,0);
if ( isset ( $_POST['submit_details'] ) )  { 
$trainer_name=$_POST["trainer_name"];
$training_name=$_POST["training_name"];
$training_date=$_POST["training_date"];
$from_time=$_POST["from_time"];
$to_time=$_POST["to_time"];
$venue=$_POST["venue"];
$ins="INSERT INTO training_info(trainer_name,training_name,training_date,from_time,to_time,venue)VALUES('$trainer_name','$training_name','$training_date','$from_time','$to_time','$venue')";
 mysql_query($ins);
 $sql12 = "SELECT training_id  as tid FROM training_info WHERE trainer_name ='$trainer_name' and training_name='$training_name'";
$res12 = mysql_query($sql12);
 $training_id=mysql_result($res12,0);
 //echo $training_id;
 echo $_SESSION['num1'];
 $present=1;
 $absent=0;
 if(!empty($_POST['emp_code']))  {
 $empcode=$_POST['emp_code'];

for($i=0;$i<sizeof($empcode);$i++)
{
    $inssql="INSERT INTO training_attendance(tid,emp_code,attendance) VALUES ($training_id,$empcode[$i],0)";
                mysql_query($inssql);
}
if(isset($_POST['attendance'])&&!empty($_POST['attendance']))  {            
        $ccount=$_POST['attendance'];
        for($i=0;$i<sizeof($ccount);$i++)
        {
            $inssql23="update training_attendance set attendance=1 where emp_code=$ccount[$i] and tid=$training_id";
                mysql_query($inssql23);
        }
        }
 }

        }









?>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Training Attendance form</title>
<link rel="stylesheet" href="logincss.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>

<script>
jQuery(function() {
  var counter = 1;
  jQuery('a.addrow').click(function(event) {
    event.preventDefault();

    var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" id="emp_code[]"  class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" id="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" id="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" id="nomination[]" class="form-control"></td><td colspan="3"><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="No">No</label></td></td><td><a href="javascript:void(0);" class="remove" onclick=><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
    counter++;<?php $i++; ?>
    jQuery('table.table').append(newRow);
  //Init bootstrapToggle
  $('.toggleone').bootstrapToggle({
    on: 'Yes',
    off: 'No'
  });
  });
}); 

</script>
<script>
$(function(){

     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});  
</script>
<script>
   $(function() {
    $('#toggleone').bootstrapToggle({
      on: 'Enabled',
      off: 'Disabled'
    });
  }) ​</script>
</head>
<body>
<div class="container">
<div class="row vertical">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><center>Training Attendance form</center></h3>
</div>
 <div class="panel-body">
<form class="form-horizontal" action="" method="post" id="loginform"
enctype="multipart/form-data">
 <div class="form-group">
 <label for="input_trainername" class="col-sm-3 control-label">Trainer Name</label>
 <div class="col-sm-8">
 <input readonly class="form-control" id="trainer_name" name="trainer_name" value="<?php echo $trainer_name;?>">
 </div>
 </div>
 <div class="form-group">
 <label for="input_trainingname" class="col-sm-3 control-label">Training Name</label>
 <div class="col-sm-8">
 <input readonly class="form-control" id="training_name" name="training_name" value="<?php echo $training_name;?>">
 </div>
 </div>
  <div class="form-group">
 <label for="input_trainingname" class="col-sm-3 control-label">Date</label>
 <div class="col-sm-8">
 <input type="date" class="form-control" id="training_date" name="training_date" value="" onfocus="(this.type='date')" onfocusout="(this.type='text')">
 </div>
 </div>
<div class="form-group">
 <label for="labeldate" class="col-sm-1 control-label">Time</label>
 <label for="input_fromdate" class="col-sm-2 control-label">From</label>
 <div class="col-sm-3">
 <input type="time" class="form-control" id="from_time" name="from_time"
placeholder="Pick here">
 </div>
 <label for="input_todate" class="col-sm-1 control-label">To </label>
 <div class="col-sm-3">
 <input type="time" class="form-control" id="to_time" name="to_time" value=""
placeholder="Pick here" >
 </div></div>
  <div class="form-group">
 <label for="input_venue" class="col-sm-3 control-label">Venue</label>
 <div class="col-sm-8">
 <input type="text" class="form-control" id="venue" name="venue" value="">
 </div>
 </div>
<link  rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<?php 
       //session_start();
//echo $_SESSION['year'];




//while ($row = mysql_fetch_array($result)) {
?>

    <table  align="center" class="table table-bordered"id="tb" border="10" bordercolor="#0066FF" style=\"background-color:#CCFFFF\" width="50%" cellpadding="9" cellspacing="9">
    <tr><b>
    <td colspan="3">Empid</td>
    <td colspan="3">Name</td>
    <td colspan="3">Email ID</td>
    <td colspan="3">Nominated and invited</td>
      <td colspan="3">Attendance</td>
    <td><a href="javascript:void(0);" class="addrow" style="font-size:18px;" id="addMore" title="Add More Person" onclick="<?php $_SESSION['i']++; ?>"><span class="glyphicon glyphicon-plus"></span></a></td>
    </b></tr>

        <?php mysql_select_db("training_db");  
$result_s = mysql_query("select * from training_nominated"); 
$_SESSION['num1']=mysql_num_rows($result_s);
 while($row = mysql_fetch_array($result_s)) 
          {?><tr><td colspan="3" class="table-success"><div class="ck"><input readonly name="emp_name[]" id="emp_name[]" value="<?php echo $row['emp_code']?>"class="form-control"></td>
          <td colspan="3" class="table-success"><div class="ck"><input readonly name="emp_name[]" id="emp_name[]" value="<?php echo $row['emp_name']?>"class="form-control"></td>
          <td colspan="3" class="table-info"><div class="ck"><input readonly name="emp_mailid[]" id="emp_mailid[]" value="<?php echo $row['emp_mailid']?>"class="form-control"></td>
          <td colspan="3" class="table-info"><div class="ck"><input readonly name="nomination[]" id="nomination[]" value="<?php echo $row['nomination']?>"class="form-control"></td>
          <td colspan="3" class="table-info"><div class="ck">
            <label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label> <label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="No">No</label></td>
           <td colspan="3" class="table-info">
          <a href='javascript:void(0);' class='disabled'><span class='glyphicon glyphicon-remove'></span></a></td> </tr>
         <?php $_SESSION['i']++; }?>
         </table>
<!--<script>
$("#attendance").change(function(){
    if($(this).prop("checked") == true){
       alert("1");
    }else{
        alert("0");
    }
});-->

<div class="form-group">
<div class="col-xs-11 text-center">
<button type="submit" class="btn btn-success" id="submit_details" name="submit_details">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

我希望所有单选按钮都存储在一个数组中。我不知道怎么做有人帮助我这样做 这是我的整个代码

{{1}}

2 个答案:

答案 0 :(得分：1)

你应该记住，PHP是在服务器端执行的，JavaScript是在客户端执行的。在这行代码中如此

var newRow = jQuery('[..]id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="[..]');

$_SESSION['i']++在服务器构建响应（HTML）时仅执行一次，并且每次调用javascript函数时不。

所以你应该在JavaScript变量上写一个增量器，而不是PHP变量。

假设您没有使用AJAX更改此表单，我在下面的代码中将$_SESSION['i']替换为普通的PHP变量（因为会话将是一种过度杀伤）：

<? $nextRowId = 0; ?>
[...]
<td colspan="3" class="table-info"><div class="ck">
            <label><input type="radio" name="attendance[<?php echo $nextRowId ?>]" id="attendance[<?php echo $nextRowId  ?>]" value="Yes">Yes</label> <label><input type="radio" name="attendance[<?php echo $nextRowId  ?>]" id="attendance[<?php echo $nextRowId  ?>]" value="No">No</label></td>
<?php $nextRowId++; ?>
[...]
<script type="text/javascript">
    // Store PHP-variable-value of $nextRowId in a JS-variable
    // Inspect your HTML source (F12 in the browser), this will simply be something like: var nextRowId = 1;
    var nextRowId = <?php echo json_encode($nextRowId) ?>;

    function addRow() {
        // Use this JS-variable browser-side
        var newRow = jQuery('<tr><td colspan="3"><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="Yes">Yes</label><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="No">No</label></td></tr>');
        // Increment JS-variable
        nextRowId++;
        jQuery('table.table').append(newRow);
    }

</script>

如果您只是在初始HTML中打印1行，则可以通过跳过PHP变量$nextRowId来简化此操作：

<td colspan="3" class="table-info"><div class="ck">
            <label><input type="radio" name="attendance[0]" id="attendance[0]" value="Yes">Yes</label> <label><input type="radio" name="attendance[0]" id="attendance[0]" value="No">No</label></td>

<script type="text/javascript">
    var nextRowId = 1;
    // And so on

答案 1 :(得分：0)

雅上述评论有效 但是分配

var nextRowId=($('#tb tr').length)-1;//(number of rows fetched from database)-(one header row)

而不是

 var nextRowId = <?php echo json_encode($nextRowId) ?>;

因为这为数组索引创建了冲突。它工作得很好。

相关问题
最新问题