correctly use array with laravel and database calls

Question

Hi guys so heres my situation, I am integrating stripe into my website which is built on the laravel 5.2 framework and when we issue a bill to someone we will first select if this is going to be a reoccurring bill or not, if it is then i show a drop down with all of the plans (using the id's of the plan) we currently have created in stripe, once a plan is selected I want it to auto fill in the form with the name as well as the price of the plan. I am currently making a call in my controller to retrieve all plans in our stripe account, then we iterate through the collection or array and grab out the id's of the plans and then passing the plan id's to the drop down menu that is in the view. However I need to be able to get the other information for the plan when a certain plan is selected so i can auto fill in the form, how can i do this?

I do have javascript ready to go to auto fill the form, i just dont know how to get the other values that I need such as name and price from the selected plan. I have a feeling im not using arrays correctly. Any help is appreciated.

Administration Controller

try{
            $stripePlanIdsServer = Plan::all()->data;
            $stripePlanIds = array();
            if($stripePlanIdsServer){
                foreach($stripePlanIdsServer as $stripePlanId){
                    $stripePlanIds[] = $stripePlanId->id;
                }
            }
        }catch (\Exception $e){
            return redirect()->route('users.administration.index')->with('error', $e->getMessage());
        }

        return view('users.administration.index', compact('stripePlanIdsServer', 'stripePlanIds'));

Administration View

<div class="row">
                                <div class="col-sm-4 text-center">
                                    <div class="form-group label-floating">
                                        {!! Form::label('reoccurring', 'Reoccurring') !!}
                                        </br>
                                        {!! Form::select('reoccurring', ['Yes'=>'Yes','No'=>'No'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'reoccurring'])!!}
                                    </div>
                                </div>
                                <div class="col-sm-4 text-center">
                                    <div id="planIdDiv" class="form-group label-floating" style="display: none;">
                                        {!! Form::label('planId', 'Plan ID (shows up on customers bank statement') !!}
                                        </br>
                                        {!! Form::select('planId', $stripePlanIds, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'plan'])!!}
                                    </div>
                                </div>
                                <div class="col-sm-2 text-center">
                                    <div id="billStatusDiv" class="form-group label-floating" style="display: none;">
                                        {!! Form::label('billStatus', 'Bill Status') !!}
                                        </br>
                                        {!! Form::select('billStatus', ['Not Paid'=>'Not Paid','Paid'=>'Paid'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'billStatus'])!!}
                                    </div>
                                </div>
                                <div class="col-sm-2 text-center">
                                    <div id="organizationDiv" class="form-group label-floating" style="display: none;">
                                        {!! Form::label('organization', 'Assign Bill To') !!}
                                        </br>
                                        {!! Form::select('organization', $organization, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option'])!!}
                                    </div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="priceDiv" class="form-group label-floating" style="display: none;">
                                        <label class="control-label">Amount to Bill (in dollars)</label>
                                        <input id="price" type="text" name="price" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div id="productNameDiv" class="form-group label-floating" style="display: none;">
                                        <label class="control-label">Product</label>
                                        <input id="productName" type="text" name="productName" class="form-control">
                                    </div>
                                </div>
                            </div>

Answer 1

The good thing is you already pass all your plans to the your view. Now go to your javascript and do

var plans = <php echo json_encode($stripePlanIdsServer);>;

This will make a javascript variable with all your plans in.

Then on your planID select, add an onchange

onchange="showDiv(this)"

In Javascript, define the showDiv() function

function showDiv(elem){
    plans.map( function(item) {
        if ( item.id == elem.value )  {
            //.value is the selected option value 
            //now do something to display the hidden div
            document.getElementById('hidden_plan' + item.id).style.display = "block";
        }
    });
}

Your hidden plans could look like this

<div id="hidden_plan1" style="display: none;">Plan 1</div>
<div id="hidden_plan2" style="display: none;">Plan 2</div>
<div id="hidden_plan3" style="display: none;">Plan 3</div>

This is no THE solution but you've got the idea. The most important thing is that you convert your plans array from php to Javascript so that you can use it in Javascript.

Good luck!