Ajax + php sending multiple values

n000bie · December 31, 2010

Hello,

What I am trying to do is send values (id of the item and a Boolean value ) to php through ajax while clicking on radio button.

If the radio button is clicked for the first time get the price of the current item and add it to the total amount and if it is clicked for the second time deduct the total amount.

This works if there is only one radio button on the page. Can anyone help me to make this work on multiple radio buttons.

This is my html code

<body>

<h2>Item 1</h2>

<table cellspacing="1" cellpadding="0" class="program"> 
    <tbody><tr>
        <th></th>
        <th>Grade</th>
        <th>Name</th>
        <th>Location</th>
        <th>Days</th>
        <th>Price</th>
    </tr>	
    <tr class="v"><td ><input type="radio" id="a" value="1" name="a" onclick="showData(this.value)" ></td><td>3</td><td>name of item1</td><td>location1</td><td>5</td><td class="price1">100</td></tr>       
    </tbody>
</table>
    
<h2>Item 2</h2>
<table cellspacing="1" cellpadding="0" class="program"> 
    <tbody><tr>
        <th></th>
        <th>Grade</th>
        <th>Name</th>
        <th>Location</th>
        <th>Days</th>
        <th>Price</th>
    </tr>	
          <tr  class="v"><td><input type="radio" id="b" value="2" name="b" onclick="showData(this.value)" ></td><td>4</td><td>name of item 2</td><td>location2</td><td>4</td><td class="price1">200</td></tr><tr class="v"><td ><input type="radio" id="c" value="3" name="b" onclick="showData(this.value)"></td><td>5</td><td>name of item 3</td><td>location3</td><td>8</td><td class="price1">150</td></tr>       
          </tbody>
  </table>


<div style="margin-top:50px; border:5px solid red; padding:10px;"><input name="sumFromAjax" type="text" value="0" id="total" /></div>	

</body>

Javascript

<script type="text/javascript">

var isClicked = false;


function showData(str)
{

isClicked = !isClicked;
    var didHeClick = isClicked ? '1' : '0';
//alert(didHeClick);


var url = "getData.php";
var params = "q="+str+"&clk="+didHeClick;

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)
    {
	var isClicked = false;
	var x = document.getElementById("total").value;
    	document.getElementById("total").value=parseInt(xmlhttp.responseText) + parseInt(x);
    }
  }
xmlhttp.open("GET",url+"?"+params,true);
xmlhttp.send();
}

</script>

PHP code

<?php   
$q=$_GET["q"];
$clicked=$_GET["clk"];

if($q==1){
if($clicked){ 
	$x=100;
} else { $x=-100;}
}
elseif($q==2){ 
if($clicked){ 
	$x=200;
} else { $x=-200;}
}
elseif($q==3){ 
if($clicked){ 
	$x=150;
} else { $x=-150;}
} else {
$x=0;	
}

echo $x;

?>

Sign In

Ajax + php sending multiple values

Recommended Posts

n000bie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information