我有一个表单,在其中我用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);
}
对于动态添加的输入字段,点击事件不会被触发。尝试使用事件委派。
试试这个。更改
$('#agregar_estudio').on('click', function(){ }
至
$('body').on('click', '#agregar_estudio', function() { }
您可以使用静态存在的任何父标记来代替body。通常body标签是有效的,所以我刚刚给出了它。