在HTML表格中添加新行,包括下拉列表,单选按钮和可选文本框

时间:2017-10-16 02:06:32

标签: javascript php html laravel foreach

我正在做一个项目,用户应该可以在表格中的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');
    }
}

0 个答案:

没有答案