0

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.

Improve this question
12
  • Why don't you just use JavaScript for that loop? Commented Jan 12, 2013 at 21:23
  • Where? How? Can you be more specific in your question? Commented Jan 12, 2013 at 21:24
  • How do you set the value of the button (i.e., value="20")? Commented Jan 12, 2013 at 21:25
  • @ pete, This is exactly my question, how to assign the var ‘buttonValue’. Commented Jan 12, 2013 at 21:29
  • Let me rephrase. Where is the 20 coming from? A client-side input? Is it set by value="<?php echo $value; ?>"? Is it just static text in your HTML? Commented Jan 12, 2013 at 21:31

3 Answers 3

Reset to default
2

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 :)

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

4 Comments

@ Arpit Singh, thanks but I can’t see in ‘your.html’ any code calling to ‘your.php’
@user203952 : $('#Country').load('your.php #Country'), the jquery load() function has its first parameter as the url to which the call will be made , i will edit it now, u should see how i added value=20 inside the url so as to assist GET inside php
@user203952: Correction $('#Country').load('your.php?value='+buttonValue+' #Country')
@user203952 i'm sorry i missed out on passing the buttonValue to the php script but i have edited my answer, also keep both the files in same dir
0

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>
Improve this answer

1 Comment

@ 0xJoKe, In the original code $i is replaced by a PHP function (<?php echo list_city_name(); ?>), so I must use PHP ($i).
0

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>
Improve this answer

3 Comments

@ Devon Bernard, I cannot understand your suggestion, please can you show a short code of what you mean.
@ Devon Bernard, in the original code, the loop is a PHP function (<?php while(has_list_cities()) { ?>, I must use a PHP loop.
@user203952: I am not exactly sure by what you mean by that because I do not see the context code... but you should just be able to throw this java function within your PHP while loop.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.