Filling a form with Jquery after site loads

Question

I generate a bunch of <div> with information like this:

@foreach($variables as $variable)
    <div id="x1_{{$variable->id}}" value="{{$variable->x1}}"></div>
    <div id="x2_{{$variable->id}}" value="{{$variable->x2}}"></div>
    <div id="y1_{{$variable->id}}" value="{{$variable->y1}}"></div>
    <div id="y2_{{$variable->id}}" value="{{$variable->y2}}"></div>
    <div id="page_{{$variable->id}}" value="{{$variable->page}}"></div>
    <div id="direction_{{$variable->id}}" value="{{$variable->direction}}"></div>
    <div id="variable_{{$variable->id}}" value="{{$variable->variable}}"></div>
@endforeach

Then I want to fill a form when the site is loaded, and whenever the dropdown changes. The dropdown change works, but the fill when it is loaded doesn't. Here is the javascript:

This doesn't work:

$(document).ready(function() {
    var drowndown_value = $(this).children(":selected").attr("value");
    var x1 = $("#x1_" + drowndown_value).attr("value");
    var x2 = $("#x2_" + drowndown_value).attr("value");
    var y1 = $("#y1_" + drowndown_value).attr("value");
    var y2 = $("#y2_" + drowndown_value).attr("value");
    var variable = $("#variable_" + drowndown_value).attr("value");
    var regex = $("#regex_" + drowndown_value).attr("value");
    var direction = $("#direction_" + drowndown_value).attr("value");
    var page = $("#page_" + drowndown_value).attr("value");

    $("#x1").val(x1);
    $("#y1").val(y1);
    $("#y2").val(y2);
    $("#x2").val(x2);
    $("#page").val(page);
    $("#direction").val(direction);
    $("#regex").val(regex);
    $("#variable").val(variable);
});

This works:

$("#variabledropdown").change(function() {
    var drowndown_value = $(this).children(":selected").attr("value");
    var x1 = $("#x1_" + drowndown_value).attr("value");
    var x2 = $("#x2_" + drowndown_value).attr("value");
    var y1 = $("#y1_" + drowndown_value).attr("value");
    var y2 = $("#y2_" + drowndown_value).attr("value");
    var variable = $("#variable_" + drowndown_value).attr("value");
    var regex = $("#regex_" + drowndown_value).attr("value");
    var direction = $("#direction_" + drowndown_value).attr("value");
    var page = $("#page_" + drowndown_value).attr("value");

    $("#x1").val(x1);
    $("#y1").val(y1);
    $("#y2").val(y2);
    $("#x2").val(x2);
    $("#page").val(page);
    $("#direction").val(direction);
    $("#regex").val(regex);
    $("#variable").val(variable);
});

I am taking a wild guess and think that:

var drowndown_value = $(this).children(":selected").attr("value");

Is the problem here but I am not sure how to fix it. Any suggestions.

Try `var drowndown_value = $(this).children(":selected").val();` — T30, Apr 26 '17 at 08:30
on load nothing is actually selected so you never find any children with :selected. You need to set something default as selected — ScanQR, Apr 26 '17 at 08:31
Just FYI you should be using `val()` instead of `attr('value')` — Rory McCrossan, Apr 26 '17 at 08:33
Have you tried find() instead of children()? Children will only look at immediate children, which I'm guessing is not what you want in the ready function — garryp, Apr 26 '17 at 08:40

score 1 · Accepted Answer · edited May 23 '17 at 12:02

The problem is here:

var drowndown_value = $(this).children(":selected").attr("value");

When you do this in the change event of the dropdownlist, then $(this) will be the dropdownlist.

When you do this in the $(document).ready() function, then $(this) will be the document itself.

Your code isn't working in the second case because the document does not have the children that you're expecting to find.

If I were you, I would change both instances with:

var selectedValue = $("#variabledropdown").val()

Your way of doing it isn't particularly wrong, but I would prefer the above alternative because it's more concise and (IIRC) slightly faster.

I would also advocate that you abstract these two functions into a single function (since they are exact copy/pastes of eachother); but that's maybe beyond the scope of your question.

edit

According to this SO question, you don't need to look for the option children in a dropdownlist. As long as the dropdownlist is a single select (i.e. you can't select multiple options), then .val() will automatically look for the selected option.

var selectedValue = $('#variabledropdown').val();

Note that this only works for retrieving the value, not the text. If you want the text of the selected option, then you will actually need to look for the selected option using:

var selectedText = $('#variabledropdown :selected').text();

score 0 · Answer 2 · answered Apr 26 '17 at 08:46

0

I solved this by changing:

var drowndown_value = $(this).children(":selected").attr("value");

to:

var drowndown_value = $("#variabledropdown option:first").val();

Thanks for the comments.

answered Apr 26 '17 at 08:46

prgrm

3,734
14
40
80

Filling a form with Jquery after site loads

2 Answers2