Best way to separate PHP and Javascript code

Question

Is there a best way to separate javascript and php code. for example:

//php code
if(condition1)
{
    ?>
    // javascript code
    $card_typej = $(this).val().trim();
    if(condition2)
    {
        $("#id1").html('<?php echo($var1); ?>');
    }
    else
    {
        $("#id1").html('<?php echo($var2); ?>');
    }
    <?php
}
?>

If yes then, how to separate the above code?

First of all, don't prefix JS variables with $. That'll only lead to confusion. — Cerbrus
– Cerbrus, Commented Jul 14, 2015 at 5:57
@Ankur Tiwari: there is no "best way". you just need to make sure everything works as expected and the errors are handled correctly. and, of course, to make sure is easily readable by you or another coder that might need to modify your code. also, you can search for examples over the internet. — machineaddict
– machineaddict, Commented Jul 14, 2015 at 6:43

Pratik Joshi · Accepted Answer · 2015-07-14 06:34:30Z

3

First store required PHP variables in Javascript vars and then manipulate it.

<script>
var var2 = <?php echo json_encode($var2); ?>;
var var1 = <?php echo json_encode($var1); ?>;
if(condition1)
{
    ?>
    // javascript code
    $card_typej = $(this).val().trim();
    if(condition2)
    {
        $("#id1").html(var1);
    }
    else
    {
        $("#id1").html(var2);
    }
    <?php
}
?>
</script>

You can see, complicated php+js code mixture is not there now.

edited Jul 14, 2015 at 6:34

answered Jul 14, 2015 at 6:00

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

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

2 Comments

Barmar Over a year ago

You should use <?php echo json_encode($var2); ?> to ensure that the variable has correct JS syntax.

Pratik Joshi Over a year ago

@AnkurTiwari welcome :) And by the way your twitter is not working

Collectives™ on Stack Overflow

Best way to separate PHP and Javascript code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related