Get value from Javascript to HTML in Laravel

Question

I want to ask that how can I call a value from javascript to html blade in laravel.

Here is my JavaScript code:

<script type="text/javascript">
    function valueFunction(){
        var output = document.getElementById('teacherId').value;
        console.log(output);
        document.getElementById('output').innerHTML = output;
    }
</script>

Here is my Laravel Html:

<select id="teacherId" onchange="valueFunction()">
                        <option>Select Teacher</option>
                        @foreach($users as $user)
                        <option value="{{$user->id}}">{{$user->name}}</option>
                        @endforeach
                    </select>
{{$users[]->name}}
<output id="output"></output>

Controller Code:

$users = User::all();
    $students = Students::all();
    return view('admin.assignStudent', compact('users','students'));

As I am getting the value in output tag, but I want to call the value of javascrpt in {{$users[output]->name}} here.

Thank you.

change <output id="output"></output> . to <div id="output"></div> — mujuonly
– mujuonly, Commented Feb 1, 2019 at 6:52
Your current solution is the best ! Print value with mixing javascript and php variable is a bad idea .. — ﾃﾞﾋﾞｯﾄ
– ﾃﾞﾋﾞｯﾄ, Commented Feb 1, 2019 at 6:52
I want to print detail about the selected user thats why i need id to get the data from database — Taimoor
– Taimoor, Commented Feb 1, 2019 at 7:01

Shah Muhammad Talha Tahir · Accepted Answer · 2019-02-01 06:16:34Z

1

In laravel or any other PHP framework you have to call java script function as follows:

{{'<script>valueFunction()</script>'}}

answered Feb 1, 2019 at 6:16

Shah Muhammad Talha Tahir

3561 gold badge3 silver badges11 bronze badges

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

Comments

HKJeffer · Accepted Answer · 2019-02-01 06:29:43Z

0

You can't do it directly, as JavaScript is only executed in the client side without interaction with the blade file.

A suggestion is to set up an API in Laravel, use ajax, XMLHttpRequest or fetch in JavaScript and POST (or other HTTP verbs) to the route. Process and return the data in Laravel. Finally display it in the DOM using JavaScript.

Or if you want the blade template to use the value directly, you may want to use a HTML form to post to Laravel, process the data, then return the view along with the data. Doing so requires the user to navigate to another page (or to the same page again).

answered Feb 1, 2019 at 6:29

HKJeffer

2343 silver badges11 bronze badges

Comments

Tính Ngô Quang · Accepted Answer · 2019-02-01 07:04:02Z

0

Laravel Html

<script type="text/javascript">
    var users = @json($users);
    function valueFunction(){
        var userId = document.getElementById('teacherId').value;
        var user = array.filter(function(arr){return arr.id == userId})[0];
        console.log(user);
        document.getElementById('output').innerHTML = user.name;
    }
</script>

edited Feb 1, 2019 at 7:04

answered Feb 1, 2019 at 6:19

Tính Ngô Quang

4,6721 gold badge38 silver badges35 bronze badges

7 Comments

Taimoor Over a year ago

Thanks for your answer, but i want to call it dynamically, as:

var outputs = document.getElementById('teacherId').value; 			document.getElementById('output').innerHTML = '{{$user[outputs]->name}}';

but i cant call output in '{{$user[outputs]->name}}', it is returning error **Use of undefined constant outputs **

Tính Ngô Quang Over a year ago

My English is not good. Can you describe input and output, pattern?

Taimoor Over a year ago

No problem, the output is the value from dropdown menu in html, dropdown menu is getting options from loop. so m getting selected value in javascript and want to send value to html to print the value in html.

Tính Ngô Quang Over a year ago

I really want to help you, but I really don't understand what you want. Avoid losing your time, others may help better

Taimoor Over a year ago

will edit my code in question, it may help you to understand it better

|

Kapitan Teemo · Accepted Answer · 2019-02-01 07:47:57Z

0

try this and see if it works:

<script type="text/javascript">
    function valueFunction(){
        var output = document.getElementById('teacherId').value;
        console.log(output);


        var data = {!! $sites[output]->name() !!};
        document.getElementById('output').innerHTML = data ;
    }
</script>

answered Feb 1, 2019 at 7:47

Kapitan Teemo

2,1641 gold badge14 silver badges26 bronze badges

1 Comment

Taimoor Over a year ago

Thank you for replying, Tested this getting error : Use of undefined constant output - assumed 'output'

Collectives™ on Stack Overflow

Get value from Javascript to HTML in Laravel

4 Answers 4

Comments

Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related