Laravel 5.1 和 JavaScript - 向表单添加新输入

Question

我有一个表单，我在其中添加了带有 javascript 的输入字段：

$('#body_estudios').append(outputHtml);

一切都很完美，但是当我尝试将编辑表单保存在控制器中时：

$input = $request->all();

动态生成的字段不存在，该指令只获取正常的输入字段。那么，如何将这些字段链接到表单，以便浏览器读取并发送到控制器？

编辑： javascript：

$('#agregar_estudio').on('click', function(){
    event.preventDefault();
    var indice = $('#estudios_tabla').data("index");
    var newindice = $('#estudios_tabla').data("newindex");
    $('#estudios_tabla').data("newindex", newindice+1);
    var cloned_estudios = select_estudios;
    var cloned_ric = select_ric;
    var cloned_satis = select_satisfaccion;
    var outputHtml = "<tr id='estudio_line_"+newindice+"'>";
    outputHtml = outputHtml+"      <td width='10%' style='text-align: center;'>";
    outputHtml = outputHtml+"        <a href='#' title='Borrar fila' id='remove_row_"+newindice+"_estudios' class='btn btn-danger tooltips tooltips-right' style='clear: both;'  data-remove='estudio_line_"+newindice+"'>";
    outputHtml = outputHtml+"          <i class='fa fa-ban'></i>";
    outputHtml = outputHtml+"          <span>Borrar (sen gardar)</span>";
    outputHtml = outputHtml+"        </a>";
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"      <td width='10%'>";
    outputHtml = outputHtml+"        <input type='text' value='' name='ano_estudio_"+newindice+"' class='form-control' id='ano_estudio_"+newindice+"' />";
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"      <td width='20%'>";
    outputHtml = outputHtml+"        "+cloned_estudios.replace("niveles_estudios","niveles_estudios_"+newindice);
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"      <td width='10%'>";
    outputHtml = outputHtml+"        "+cloned_ric.replace("ric_estudios","ric_estudios_"+newindice);
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"      <td width='30%'>";
    outputHtml = outputHtml+"        <input type='text' value='' class='form-control' name='especialidad_estudios_"+newindice+"' id='especialidad_estudios_"+newindice+"' />";
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"      <td width='20%'>";
    outputHtml = outputHtml+"        "+cloned_satis.replace("satisfaccion_estudios","satisfaccion_estudios_"+newindice);
    outputHtml = outputHtml+"      </td>";
    outputHtml = outputHtml+"    </tr>";
    $('#body_estudios').append(outputHtml);
    $('#remove_row_'+newindice+'_estudios').click(borrar_fila);
  });

HTML (Laravel Blade)

{!! Form::model($cliente, [
  'method' => 'POST',
  'id' => 'profile_form',
  'route' => ['perfilcliente', $cliente->id]
]) !!}
<table id="estudios_tabla" class="table table-flipscroll table-responsive table-hover table-striped" data-newindex="<?php print $last_estudio_index; ?>" data-index="<?php print $last_estudio_index-1; ?>">
                <thead>
                  <tr>
                    <th>Operacións</th>
                    <th>Ano</th>
                    <th>Nivel de Estudios</th>
                    <th>RIC</th>
                    <th>Especialiadad</th>
                    <th>Satisfacción</th>
                  </tr>
                </thead>
                <tbody id="body_estudios">
                  @foreach($estudios_array as $estudio_cursado)
                  <tr id="estudio_line_<?php print $estudio_cursado['id_estudio']; ?>">
                    <td width="10%" style="text-align: center;">
                      <a href="#" title="Borrar fila" id="remove_row_<?php print $estudio_cursado['id_estudio']; ?>" class="btn btn-danger tooltips" style="clear: both;" data-remove="estudio_line_<?php print $estudio_cursado['id_estudio']; ?>">
                        <i class="fa fa-ban"></i>
                        <span></span>
                      </a>
                    </td>
                    <td width="10%">
                      {!! Form::text('ano_estudios', $estudio_cursado['ano'], ['class' => 'form-control', 'id'=>'select_estudios_html']) !!}
                    </td>
                    <td width="20%">
                      {!! Form::select('niveles_estudios',
                            $items_estudios,
                            $estudio_cursado['id_estudio'],
                            ['class' => 'form-control'])
                      !!}
                    </td>
                    <td width="10%">
                      {!! Form::select('ric_estudios',
                            ['r'=>'Realizado', 'i'=>'Iniciado','c'=>'En curso'],
                            $estudio_cursado['ric'],
                            ['class' => 'form-control', 'id'=>'test'])
                      !!}
                    </td>
                    <td width="30%">
                      {!! Form::text('especialidad_estudios', $estudio_cursado['especialidad'], ['class' => 'form-control']) !!}
                    </td>
                    <td width="20%">
                      {!! Form::select('satisfaccion_estudios',
                            ['baja'=>'Baixa', 'media'=>'Media','alta'=>'Alta'],
                            $estudio_cursado['satisfaccion'],
                            ['class' => 'form-control'])
                      !!}
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
    {!! Form::submit('Gardar', ['class' => 'btn btn-primary pull-right']) !!}
{!! Form::close() !!}

控制器：

public function guardaPerfil(Request $request, $id){
  $cliente = Cliente::findOrFail($id);
  $input = $request->all();
  print_r($input);
}

Answer 1

动态添加的输入字段不会触发 click 事件。 尝试使用事件委托。

试试这个。 改变

$('#agregar_estudio').on('click', function(){ }

到

$('body').on('click', '#agregar_estudio', function() { }

您可以使用静态存在的任何父标记代替 body。通常身体标签有效，所以我刚刚给出了它。