PHP - form checkbox submit with ajax

Question

I hava set up AJAX script that when you click the button it calls a PHP document.

The problem I have is now some of the variables of the PHP file are set to constant, and now I want them to be conditional to what gets sent when the button is clicked.

I want there to be a check box, that if clicked, will set a PHP variable to be TRUE, while if not click, is set to be FALSE.

I hope the problem is clear enough.

I will now paste the code below because it may help to clarify the problem.

Sorry I have to paste this "huge" chunk of code but I´m not sure which may be useful and which not.

Here is index.html

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","roulette.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Welcome to Trufa&rsquo;s Roulette</h2></div>
<button type="button" onclick="loadXMLDoc()">Spin the Wheel!</button>

</body>
</html>

And here is part of roulette.php

### Comprare pick to result

//The squares

$sqr_00 = -1;
$sqr_0 = 0;
$sqr_1 = 1;


//Placed bets, if true he placed bet

$bet_straight_placed = array(
 $sqr_00 => false, 
 $sqr_0 => true,
 $sqr_1 => true
);

What I would need as I told before, is to replace the FALSE in $sqr_00 => false, for a variable that is true when the checkbox is checked!

I hope the question is clear enough to be understood but PLEASE ask for any clarifications needed!

Thanks in advance!

Trufa

EDIT:

Addressing @grossvogel reply I am posting what I understood of his answer becuse it is not working. Sorry and thank you very much!

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","roulette.php",true);
xmlhttp.send();
}
var isChecked = document.myform.checkbox.checked ? 1 : 0;
xmlhttp.open("GET","roulette.php?boxchecked=" + isChecked,true);
</script>
</head>
<body>

<div id="myDiv"><h2>Welcome to Trufa&rsquo;s Roulette</h2></div>
<form name="myform">
<input type="checkbox" name="checkbox" value="checkbox" />00<br />
<button type="button" onclick="loadXMLDoc()">Spin the Wheel!</button>
</form>

</body>
</html>

and the php

//The squares

$sqr_00 = -1;
$sqr_0 = 0;
$sqr_1 = 1;


//Placed bets, if true he placed bet
$chb_00 = $_GET['boxchecked'];

$bet_straight_placed = array(
    $sqr_00 => (bool) $chb_00,
    $sqr_0 => true,
    $sqr_1 => true
);

//tell the user what number he piecked

echo "You chose this numbers: " . join(", ", array_keys(array_filter($bet_straight_placed))) . '<br />' . '<br />';

I´m sorry I know this must be totally basic but I cant get my head around this AJAX "thing" yet.

Thank you!!!

One recommendation while you try to get the hang of AJAX: use Firebug. It gives helpful errors, lets you put breakpoints in your javascript, and lets you view the contents of all asynchronous requests. Priceless. getfirebug.com — grossvogel
– grossvogel, Commented Oct 19, 2010 at 22:54

grossvogel · Accepted Answer · 2010-10-20 00:56:55Z

1

in your javascript, you can do something like this

var isChecked = document.myform.checkbox.checked ? 1 : 0;
xmlhttp.open("GET","roulette.php?boxchecked=" + isChecked,true);

Then, in your php, you can read $_GET['boxchecked'], which will be 1 if the box was checked, 0 if it wasn't.

EDIT: Extending the idea to more than one field.
To do this, you'd add as many checkboxes as you want, say they're names are value1, value2, value3, .... Then you can do something like this:

var value1 = document.myform.value1.checked ? 1 : 0;
var value2 = document.myform.value2.checked ? 1 : 0;
var value3 = document.myform.value3.checked ? 1 : 0;
...

and

xmlhttp.open("GET","roulette.php?value1=" + value1 + "&value2=" + value2 + "&value3=" + value3 ...,true);

In php, read $_GET['value1'], $_GET['value2'], $_GET['value3']...

Once you get the concepts, you can write some functions to reduce the duplication, if you want.

edited Oct 20, 2010 at 0:56

answered Oct 19, 2010 at 22:00

grossvogel

6,7921 gold badge28 silver badges37 bronze badges

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

11 Comments

Trufa Over a year ago

Should I put: <input type="checkbox" name="checkbox" value="checkbox" />00<br /> in the index.html ?

grossvogel Over a year ago

Yes, you will need to add a checkbox input. it should reside in a form (in my example, name="myform") and its name should match the javascript (in my example, checkbox). The value doesn't matter, but you can add checked="checked" if you want it to start out checked when the page loads.

Trufa Over a year ago

Could you please look at my edit, Im sure this must be absolut basic but I cant yet get it!! Thanks and sorry :)

grossvogel Over a year ago

The form should be named myform and the checkbox should be named checkbox. And for consistent typing, you might want to cast to boolean in your php: $sqr_00 => (bool) $chb_00.

Trufa Over a year ago

@grossvogel still no working could it be somthing to do with the array_filter($bet_straight_placed)?? I posted what I hace done to my code in a new edit, thanks a lot and sorry agin!!

|

Collectives™ on Stack Overflow

PHP - form checkbox submit with ajax

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related