Laravel - How to pass a php variable to a javascript function from a blade file

Question

I have an html element inside my blade file:

<input id="check_all" onclick="toggleCheckOrders('$orderFormObject', ' $count')" name="check_all" type="checkbox" value="1">

The onclick handler is assigned a javascript function toggleCheckOrders which accepts two parameters which are objects that were passed from the controller to the blade template. When I do this, it just treats them as strings inside the javascript function, it there a way to pass them while retaining their respective data types?

score 0 · Answer 1 · answered Oct 24 '18 at 16:16

0

You should use:

<input id="check_all" onclick="toggleCheckOrders('{{ $orderFormObject }}', ' {{ $count }}')" name="check_all" type="checkbox" value="1">

In Blade you use {{ ... }} to echo variable value

answered Oct 24 '18 at 16:16

Marcin Nabiałek

109,655
42
258
291

I just tried that but it throws an error: htmlspecialchars() expects parameter 1 to be string, object given – Vince Gonzales Oct 24 '18 at 16:18
@VinceGonzales `json_encode` and then parse on JS side. Laravel's `{{ }}` not only echos but it also escapes via `htmlspecialchars` as the error suggests. – Script47 Oct 24 '18 at 16:19
So it seems, you pass here something else, do you really want to pass the whole PHP object? If yes, you can use `json_encode` – Marcin Nabiałek Oct 24 '18 at 16:19
So it's gonna be: toggleCheckOrders('{{ json_encode($orderFormObject) }}', '{{ $count }}')" . Right? – Vince Gonzales Oct 24 '18 at 16:23
@VinceGonzales remove the single quotes arround the {{ }}. `json_encode` will add quotes to the variable if necessary. – apokryfos Oct 24 '18 at 16:27
I tried json_encode, but when I receive it in the javascript function, the array is empty – Vince Gonzales Oct 24 '18 at 16:27

score 0 · Answer 2 · answered Oct 24 '18 at 16:25

Here's a little helper I wrote for myself:

I added this in my AppServiceProvider.php:

 Blade::directive('jsvar', function ($expression) {
     return "<?php echo json_encode($expression); ?>";
 });

This will allow you to do:

<input id="check_all" onclick="toggleCheckOrders(@jsvar($orderFormObject), @jsvar($count))" name="check_all" type="checkbox" value="1">

If you find yourself passing PHP variables to JavaScript often I highly recommend this approach.

score 0 · Answer 3 · answered Oct 24 '18 at 16:34

0

you can simply do

<input id="check_all" onclick="toggleCheckOrders({{json_encode($orderFormObject)}}, {{ json_encode($count)}})" name="check_all" type="checkbox" value="1">

carefull that associative array will be casted as object in JavaScript

answered Oct 24 '18 at 16:34

N69S

16,110
3
22
36

How do I parse $orderFormObject in the javascript function tho? It's actually a form object passed from the controller – Vince Gonzales Oct 24 '18 at 16:41
well, dump it and check what you need from it. it might not contain what you need anyway. – N69S Oct 24 '18 at 16:42
Yeah I did, but it was an empty object, so I thought there was something else that needed to be done – Vince Gonzales Oct 24 '18 at 16:43
what are you looking for in the first parameter ? – N69S Oct 24 '18 at 16:46
The first parameter is actually a form object from the controller, I'm trying to pass the form object to get the elements of the form. – Vince Gonzales Oct 24 '18 at 16:47

score 0 · Answer 4 · answered Apr 14 '23 at 19:15

In HTML do as seen below:

<input id="check_all" onclick="jsFunction(`{{json_encode($orderFormObject)}}`, `{{ json_encode($count)}}`)" name="check_all" type="checkbox" value="1">

In javascript, do the following:

<script>
  function jsFunction(orderFormObject, count) {
      const orderFormObjectNew = JSON.parse(orderFormObject);

      console.log(orderFormObjectNew);
      console.log(count);
  }
</script>

I hope this will be helpful.

Laravel - How to pass a php variable to a javascript function from a blade file

4 Answers4