組織名、場所名、建物名の 3 つのパラメーターをパラメーターとして ajax に送信したいと思います。次のようにコーディングしました。ajax から渡された値を取得して、実行する必要があるページで確認したいと思います。
//ajax calling
function ajax()
{
var req;
var org=document.getElementById('category_id').value;
var loc=document.getElementById('category_id1').value;
var bui=document.getElementById('category_id2').value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
req=new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("POST", "addmachine.php?org="+org+"&loc="+loc+"&bui="+bui+"", true);
req.send();
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
$(".error").hide();
result=req.responseText
}
}
<form name="theForm" method="post" action="addmachine.php" enctype="multipart/form-data" onSubmit="return validate();">
<label for="orgname">Organisation Name</label>
<select style="width: 305px;text-align:left ;" name="category_id" id="category_id" onchange="OrganisationName(this);">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<p>
<label name="location">Location</label>
<select style="width: 305px;" name="category_id1" id="category_id1" onchange="LocationName(this);" >
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<p>
<label for="building">Building</label>
<select style="width: 305px" name="category_id2" id="category_id2" onchange="BuildingName(this);" onchange="ajax(this);">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<label for="entr/exi">Entrance/Exit</label>
<input type="text" name="ent" id="ent" placeholder="enter entrance/exit"/>
<p>
<label for="type">Type</label>
<input type="text" name="type" placeholder="enter your work station"/>
<label for="name">Name</label>
<input type="text" id="workstnname" name="workstnname" placeholder="enter your work station" onblur="return name();" onkeypress="return onKeyPressBlockNumbers(event);">
<label for="description">Description</label>
<textarea name="description" style="height:150px;width:300px;"></textarea>
<label for="machinetype">Machine Type</label>
<select style="width: 305px;text-align:left;" name="machinetype">
<option value="">Select</option>
<option value="kiosk">kiosk</option>
<option value="workstation">workstation</option>
</select>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>
</div>
ここで建物の変更機能について、私は ajax を呼び出して addmachine.php という名前の php ページを、選択した組織、場所、および建物としてのパラメータで実行することになっています。建物のonchangeで実行するphpはこちら
<?php
session_start();
$org=$_GET['org'];
$loc=$_GET['bui'];
$bui=$_GET['loc'];
$addmachine=array(
'org_name'=>$org,
'loc_name'=>$loc,
'building_name'=>$bui
);
echo json_encode($addmachine);
$url='web service url';
$data="$addmachine";
echo("Input to Server : ".$data."\n");
$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($addmachine));
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
$response= curl_exec($ch);
echo('\n'."Server response : \n \n".$response);
curl_close($ch);
?>