如何解决模态动态字段未定义
我在laravel项目上工作,我有一个模态表单,用户可以添加我使用jquery动态添加的新字段,并且效果很好,但是问题是当我将表单值发送给控制器时提交后关闭模态时,动态字段是否未发送或丢失,是否有帮助?
这是模式代码:
<div class="modal fade" id="{{$task->id}}" tabindex="-1" role="">
<div class="modal-dialog modal-login modal-lg" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title" id="exampleModalLabel">Edit Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-row">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="issue"
value="{{$task->issue}}">
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-6">
<select name="tag" id="tag" class="form-control" >
<option value="{{$task->tag}}" selected>{{$task->tag}}</option>
@if($task->tag=='CM')
<option value="PM">PM</option>
@else
<option value="CM">CM</option>
@endif
</select>
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-12">
<textarea class="form-control" name="root_cause"
placeholder="Root Cause"></textarea>
</div>
</div>
<div class="form-row pt-2">
<div class="col-md-8 form-group" id="container{{$task->id}}">
<select class="form-control" name="add_used_part[]" >
<option disabled selected>used spare parts</option>
@foreach($task->machine->part as $part)
<option value="{{$part->id}}"> {{$part->part_name}}
</option>
@endforeach
</select>
</div>
<div class="form-group col-md-4" id="container2{{$task->id}}">
<input type="text" class="form-control " id="quantity"
name="quantity[]" placeholder="Quantity">
</div>
<a href="#" id="filldetails" onclick="addField( '{{$task->machine->part}}','{{$task->id}}' ) ">Add another spare part</a>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary"
onclick="submitajax('{{$task->id}}') ; return
false;">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
此jquery函数:
<script type="text/javascript">
function addField(a,b){
var parts = JSON.parse(a);
// Container <div> where dynamic content will be placed
var container1 = document.getElementById("container"+b);
var container2 = document.getElementById("container2"+b);
//Create and append select list
var selectList = document.createElement("select");
selectList.name="add_used_part[]";
container1.append(selectList);
//Create and append the options
for (var i = 0; i < parts.length; i++) {
var option = document.createElement("option");
option.value = parts[i].id;
option.text = parts[i].part_name;
selectList.append(option);
}
var input = document.createElement("input");
input.type = "text";
input.name = "q";
container2.append(input);
}
function submitajax(id){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var tag = $("#tag").val();
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
/* this alert only one value of the add_used_part and quantity arrays
alert (id+tag+' '+add_used_part+' '+quantity);
$.ajax({
type:'POST',url:"{{ route('task.update',['id' => $task->id ] ) }}",data:{tag:tag,add_used_part:add_used_part,quantity:quantity},success:function(data){
alert(data.success);
}
});
}
解决方法
我认为问题出在这个片段中:
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
您不能以这种方式读取许多值,也许您可以尝试如下操作:
var add_used_part= [];
$.each( $("[name='add_used_part[]']"),function(){
add_used_part.push( $(this).val() )
})
var quantity= [];
$.each( $("[name='quantity[]']"),function(){
quantity.push( $(this).val() )
})
然后通过AJAX请求发送这些数组。
P.S:抱歉,我刚才看到了提问日期:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。