我正在做一个项目,用户应该可以在表格中的HTML表格中填写数据,然后将其提交到数据库。
在表格中,表格如下所示:(第1张照片的上半部分)
但是,当我添加新行时,我没有下拉列表和无线电选项。对于Langauge名称,我想要一个可选的文本框字段,如果用户选择'其他'选项。 该表现在看起来像这样:(第1张照片的下半部分) HTML table before and after adding a row
我知道桌面的php代码是问题,但我不知道如何纠正它。
在数据库中,我只接收第一行的数据,但不接收后续的行。应该有2行具有相同时间戳的条目。 (第2张照片) Database entries of the HTML table
代码如下:
Page5.blade.php (javascript在blade.php文件中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Dynamic Table row creation and Deletion - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
});
</script>
</head>
<body>
@extends('layout.basiclayout')
@section('content')
<p>page 5/7</p>
{!! Form::open(['url' => 'page5/submit']) !!}
<h3 style='text-decoration: underline'>LANGUAGE PROFICIENCY - </h3>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">#</th>
<th class="text-center">Langauge Name:</th>
<th class="text-center">Spoken Proficiency:</th>
<th class="text-center">Written Proficiency:</th>
<th class="text-center">Understanding Proficiency:</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td><div class="form-group">
{{Form::select('Language_Name',array(
'English'=>'English',
'Tamil'=>'Tamil',
'Malay'=>'Malay',
'Chinese'=>'Chinese',
'Brumese'=>'Brumese',
'Filipino'=>'Filipino',
'Indonesian'=>'Indonesian',
'Japanese'=>'Japanese',
'Taiwanese'=>'Taiwanese',
'Thai'=>'Thai',
'Vietnamese'=>'Vietnamese',
'Others'=>'Others' ))}}
</div></td>
<td><div class="form-group">
{{Form::radio('Spoken_Proficiency','Excellent') }} Excellent <br>
{{Form::radio('Spoken_Proficiency','Good') }} Good <br>
{{Form::radio('Spoken_Proficiency','Poor') }} Poor
</div></td>
<td><div class="form-group">
{{Form::radio('Written_Proficiency','Excellent') }} Excellent <br>
{{Form::radio('Written_Proficiency','Good') }} Good <br>
{{Form::radio('Written_Proficiency','Poor') }} Poor
</div></td>
<td><div class="form-group">
{{Form::radio('Understanding_Proficiency','Excellent') }} Excellent <br>
{{Form::radio('Understanding_Proficiency','Good') }} Good <br>
{{Form::radio('Understanding_Proficiency','Poor') }} Poor
</div></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left btn-success">Add Row</a><a id='delete_row' class="pull-right btn btn-default btn-danger">Delete Row</a>
</div>
<br>
<h4><b>Computer Knowledge</b></h4>
<div class="form-group">
{{Form::radio('Computer_Knowledge','Excellent') }} Excellent
{{Form::radio('Computer_Knowledge','Good') }} Good
{{Form::radio('Computer_Knowledge','Poor') }} Poor
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='Language_Name[]"+"' type='text' class='form-control'</td><td><input name='Spoken_Proficiency[]"+"' type='text' class='form-control'></td><td><input name='Written_Proficiency[]"+"' type='text' class='form-control'></td><td><input name='Understanding_Proficiency[]"+"' type='text' class='form-control'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
<br>
<div class="form-group">
{{Form::submit('Next Page', ['class' => 'btn btn-primary'])}}
</div>
{!! Form::close() !!}
</body>
</html>
@endsection
LanguageProficiencyController.php (我知道foreach循环有问题,但我不知道如何解决它)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\LanguageProficiency;
class LanguageProficiencyController extends Controller
{
public function submit(Request $request){
//language proficiency table
foreach($request->get('Language_Name') as $Language_Name) {
$LanguageProficiency = new LanguageProficiency;
foreach($request->get('Spoken_Proficiency') as $Spoken_Proficiency) {
foreach($request->get('Written_Proficiency') as $Written_Proficiency) {
foreach($request->get('Understanding_Proficiency') as $Understanding_Proficiency) {
$LanguageProficiency->Language_Name = $Language_Name;
$LanguageProficiency->Spoken_Proficiency = $Spoken_Proficiency;
$LanguageProficiency->Written_Proficiency = $Written_Proficiency;
$LanguageProficiency->Understanding_Proficiency = $Understanding_Proficiency;
$LanguageProficiency->Computer_Knowledge = $request->input('Computer_Knowledge');
$LanguageProficiency->save();
return redirect('http://formapplication.dev/page6');
}}}}
}
}
迁移file.php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateLanguageProficienciesTable extends Migration{
/**
* Run the migrations.
*
* @return void
*/
public function up(){
Schema::create('language_proficiencies', function (Blueprint $table){
$table->increments('id');
//create table
//$table-> string or integer('field name');
$table->string('Language_Name');
$table->string('Spoken_Proficiency');
$table->string('Written_Proficiency');
$table->string('Understanding_Proficiency');
//ADD SECOND LANGUAGE/DIALECT FIELDS HERE
$table->string('Computer_Knowledge');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(){
Schema::dropIfExists('language_proficiencies');
}
}