How can I avoid using hidden fields to pass data from PHP to Javascript?

Question

I am developping a website with some serious Javascript involved and I have to use generated data from PHP in my JS code.

For example, to be able to use my page ID in JS, I proceed like this:

<input type="hidden" id="pageId" value="<?php echo $page->getId() ?>" />
<button id="runJs">RUN</button>

And in my javascript (with jQuery):

$(function() {
  $('#runJs').click(function() {
    var id = $('#pageId').val();
  });
});

It works, but is there a cleaner way to do it?

SteeveDroz · Accepted Answer · 2015-05-29 06:40:57Z

3

Since HTML5, one can now add user-made attributes to any HTML tag as long as it starts with data-.

In HTML5:

<button id="runJs" data-pageId="<?php echo $page->getId() ?>">RUN</button>

In JS:

$(function() {
  $('#runJs').click(function() {
    var id = $(this).attr('data-pageId');
  });
});

Or, as said Eric Martinez in the comments, using jQuery:

var id = $(this).data('pageId');

Passing data this way is cleaner for two reasons:

It is not using a side tag that could be confusing.
The data you pass is included in the button, which means another button with its own data-XXX can use the same JS function, even on the same page.

Example

HTML:

<button data-value="5">Square it!</button>
<button data-value="7">Square it!</button>
<button data-value="12">Square it!</button>

JS:

$(function() {
  $('button').click(function() {
    var value = $(this).attr('data-value');
    alert(value * value); // Shows 25, 49 or 144 depending of the button pressed.
  });
});

The function doesn't know the button. The buttons don't even need an ID as long as JS is involved.

edited May 29, 2015 at 6:40

answered May 29, 2015 at 6:25

SteeveDroz

6,1646 gold badges36 silver badges69 bronze badges

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

2 Comments

Eric Martinez Over a year ago

He can even use jQuery.data for that kind of tags.

SteeveDroz Over a year ago

Thanks @EricMartinez, I added your remark in the answer.

truongnguyen1912 · Accepted Answer · 2015-05-29 06:39:23Z

1

You can create variables inside the tag. Like this:

<script>
    var pageId = '<?php echo $page->getId(); ?>';
</script>

Later in your script:

$(function() {
    $('#runJs').click(function() {
        var id = pageId;
    });
});

answered May 29, 2015 at 6:39

truongnguyen1912

1,2459 silver badges7 bronze badges

Collectives™ on Stack Overflow

How can I avoid using hidden fields to pass data from PHP to Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related