Showing data in input using ajax in laravel

Question

I am using ajax to get some data from db. Now I can get the data at the backend. But the only problem is I just cannot show that in the input below. I also write some code but that's not working. Here is my code. The ajax part is working but not the javascrpit. Help me if you can :)

Code

<script type="text/javascript">

jQuery(document).ready(function () {
    jQuery('select[name="class_id"]').on('change',function() {
        var ClassID = jQuery(this).val();
        if (ClassID) {
            jQuery.ajax({
                url : '/ajaxFee/' + ClassID,
                type : "GET",
                dataType : "json",
                success: function(data) {
                    console.log(data);
                    jQuery('input[name="class_fee"]').empty();
                    jQuery.each(data, function(key,value) {
                        $('input[name="class_fee"]').append(
                          '<option value="' + key + '">' + value + '</option>'
                        );
                    });
                }
            });
        } else {
            $('input[name="class_fee"]').empty();
        }
    });
});

</script>

Please avoid mixing tabs and spaces for indentation. I edited the white-space and indentation for you this time. — cezar
– cezar, Commented May 10, 2019 at 9:39
let chat here chat.stackoverflow.com/rooms/193158/laravel-issues — Zakaria Acharki
– Zakaria Acharki, Commented May 10, 2019 at 16:21

nakov · Accepted Answer · 2019-05-10 09:39:31Z

2

Maybe the mistake is much simpler than you think :)

Change this:

$('input[name="class_fee"]').append('<option value="'+ key +'">'+ value +'</option>');

to this:

$('select[name="class_fee"]').empty();
$('select[name="class_fee"]').append('<option value="'+ key +'">'+ value +'</option>');

You want to append options to a select element, not to an input. And change all the references.

-- EDIT

You should have an element in your page like this:

<select name="class_fee"></select>

You cannot append option to an input element.

edited May 10, 2019 at 9:39

answered May 10, 2019 at 9:32

nakov

14.4k14 gold badges74 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nakov Over a year ago

And do you have an HTML element on the page <select name="class_fee"></select>?

Hasnain Kahn Over a year ago

No I have input type text for class_fee that's why i had changed the select to input in my javascript

nakov Over a year ago

You cannot append options to an input element. So change that.

Hasnain Kahn Over a year ago

Please you can update your answer. So that way I can see my mistake

nakov Over a year ago

@HasnainKahn make sure that the accepted answer is really what you need, because you use each which means you are iterating over a collection which will set your input element value to the last item from the collection. You probably test with a collection of one item and it works now, but if you have more items, it will show just the last one.

Badri Chorapalli · Accepted Answer · 2019-05-10 09:48:42Z

2

I am assuming your getting 'fee' for selected class and data length is 1

Replace

$('input[name="class_fee"]').append('<option value="'+ key +'">'+ value +'</option>');

to

$('input[name="class_fee"]').val(value)

answered May 10, 2019 at 9:48

Badri Chorapalli

998 bronze badges

1 Comment

Badri Chorapalli Over a year ago

@Hasnain Kahn Please let me know what is wrong in my answer.I provided answer before Sahil

Collectives™ on Stack Overflow

Showing data in input using ajax in laravel

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related