Submit form with data values inserted from AJAX in Laravel

Question

I have the following section of 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>

Now, I have an AJAX POST request where the response inserts the returned data into those fields and textareas:

<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>

The problem is, when I go to submit the form that surrounds this (many more fields, this section is just pulled through an API from a Third-Party), all of the data fields except the ones that are referenced in the AJAX are included in the POST request for the overall form.

why is all the input field and text area disabled ?

Naveen Kumar
– Naveen Kumar

2018-02-23 05:05:12 +00:00
Commented Feb 23, 2018 at 5:05 — Naveen Kumar
– Naveen Kumar, Commented Feb 23, 2018 at 5:05

Faraz Irfan · Accepted Answer · 2018-02-23 05:44:38Z

You need to also remove disabled property after you get ajax response using this

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

here is your solution:

 <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>

HM107 · Accepted Answer · 2018-02-23 04:47:27Z

0

just change the the .val to .attr('value') as laravel is pulling from the DOM and jQuery .val doesnt reflect there.

you can check this link jQuery changing form values not affecting the DOM

also you can test it on jQuery website

answered Feb 23, 2018 at 4:47

HM107

1,3911 gold badge14 silver badges30 bronze badges

Comments

Naveen Kumar · Accepted Answer · 2018-02-23 05:20:59Z

0

disabled input fields will not be submitted with the form. That's the behaviour of disabled.

answered Feb 23, 2018 at 5:20

Naveen Kumar

1,6466 gold badges30 silver badges54 bronze badges

Comments

deepthy · Accepted Answer · 2018-02-23 05:27:39Z

0

I guess you were using the wrong name for input. There is no input name "proNumber". In the HTML it is "pulledProNumber". And also the field is disabled too. Please update your code and see if it fix the problem.

answered Feb 23, 2018 at 5:27

deepthy

365 bronze badges

Collectives™ on Stack Overflow

Submit form with data values inserted from AJAX in Laravel

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related