CODEWITHSUNDEEP
javascriptphpjquery
DevTN
DevTN

Reputation: 593

how to use a PHP variable inside <script> tag

I am passing PHP variables in URL, so my page link looks like this www.example.com?redirect=neworders

Based on $_GET['redirect'] value I create the content of my page in my example the input

Then in the <script> part I want to call a function with parameters based on the PHP value.

My current code is working for now But I believe that's not the correct way how it should be done although I checked multiple threads and usually answers were one of the option I mentioned.

Any suggestions please if I am doing it right ? I added comments in my code to be understand my case. Thank you very much.

    <?php 
    
   //my url can be either www.example.com?redirect=neworders or www.example.com?redirect=deliveredorders

    switch($_GET['redirect']) {
      case 'neworders':
          $page = 'Backlog'; 
          break;
      case 'deliveredorders':  
          $page = 'Shipment';   
          break;
          }
    
    ?>
    
      <body>
    //based on $page value, I create the input value with a specific id
    <?php  
    if ( $page == 'neworders') { 
     echo '<input type="text" id="BacklogName" placeholder="enter order number">'; }
    elseif ( $page == 'deliveredorders') { 
     echo '<input type="text id="ShipmentName" placeholder="enter order number then serial number">'; 
    } 
    ?> 
    
    <button type="button" id="submitButton">Submit</button>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
      </body>
    
    <script>
    $(document).ready(function() { 
    
      //I have some functions declared here to use based on $page value

    function submitEvent(element, input) {
    element.click(function() {      
      alert(input.val());
      }); 
    }
    
    //based on $page value, intialize the function with exact selectors
    
    //first Option came to my mind : check the $page value and echo function intialization as string
    <?php 
    if ( $page == 'neworders') { 
      echo 'submitEvent($("#submitButton"), $("#BacklogName"));'; }
    elseif ( $page == 'deliveredorders') { 
      echo 'submitEvent($("#submitButton"), $("#ShipmentName"));'; } 
    ?> 
    
    //second option came to my mind : use javascript 'if else' and only echo the $page value
    
    if ("<?php echo $page; ?>" == "neworders") { 
      submitEvent($("#submitButton"), $("#BacklogName")); }
    else if ("<?php echo $page; ?>" == "deliveredorders") { 
      submitEvent($("#submitButton"), $("#ShipmentName")); 
    }
    
    });
    </script>

Upvotes: 1

Views: 8235

Answers (5)

cagri
cagri

Reputation: 828

Correct way to pass variables to JS is with using json_encode:

var page = <?=json_encode($_GET['redirect'])?>;
if (page == "neworders") { 
  submitEvent($("#submitButton"), $("#BacklogName")); }
else if (page == "deliveredorders") { 
  submitEvent($("#submitButton"), $("#ShipmentName")); 
}

<?=$var?> is shorthand echo

Upvotes: 0

SubCore
SubCore

Reputation: 591

It's a wrong question. Your code works well but your $page can never be 'neworders' or 'deliveredorders' in your conditions. You assign $page to 'Backlog' or 'Shipment'. Change the switch block or your if/else conditions

switch($_GET['redirect']) {
      case 'neworders':
          $page = 'neworders'; 
          break;
      case 'deliveredorders':  
          $page = 'deliveredorders';   
          break;
}

Upvotes: 0

Hammad Ahmed khan
Hammad Ahmed khan

Reputation: 1671

you can use it like :

<script type="text/javascript">
  
    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

Upvotes: 6

appsdevpk
appsdevpk

Reputation: 198

Here is the much simpler solution to your problem, add as many redirects option in the array as you want.

<?php 
    $redirectsList = array(
        'neworders'=>array(
            'Page'=>'Backlog',
            'ElementID'=>'BacklogName',
            'Placeholder'=>'enter order number'
        ),
        'deliveredorders'=>array(
            'Page'=>'Shipment',
            'ElementID'=>'ShipmentName',
            'Placeholder'=>'enter order number then serial number'
        )
    );
    $redirect = isset($_GET['redirect']) ? $_GET['redirect'] : '';
    $redirectData = isset($redirect!='' && isset($redirectsList[$redirect])) ? 
    $redirectsList[$redirect] : '';    
?>
<body>
    <input type="text" id="<?php echo $redirectData['ElementID']; ?>" placeholder="<?php echo $redirectData['Placeholder']; ?>">
    <button type="button" id="submitButton">Submit</button>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
    <script>
    $(document).ready(function() { 
        $('#submitButton').click(function(){
            alert($('#<?php echo $redirectData['ElementID']; ?>').val());
        });
    });
    </script>
</body>

Upvotes: 2

Encycode
Encycode

Reputation: 783

You can try something like this:

<?php
    $var = "123";
?>

<script type="text/javascript">
    alert("<?php echo $var; ?>");
</script>

Or In you case you could simply store the php variable to javascript variable

var page = "<?php echo $_GET['redirect']; ?>";

than you can do watever with javascript variable in script

Upvotes: 2

Related Questions