Passing variable from php to javascript for use as an ID

Question

I am attempting to build a small application where our editors can choose to hide some elements, in this case, Job Names, from a page when it is printed.

However, I cannot seem to get the addclass to work properly. It either does nothing or it adds the class to every checkbox.

To give my checkboxes a unique id, I am using the job name as the ID in php. These come from a database. Input:

<input type='checkbox' id='".$row['name']"'/><div class='tohide ".$row['name']."'>".$row['name']."</div>

Javascript:

var src = <?php echo json_encode($row['name']); ?>;
  $('input#src').change(function(){
    if(this.checked){
      $('.tohide').addClass('bold noprint');
    }else{
      $('.tohide').removeClass('bold noprint');
    }
  })

I have noticed that <?php echo json_encode($row['name']); ?> and <?php echo $row['name']; ?> do not give any results. I am using the same $row['name'] inside the php to generate proper ID'd for the checkboxes.

Client Side code:

<script type="text/javascript">
      var src = "";
      $('input#'+ src).change(function(){
        if(this.checked){
          $('.tohide').addClass('bold noprint');
        }
        else {
          $('.tohide').removeClass('bold noprint');
        }
      })
    </script>

When using json_encode I do get a value of null

And what is the resulting client-side code this generates?

David
– David

2016-06-22 17:59:29 +00:00
Commented Jun 22, 2016 at 17:59 — David
– David, Commented Jun 22, 2016 at 17:59

David · Accepted Answer · 2016-06-22 18:00:16Z

2

This is just a string:

'input#src'

It's not going to interpolate a variable name within the string, it's just a literal string. To use the src variable, concatenate it:

'input#' + src

I also suspect that this may be incorrect:

var src = <?php echo json_encode($row['name']); ?>;

Though you really should look at the actual client-side code to confirm. But if the value is simply a string then I doubt you need json_encode. But you would definitely need quotes around a string:

var src = '<?php echo $row['name']; ?>';

answered Jun 22, 2016 at 18:00

David

221k42 gold badges245 silver badges337 bronze badges

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

5 Comments

Concrete-Cowboy Over a year ago

Thank you @David. However, I am getting an Uncaught Error: Syntax error, unrecognized expression: input#

David Over a year ago

@Concrete-Cowboy: Sounds like you made an error somewhere then. Likely a string quoting mistake. What's the code which produces that error?

Concrete-Cowboy Over a year ago

Full code of javascript: var src = '<?php echo $row['name']; ?>'; $('input#'+ src).change(function(){ if(this.checked){ $('.tohide').addClass('bold noprint'); } else { $('.tohide').removeClass('bold noprint'); } })

Concrete-Cowboy Over a year ago

When I do a console.log(src) I do not get any results

David Over a year ago

@Concrete-Cowboy: Please put code in the question for readability, and include the client-side code that's generating the error, not the server-side code that generates the client-side code.

Nico Andrade · Accepted Answer · 2016-06-22 19:21:20Z

1

The problem why all checboxes change is this:

$('.tohide').removeClass('bold noprint');

All your checkboxes match the expression ".tohide".

You'll want to do $('.tohide.'+this.id).removeClass('bold noprint') instead.

Disclaimer: not tested since you did not provide valid HTML and this is a HTML / JS question. The PHP part is irrelevant.

edited Jun 22, 2016 at 19:21

answered Jun 22, 2016 at 18:56

Nico Andrade

9205 silver badges16 bronze badges

4 Comments

Concrete-Cowboy Over a year ago

This will hide the checkbox when checked, but not the value next to it.

Nico Andrade Over a year ago

Oh, yes, you are right. My bad. You'll want to use the .siblings() method probably.

Concrete-Cowboy Over a year ago

That did it. Add it to the answer so I can select it please.

Nico Andrade Over a year ago

I changed the answer to use a reference with the ID. But if you report exactly what you did, I can update the answer so it reflects the actual solution.

Collectives™ on Stack Overflow

Passing variable from php to javascript for use as an ID

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related