CODEWITHSUNDEEP
phpjavascriptjquery
blsn
blsn

Reputation: 1093

Combined JavaScript and PHP

The script below works fine, it combine JavaScript and PHP. By pressing the button I get its value (buttonValue = 20) and the existing item list (A,B,C) is being replaced by the new list that stopped when $i <= 10 (1,2,3… 10):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){

    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    <?php $i = 1; while ($i <= 10): ?>
    $('<option><?php echo $i; ?></option>').appendTo('#Country select'); 
    <?php $i++; endwhile; ?>
  });
});
</script>

<body>
    <button value="20">click to start</button>
    <div id="Country">
      <select id="City">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
    </div>
</body>

I would like to change the PHP loop so that instead $i <= 10, it will show $i <= $the_buttonValue (assign the button value to show numbers 1,2,3… 20).

I've tried jQuery AJAX functions: load(), get() or the ajax() method, to send the variable to the server but that doesn't seems to solve the above request.

I know that the two sides of PHP and JavaScript are communicate differently and that maybe an AJAX request can get the new requirement to work, but I’m not sure how.

Any tip to make it works as requested, would be greatly appreciated.

Upvotes: 0

Views: 191

Answers (3)

Arpit Singh
Arpit Singh

Reputation: 3467

you dont need php for this particular problem but if you must use it for some reason then you can use jquery load() function like:

your.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){

    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    $('#Country').load('your.php?value='+buttonValue+' #Country')
  });
});
</script>

<body>
    <button value="20">click to start</button>
    <div id="Country">
      <select id="City">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
    </div>
</body>

your.php

<div id="Country">
      <select id="City">

<?php 
    $val = $_GET['value']; //this will be your button value
    $i = 1;
    while (true)
    {
?>
        <option value="">
                    <?php echo $i++; if($i==$val) break; ?>
        </option>
<?php
    }
?>
      </select>
</div>

My first ever stackoverflow answer, hope you will vote up :)

Upvotes: 2

Devon Bernard
Devon Bernard

Reputation: 2300

I think the easiest method would just to be when the button is submitted push that information to both your Javascript variable and a PHP variable; then base your loop of that equivalent PHP variable because trying to set PHP variables and functions based on a javascript value can be much more difficult making posting AJAX data and getting JSON responces.

You could also just do that loop in javascript but that is all about your preferences. It is just difficult to push javascript variables into PHP variables because PHP is always handled server-side while the javascript is executed client-side.

An example of doing everything in javascript would be; instead of 

<script>
$(document).ready(function(){
  $("button").click(function(){

    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    var i = 1;
    while(i <= buttonValue){
    $('<option>' + i + '</option>').appendTo('#Country select'); 
    i++;
    }
  });
});
</script>

Upvotes: 0

0xJoKe
0xJoKe

Reputation: 853

You don't need PHP at all:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    for (var i = 0; i < buttonValue; i++) {
        $('<option>' + i + '</option>').appendTo('#Country select'); 
    }
  });
});
</script>

<body>
    <button value="20">click to start</button>
    <div id="Country">
      <select id="City">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
    </div>
</body>

Upvotes: 0

Related Questions