Question

我正在为重复输入系统创建一个表单，该表单将需要多行来提交表单，我借助于jQuery动态创建了表单，并且表单字段有效并非所有字段都可以正常工作，但是单选按钮会产生一些错误，并且无法正常工作,, 而且我还希望一些php代码将数据提交到表中

这是我的代码....

	
$(document).ready(function(){
 
	 var rowCount = 0;
	
 $(document).on('click', '.add', function(){
  var html = '';
html += '<tr>';
	 
html += '<td style="width:90px;"><input type="text"  disabled class="form-control entryid2" value="<?php echo $entry; ?>"  name="entryid2[]" style="width:70px;"/>';
	 	 
html += '<td style="width:170px;" ><input  id="input_date2" type="date" class="form-control date2" value="<?php echo date("Y/m/d"); ?>" name="date2[]" style="width:150px;" required/></td>'; 
	 	

	 
html += '<td><select  name="particular2[]" class="particular2 form-control  show-menu-arrow" data-show-subtext="true" data-live-search="true"  data-validation="required"><option value="-1">select SCOA</option><?php  echo SelectSCOA(); ?></select></td>';
	 
	 
html += '<td><input type="text"  class="form-control description" value="" name="description[]" /></td>';
	 
html += '<td style="width:150px;"><input type="text" style="width:150px;" class="form-control amount" value="" name="amount[]"  required/></td>';
	 
 html += '<td><div class="radio" ' + rowCount + '> <label><input type="radio" name="optradio1[0]" value="0"  required  ' + rowCount + '>cr  </label><label><input type="radio" name="optradio1[1]" value="1" required ' + rowCount + '>dr</label></div></td>';	  
	 
	
	 
 html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
	 

	 
  $('#transaction_table').append(html);
	  rowCount++;
	 
 });
 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.entryid2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter entry id at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.date2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Date at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.particular2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Select SCOA at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
	 
	 $('.description').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Description at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
	 
	 
	 $('.amount').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Amount at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
	 
	 
	 $('.radio').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Select Radio at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
	 
	 
	
	 
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#transaction_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Transaction successFully!</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>

<!DOCTYPE html>
<html>
<head>
	
	<title>Double Entry </title>
	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>
	<link href="bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	
	
</head>
<body>


<form id="insert_form" method="POST"   onsubmit="return validate(this);">
		
		
		
<div class="container_fluid text-center">
 <button  type="submit"  class="btn btn-primary "  value="submit" name="submit" style="padding-left:50px;padding-right:50px; margin-bottom:20px;margin-top:50px;">Add</button>
</div>
		
		
<div class="container text-center table-responsive">	
	
	<span id="error"></span>
	
<table id="transaction_table"  class="table table-bordered table-striped table-highlight">
<tr colspan="7" >
		
 </tr>
	   <thead style="text-align:center;">
		<th>Entry NO</th>
        <th>Date</th>
        <th>Particular</th>
        <th>Description</th>
		<th>Amount</th>
        <th>Cr-Dr</th>
		<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>   
       
      </thead>
		
<tbody>
	

	</tbody>
    </table>
    <script>
	$( "#" ).validate({
    rules: {
        particular1: { required: true }
		
    }
});
	</script>
		
</div>
		
</form>

</body>
</html>

动态添加/删除输入行并提交？

0 个答案: