How to populate javascript with php array?

Question

I have the following Javascript which allows me to generate a select input box when a button is clicked and append the select box to the .cardday div:

        <script>
            $('input[name="queue"]').click(function(){
                $("<select name='select[]'>"+
                    "<option value='volvo'>Volvo</option>"+
                    "<option value='saab'>Saab</option>"+
                    "<option value='mercedes'>Mercedes</option>"+
                    "<option value='audi'>Audi</option>"+
                    "</select>").appendTo('.cardDay');
            })
</script>

I also have a PHP array with the values that I need to put inside the select box. This array is called $exerciseList

How can I have it so when the select box is added to the card div it will have populated with the PHP array $exerciseList key and value?

Full file as requested:

    @extends('layouts.app')

@section('content')

<div class="card" style="padding:10px;">
        {!! Form::open(['action' => ['ExercisePlansController@store'], 'method' => 'POST']) !!}
        <center><h3 style="margin-top:10px;margin-bottom:20px;">Create Training Plan
                {{ Form::submit('Create this Plan', ['class' => 'btn btn-success', 'style' => 'float:right;align:right;margin-right:10px;']) }}
                </h3></center>
    <hr style="margin:10px;"></hr>


    <div class="form-group">
            {{ Form::label('title', 'Name') }}
            {{ Form::text('title', '', ['class' => 'form-control', 'placeholder' => 'Exercise Plan Name E.g Advanced Bulking']) }}
    </div>
    <div class="form-group">
        {{ Form::label('plan', 'Calender Plan') }}</br>
        <div class="col-md-2" style="padding:0px 10px 0px 0px;flex:0%;">
            <div class="cardDay" style="padding:10px;background-color:#c7e0fc;">

                <h3 style="margin-bottom:3px;">
                    <center>Monday</center>
                    <hr style="margin:10px;"></hr>
                </h3>
                <input class="btn btn-primary" style="font-family:Helvetica;padding:10px;margin:5px 0px 5px 0px;width:100%;" name="queue" value="Add Exercise">
                    <div class="panel-group">
                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h4 class="panel-title">
                              <a data-toggle="collapse" href="#collapse1001">New Exercise</a>
                            </h4>
                          </div>
                          <div id="collapse1001" class="panel-collapse collapse in">
                                <div class="panel-body">

                                    <div class="form-group">    
                                        {{ Form::label('exerciseList', 'Exercise') }} <br/>
                                        {{ Form::select('exerciseList[]', $exerciseList) }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('description', 'Exercise Description') }} <br/>
                                            <a class="card-link"  href="./exercise/">Exercise Details</a><br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('reps', 'Number of Reps') }} <br/>
                                            {{ Form::text('reps[]', "") }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('sets', 'Number of Sets') }} <br/>
                                            {{ Form::text('sets[]', '') }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('weight', 'Weight (kg)') }} <br/>
                                            {{ Form::text('weight[]', '') }} <br/>
                                    </div>     
                                </div>

                          </div>
                        </div>
                      </div>
        </div>
            <center>
            {{ Form::hidden('_method', 'PUT') }}

            </center>
        {!! Form::close() !!}
        "{{ Form::label('exerciseList', 'Exercise') }} <br/>"+
        "{{ Form::select('exerciseList[]', $exerciseList) }} <br/>"+
        <script>
            $('input[name="queue"]').click(function(){
                $("<select name='select[]'>"+
                    "<option value='volvo'>Volvo</option>"+
                    "<option value='saab'>Saab</option>"+
                    "<option value='mercedes'>Mercedes</option>"+
                    "<option value='audi'>Audi</option>"+
                    "</select>").appendTo('.cardDay');
            })
        </script>
@endsection

Post your html file. Basically you just need to iterate over your array before the page render — Luis felipe De jesus Munoz
– Luis felipe De jesus Munoz, Commented Apr 16, 2018 at 18:38
I don't understand what you are trying to achieve here. Do you want to populate $exerciseList from PHP to select box when you click a button? — Tushar Niras
– Tushar Niras, Commented Apr 16, 2018 at 18:39
The array $exerciseList is already populated. When the button is click, this javascript adds a new div to my page and inside that new div is this select box. I need the select box to contain the values that are already stored in $exerciseList. Does that make any more sense? — d3t0x
– d3t0x, Commented Apr 16, 2018 at 18:43
Possible duplicate of Generating a JavaScript array from a PHP array — Dexygen
– Dexygen, Commented Apr 16, 2018 at 18:47

ArcherBoy27 · Accepted Answer · 2018-04-16 19:02:45Z

2

Have the server generate the Javascript:

<script>
    $('input[name="queue"]').click(function(){
    $("<select name='select[]'>"+
    <?php foreach ($exerciseList as $value){ ?>
        "<option value='<?php echo $value; ?>'><?php echo $value; ?></option>"+
    <?php } ?>
    "</select>").appendTo('.cardDay');
    })
</script>

Therefore, when the Javascript is loaded in the browser the code will have your PHP variable values included.

edited Apr 16, 2018 at 19:02

answered Apr 16, 2018 at 18:42

ArcherBoy27

1501 silver badge9 bronze badges

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

5 Comments

d3t0x Over a year ago

Something like this but I was trying this with a for loop to get the data out of the $exerciseList array. The $exerciseList array is large and changes from time to time.

d3t0x Over a year ago

Looks like what I am after, I didn't know you could use a for inside js. I need to bite the bullet and learn js. Anyway I am getting Undefined variable: value

ArcherBoy27 Over a year ago

ive just remembered you will need to wrap the foreach opening and closing segments in php tags but this code will work foryou needs

d3t0x Over a year ago

Worked. Thank you!

ArcherBoy27 Over a year ago

No problem at all :)

Julian Mendez · Accepted Answer · 2018-04-16 18:50:00Z

1

Use php serverside to generate the scripts.

<script>
    $('input[name="queue"]').click(function(){
    $("<select name='select[]'>"+
    @for($list in $exerciseList)
        "<option value={{ $list}}> {{ $list}} </option>"+
    @endfor
    "</select>").appendTo('.cardDay');
    })
</script>

answered Apr 16, 2018 at 18:50

Julian Mendez

3,4204 gold badges17 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to populate javascript with php array?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related