|
 |
| |
การใช้ ajax ในการสร้าง form แล้วส่งค่าแบบ submit ไปให้ php |
| |
 |
|
|
 |
 |
|
คือว่า จาก code
File edit.php
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var HttPRequest = false;
function doCallAjax (Mode,key1){
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
if (Mode=='Product') {
var val1 = document.getElementById('txtNumType').value;
var pmeters = "NumType=" + encodeURI( val1 ) +
"&Mode=" + Mode;
}
var url = 'ajax_script.php';
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState==4 || HttPRequest.readyState=="complete") {
var val = HttPRequest.responseText;
// alert(val);
if (Mode=='Product') {
document.getElementById('product').innerHTML = val;
}
} // End HttPRequest.readyState
} // End HttPRequest.onreadystatechange = function()
}
</script>
</head>
<body>
<table>
<form name="frmInput" method="post" action="edit_script.php" enctype="multipart/form-data">
<tr>
<td class="label">Number of Product Type :</td>
<td bgcolor="#FFFFFF"><input type="text" name="txtNumType" id="txtNumType" class="txtSmallBox" value="<?=$NumType?>">
<input name="Create" type="button" class="btnNormal" value="Create" onClick="doCallAjax('Product','');" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><div id="product"></div></td>
</tr>
<tr>
<td align="center" class="white"> </td>
<td class="white"><input name="submit" type="submit" class="btnNormal" value="Save" />
<input name="reset" type="reset" class="btnNormal" value="Reset" /></td>
</tr>
</form>
</table>
</body>
</html>
File ajax_script.php
Code (PHP)
<?
$Mode = $_POST['Mode'];
if($Mode=='Product') {
$conn2 = open_db2();
$NumType = trim($_POST['NumType']);
$Cate = trim($_POST['Cate']);
if($Cate=='Mobile') {
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="background">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="4%" align="center">Item</td>
<td width="14%" align="center">IMEI</td>
<td width="16%" align="center">Brand</td>
<td width="20%" align="center">Model</td>
<td width="13%" align="center">Color</td>
<td width="5%" align="center">Qty</td>
<td width="8%" align="center">Unit</td>
<td width="10%" align="center">Price/Unit</td>
<td width="10%" align="center">Amount</td>
</tr>
<? for($j=1;$j<=$NumType;$j++) {
if($j% 2 == 0) {$css = "cellListAlternatingItem"; } else { $css = "cellListItem"; }
?>
<tr>
<td width="4%" align="center" class="<?=$css?>"><?=$j?></td>
<td width="14%" align="center" class="<?=$css?>"><input type="text" name="txtProductNo<?=$j?>" id="txtProductNo<?=$j?>" value="<?=$ProductNo?>" style="width:105px;" maxlength="15"></td>
<td width="16%" align="center" class="<?=$css?>"><select name="drpBrand<?=$j?>" id="drpBrand<?=$j?>" onchange="doCallAjax('SelectModel','<?=$j?>');">
<option value="">-- Select --</option>
<? $sql = "SELECT * FROM brand WHERE Active=1";
$result = new db($sql);
for($i=0; $i<$result->nrecord(); $i++){
?>
<option value="<?=$result->record($i,"ID")?>"><?=$result->record($i,"Name")?></option>
<? } $result->free_result();
?> </select>
</td>
<td width="20%" align="center" class="<?=$css?>"><div id="divModel<?=$j?>"><select name="drpModel<?=$j?>" id="drpModel<?=$j?>">
<option value="">-- Select --</option>
<? $sql = "SELECT * FROM generation WHERE Active=1";
$result = new db($sql);
for($i=0; $i<$result->nrecord(); $i++){
?>
<option value="<?=$result->record($i,"ID")?>"><?=$result->record($i,"Name")?></option>
<? } $result->free_result();
?> </select></div></td>
<td width="13%" align="center" class="<?=$css?>"><select name="drpColor<?=$j?>" id="drpColor<?=$j?>">
<option value="">-- Select --</option>
<? $sql = "SELECT * FROM colors WHERE Active=1";
$result = new db($sql);
for($i=0; $i<$result->nrecord(); $i++){
?>
<option value="<?=$result->record($i,"ID")?>"><?=$result->record($i,"Name")?></option>
<? } $result->free_result();
?> </select></td>
<td width="5%" align="center" class="<?=$css?>"><input type="text" name="txtPQty<?=$j?>" id="txtPQty<?=$j?>" value="1" readonly="readonly" style="text-align:right; width:25px;"></td>
<td width="8%" align="center" class="<?=$css?>"><?=drpUnit('drpUnit',$Unit,'')?></td>
<td width="10%" align="center" class="<?=$css?>"><input type="text" name="txtPPrice<?=$j?>" id="txtPPrice<?=$j?>" value="<?=number_format($PPrice,2)?>" style="text-align:right; width:70px;" onblur="doCallAjax('ShowAmount','<?=$j?>');"></td>
<td width="10%" align="center" class="<?=$css?>"><input type="text" name="txtAmount<?=$j?>" id="txtAmount<?=$j?>" value="<?=number_format($Amount,2)?>" style="text-align:right; width:70px;"></td>
</tr>
<? } ?>
</table>
</td></tr></table>
<? }
elseif($Cate=='Accessory/Part') {
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="background">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="7%" align="center">Item</td>
<td width="20%" align="center">Product No</td>
<td width="41%" align="center">Description</td>
<td width="8%" align="center">Qty</td>
<td width="8%" align="center">Unit</td>
<td width="8%" align="center">Price/Unit</td>
<td width="8%" align="center">Amount</td>
</tr>
<? for($j=1;$j<=$NumType;$j++) {
if($j% 2 == 0) {$css = "cellListAlternatingItem"; } else { $css = "cellListItem"; }
?>
<tr>
<td width="7%" align="center" class="<?=$css?>"><?=$j?></td>
<td width="20%" align="center" class="<?=$css?>"><input type="text" name="txtProductNo<?=$j?>" id="txtProductNo<?=$j?>" value="<?=$ProductNo?>" style="width:150px;" maxlength="15"></td>
<td width="41%" align="center" class="<?=$css?>"><input type="text" name="txtDescription<?=$j?>" id="txtDescription<?=$j?>" value="<?=$Description?>" style="width:300px;"></td>
<td width="8%" align="center" class="<?=$css?>"><input type="text" name="txtPQty<?=$j?>" id="txtPQty<?=$j?>" value="1" maxlength="4" style="text-align:right; width:25px;"></td>
<td width="8%" align="center" class="<?=$css?>"><?=drpUnit('drpUnit',$Unit,'')?></td>
<td width="8%" align="center" class="<?=$css?>"><input type="text" name="txtPPrice<?=$j?>" id="txtPPrice<?=$j?>" value="<?=number_format($PPrice,2)?>" style="text-align:right; width:70px;" onblur="doCallAjax('ShowAmount','<?=$j?>');"></td>
<td width="8%" align="center" class="<?=$css?>"><input type="text" name="txtAmount<?=$j?>" id="txtAmount<?=$j?>" value="<?=number_format($Amount,2)?>" style="text-align:right; width:70px;"></td>
</tr>
<? } ?>
</table>
</td></tr></table>
<? }
?>
ค่าที่ได้จาก File ajax_script.php จะถูกนำมาแสดงใน <div id="product"></div> ใน File edit.php
แล้วทีนี้ เมื่อกด submit ไปหน้า edit_script.php
ค่าใน form input ที่ได้จาก ajax มันไม่มาอ่ะค่ะ ไม่ทราบว่าเป็นที่อะไรคะ
หรือว่า ajax ทำได้แค่แสดงผล ไม่สามารถสร้าง form เพื่อส่งค่าแบบ submit ได้ ??????
ช่วยด้วยค่ะ
Tag : PHP, MySQL, HTML/CSS, JavaScript, Ajax
|
|
|
 |
 |
 |
 |
| Date :
2010-10-15 14:14:11 |
By :
KatMee |
View :
2964 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
<input name="submit" type="submit" class="btnNormal" value="Save" />
ได้นะครับ ถ้าคุณหมายถึงการ submit ค่าอะครับ คุณก็เรียกใช้ function ajax ที่ คุณเขียนมาใช้ประกอบด้วย ดิ ครับ ลองดูนะครับ
|
| |
|
|
| |
| Date :
2010-10-15 15:10:48 |
By :
SOUL |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ยังไงคะ
ถ้าทำแบบที่คุณ SOUL ว่า แสดงว่าต้องกด save 2 ครั้งหรือเปล่า
แบบว่า save ครั้งแรกใช้ ajax เป็นการ save ค่าใน form input ที่อยู่ใน <div id="product"></div>
save ครั้งที่สองใช้ form submit
ที่คุณหมายถึง อย่างนี้หรือเปล่า
ที่จริงแล้วมันใช้ ajax save ค่าได้ แต่มันยุ่งยากตรงที่ต้องมาใส่ทีละ form input
แค่อยากจะรู้ว่า ajax สามารถสร้าง form เพื่อส่งค่าแบบ submit ได้หรือเปล่า
เท่าที่เราทำ ค่า form input ที่อยู่นอก <div id="product"></div> มันก้อมานะคะ
ยกเว้น form input ที่อยู่ใน <div id="product"></div> ค่ะ
|
| |
|
|
| |
| Date :
2010-10-16 23:44:38 |
By :
KatMee |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
