在 Laravel 中提交从 AJAX 插入的数据值的表单

Question

我有以下html部分：

<div class="box-body" style="display:none;" id="claimFreightDetails">
                    <input type="text" disabled class="form-control" id="pulledProNumber" name="pulledProNumber"><br>
                    <strong>Origin Information</strong><br>
                    <textarea disabled class="form-control" id="claimFreightOrigin" name="claimFreightOrigin"></textarea><br>
                    <strong>Consignee Information</strong><br>
                    <textarea disabled class="form-control" id="claimFreightConsignee" name="claimFreightConsignee"></textarea><br>
                    <strong>Weight</strong>
                    <input type="text" disabled class="form-control" id="claimWeight" name="claimWeight"><br>
                    <strong>Pieces Count</strong><br>
                    <input type="text" disabled class="form-control" id="claimPieces" name="claimPieces"><br>
            </div>

现在，我有一个 AJAX POST 请求，其中响应将返回的数据插入到这些字段和文本区域中：

<script>
 $(document).on('click', '#pullDetails', function() {
        $('#freightBillDetails').removeClass('hidden'); 
        $.ajax({
            type:'POST',
            url: '/carrier/claims/pullDetails',
            data: {
                num: $('input[name=proNumber]').val(),
                _token: $('input[name=_token]').val()},
            dataType: 'json',
            success: function(data) {
                if(data.details != undefined) {
                        console.log('success');
                        var results = JSON.parse(data.details);
                            $('#pulledProNumber').val(results.SearchResults[0].SearchItem);
                            $('#claimWeight').val(results.SearchResults[0].Shipment.Weight);
                            $('#claimPieces').val(results.SearchResults[0].Shipment.Pieces);
                            $("#claimFreightOrigin").html(results.SearchResults[0].Shipment.Origin.Name + '&#013;&#010;'+ results.SearchResults[0].Shipment.Origin.Address1 +'('+results.SearchResults[0].Shipment.Origin.Address2+')&#013;&#010;'+ results.SearchResults[0].Shipment.Origin.City + ', '+ results.SearchResults[0].Shipment.Origin.State + ' '+ results.SearchResults[0].Shipment.Origin.PostalCode);
                            $("#claimFreightConsignee").html(results.SearchResults[0].Shipment.Consignee.Name + '&#013;&#010;'+ results.SearchResults[0].Shipment.Consignee.Address1 +'('+results.SearchResults[0].Shipment.Consignee.Address2+')&#013;&#010;'+ results.SearchResults[0].Shipment.Consignee.City + ', '+ results.SearchResults[0].Shipment.Consignee.State + ' '+ results.SearchResults[0].Shipment.Consignee.PostalCode);

                            $('#openInvoicesOverlay').html('');
                            $('#openInvoicesOverlay').removeClass('overlay');

                            $('#claimFreightDetails').show();

                    }else{
                        console.log('failed');
                        console.log(data);
                        console.log(data.details['SearchResults'].SearchItem); 
                    }
            },
            error: function(data) {
                console.log('error');
                console.log(data);
            }
        });
    });
</script>

问题是，当我提交围绕此的表单时（更多字段，此部分只是通过来自第三方的 API 提取），除了在AJAX 包含在整个表单的 POST 请求中。

Answer 1

您还需要在使用此方法获得 ajax 响应后删除 disabled 属性

$('.YourDisabledInput').prop("disabled", false);

这是您的解决方案：

 <script>
     $(document).on('click', '#pullDetails', function() {
            $('#freightBillDetails').removeClass('hidden'); 
            $.ajax({
                type:'POST',
                url: '/carrier/claims/pullDetails',
                data: {
                    num: $('input[name=proNumber]').val(),
                    _token: $('input[name=_token]').val()},
                dataType: 'json',
                success: function(data) {
                    if(data.details != undefined) {
                            console.log('success');
                            var results = JSON.parse(data.details);
                                $('#pulledProNumber').val(results.SearchResults[0].SearchItem);
                                $('#claimWeight').val(results.SearchResults[0].Shipment.Weight);
                                $('#claimPieces').val(results.SearchResults[0].Shipment.Pieces);
                                $("#claimFreightOrigin").html(results.SearchResults[0].Shipment.Origin.Name + '&#013;&#010;'+ results.SearchResults[0].Shipment.Origin.Address1 +'('+results.SearchResults[0].Shipment.Origin.Address2+')&#013;&#010;'+ results.SearchResults[0].Shipment.Origin.City + ', '+ results.SearchResults[0].Shipment.Origin.State + ' '+ results.SearchResults[0].Shipment.Origin.PostalCode);
                                $("#claimFreightConsignee").html(results.SearchResults[0].Shipment.Consignee.Name + '&#013;&#010;'+ results.SearchResults[0].Shipment.Consignee.Address1 +'('+results.SearchResults[0].Shipment.Consignee.Address2+')&#013;&#010;'+ results.SearchResults[0].Shipment.Consignee.City + ', '+ results.SearchResults[0].Shipment.Consignee.State + ' '+ results.SearchResults[0].Shipment.Consignee.PostalCode);

                                $('#openInvoicesOverlay').html('');
                                $('#openInvoicesOverlay').removeClass('overlay');

                                $('#claimFreightDetails').show();

                               $('#pulledProNumber').prop("disabled", false);
                               $('#claimWeight').prop("disabled", false);
                               $('#claimPieces').prop("disabled", false);
                               $('#claimFreightOrigin').prop("disabled", false);
                               $('#claimFreightConsignee').prop("disabled", false);


                        }else{
                            console.log('failed');
                            console.log(data);
                            console.log(data.details['SearchResults'].SearchItem); 
                        }
                },
                error: function(data) {
                    console.log('error');
                    console.log(data);
                }
            });
        });
    </script>

Answer 2

只需将 .val 更改为 .attr('value')，因为 laravel 正在从 DOM 中提取，而 jQuery .val 没有反映在那里。

您可以查看此链接 jQuery changing form values not affecting the DOM

你也可以在jQuery website上测试它

Answer 3

禁用输入字段将不会与表单一起提交。这就是disabled的行为。

Answer 4

我猜您输入的名称错误。 没有输入名称“proNumber”。在 HTML 中，它是“pulledProNumber”。 而且该字段也被禁用。 请更新您的代码，看看它是否能解决问题。