1

I have a series of simple checkboxes. 

<select>
    <option class="menuoption2" value="gold">Gold</option>
    <option class="menuoption2" value="silver">Silver</option>
    <option class="menuoption2" value="bronze">Bronze</option>
</select>

I want to get only the checked ones into a PHP variable. However note there is no Submit button. This is on purpose and not allowed by the brief i have been given; my variables' values have to be on display in a simple <div> as soon as the checkboxes are clicked. I cannot have the page refreshed either. I know I can use $_POST - but only if i could submit anything and also I could use jQuery (indeed i have done this before) to do this but ultimately I need those values in that PHP variable, not a JS variable. Any ideas?

Liam
  • 156
  • 9
  • Why can't you wrap the `select` in a `form` and add a `submit` button? – The Codesee May 13 '16 at 14:33
  • @Liam You should look into [update-div-with-jquery-ajax-response](http://stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html) You can update the div with anything returned from the aJax request. – GrumpyCrouton May 13 '16 at 14:38

1 Answers1

0

HTML

<select onchange="postit(event)">
    <option class="menuoption2" value="gold">Gold</option>
    <option class="menuoption2" value="silver">Silver</option>
    <option class="menuoption2" value="bronze">Bronze</option>
</select>

JS / AJAX

Posts the value to update.php where metal=value

<script type="text/javascript">//<![CDATA[

var xmlhttp;
function postit(event){
   var value = event.target.value;
  xmlhttp=null;
  var Url="update.php"
  if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (xmlhttp!=null) {
    xmlhttp.onreadystatechange=getResponse;
     xmlhttp.open("POST", Url, true);
     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
     xmlhttp.send( "metal=" + value);  
  } else {
     alert("UNEXPECTED ERROR: XMLHttpRequest not supported");
  }
}
function getResponse(){
  if (xmlhttp.readyState==4){
    if (xmlhttp.status==200){
      var json = JSON.parse(xmlhttp.responseText);
    }
    else{
      alert("UNEXPECTED AJAX ERROR: : " + xmlhttp.statusText + "HTTP Status: " + xmlhttp.status);
    }
  }
}
//]]>
</script>

PHP

<?php
$metal = $_POST['metal'];

// This is just to validate the received data, 
// mostly needed if you are storing in a database.
$metals = array('gold','silver','bronze');
$status = 'fail';
if($metals[$metal] != null){
   $status = 'pass';
  //store $metal
}

//To return a value to JS after the update, add the code below

$return['status'] = $status;
header(header('Content-Type: text/json; charset=utf-8');
echo json_encode($return);
?>

No Return Value to JS

Remove these two lines from the JS

var Url="update.php"
xmlhttp.onreadystatechange=getResponse;

Remove the function getResponse()

move global var xmlhttp; into the postit() function as a local var:

From

var xmlhttp;
function postit(){

To

function postit(){
var xmlhttp;
Misunderstood
  • 5,534
  • 1
  • 18
  • 25
  • Hiya, thanks for your input but sorry but I don't understand a couple of things (I am very new to PHP) so i am gonna have to ask: 1. Is `update.php` the name of my page I am doing all this on? 2. Where do I have to put the JS piece of code? Can i just put that within the same ` – Liam May 16 '16 at 09:32
  • I edited my answer combining JS and AJAX (AJAX is JS). Copy the JS/AJAX into your HTML page, right before the closing `

    ` tag. The AJAX will post the `metal` value to the update.php script. I will add some PHP to receive the post. I do not know why you are doing this so I cannot help you too much with saving it. I suspect there may be a better way to do whatever it is you are trying to do. AJAX is still good to know.

     – Misunderstood May 16 '16 at 18:29