How to create Checkbox without submit button in PHP?

Question

How to create a checkbox for the user without the user needing to submit it?

[] apple
[] grapes
[] oranges
[] mangoes

as soon as the user selects apples,grapes, oranges the SAME page must reload multiple times and say "apples","grapes","oranges" etc

.................. Edit

Actually, I need to pass the variables with values as apple grapes mangoes etc i.e if you are on a page www.abc.com/happy.php after you select apple,grapes etc the page url should display www.abc.com/happy.php&selection=apple_grapes etc

hope it makes sense.

Answer 1

1. Checkboxes are independent of submit buttons. Just write the checkboxes w/o the submit button and you'll have checkboxes w/o a submit button. :)

2. As far as the page "reloading", use JS or a JS framework of your choice (such as jQuery, MooTools, etc) to show the appropriate words on checkbox click.

Let us know if you need more details.

Answer 2

If you don't want the whole page to reload and still by dynamic you'll have to use more than just PHP. You can use an AJAX request to send the server information on which checkboxes are checked, and then reply accordingly. An easier/better solution would be just to have the Javascript that would be required for the AJAX request show the Apples/Grapes/Oranges/Mangoes onclick rather than submitting the form each time a user changes a checkbox.

Answer 3

You only will need some javascript on your checkboxes

<div id="container"></div>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Appel">Apple<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Grape">Grape<br>
<input type="checkbox" onclick="return writeTo(this)" name="check_list" value="Orange">Orange<br>

And you will have this Javascript:

function writeTo(object) {
  var container = document.getElementById("container");
  if (object.checked) {
     container.innerHTML = container.innerHTML + "Added " + object.value + " <br />";   
  } else {
    container.innerHTML = container.innerHTML + "Removed " + object.value + " <br />";   
  }
}

This code will write to your HTML element (id=container) "Added [fruit]" every time you check the fruit. If you uncheck it, it will say, "Removed [fruit]". :P

Please check working example at JSBin