المشاركة الأصلية كتبت بواسطة Firas
سلام عليكم
الاخ زيزوار او احد الاخوة بارك الله فيكم .
عندي فورم submit بالاجاكس . شغال تمام .
بس فكرة ال progressbar او الloading مش عارف اطبقها . جربت واطلعت على مشاركة الاخ زيزوار في طريقة تنفيذه بس مش زابطة معي ياريت اذا حد يقدر ينفذهاعلى هدا الفورم. بحيث يكون (( جاري الاضافة مع صورة مثلا لودنج بجانب زر الsubmit ثم تتحول الى تم الاضافة .
او قالب الفورم كله يتغير لصورة لودنج مع جاري الاضافة ثم تم الاضافة ثم يرجع للفورم الاصلي.
اسف للاطالفة
رابط الملف
حمل
جزاكم الله خير
جرب التعديل التالي
كود HTML:
<html dir="rtl">
<head>
<meta http-equiv="Content-Language" content="ar-ae">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>email ajax</title>
<script type="text/javascript" language="javascript">
var $img = '<img src"http://www.napyfab.com/ajax-indicators/images/progressbar_microsoft.gif" />';
var http_request = false;
insereReponse = function(r){document.getElementById('wino').innerHTML = r}
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('wino').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function get(obj) {
document.getElementById('wino').innerHTML = $img;
var poststr = ("Fname=" + encodeURI( document.getElementById("Fname").value ) +
"&Mname=" + encodeURI( document.getElementById("Mname").value ) +
"&MMname=" + encodeURI( document.getElementById("MMname").value ) +
"&Lname=" + encodeURI( document.getElementById("Lname").value ) +
"&stdUniId=" + encodeURI( document.getElementById("stdUniId").value ) +
"&userEmail=" + encodeURI( document.getElementById("userEmail").value ) +
"&userPhone=" + encodeURI( document.getElementById("userPhone").value ) +
"&userMobile=" + encodeURI( document.getElementById("userMobile").value ) +
"&userCity=" + encodeURI( document.getElementById("userCity").value ) +
"&userAddress=" + encodeURI( document.getElementById("userAddress").value ) +
"&userGender=" + encodeURI( document.getElementById("userGender").value ) +
"&userBOD=" + encodeURI( document.getElementById("userBOD").value ) +
"&stdScAvg=" + encodeURI( document.getElementById("stdScAvg").value ));
makePOSTRequest('addstudent_.php', poststr);
}
</script>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>
<body>
<right>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<table align="right" style="width: 100%" dir="rtl">
<tr>
<td style="width: 105px">الإسم الأول</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="Fname" name="Fname" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="Fname_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">إسم الأب</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="Mname" name="Mname" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="Mname_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">إسم الجد</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="MMname" name="MMname" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="MMname_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">إسم العائلة</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="Lname" name="Lname" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="Lname_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">الرقم الجامعي</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="stdUniId" name="stdUniId" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="stdUniId_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">البريد الإلكتروني</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userEmail" name="userEmail" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userEmail_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">رقم الهاتف</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userPhone" name="userPhone" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userPhone_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">رقم المحمول</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userMobile" name="userMobile" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userMobile_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">المدينة</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userCity" name="userCity" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userCity_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">العنوان</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userAddress" name="userAddress" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userAddress_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">الجنس</td>
<td style="width: 14px" class="style1">:</td>
<td><select name="userGender" style="width: 64px" dir="rtl">
<option selected="">إختر</option>
<option value="M">ذكر</option>
<option value="F">أنثى</option>
</select></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userGender_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">تاريخ الميلاد</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="userBOD" name="userBOD" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="userBOD_msg"></div></td>
</tr>
<tr>
<td style="width: 105px">معدل الثانوية العامة</td>
<td style="width: 14px" class="style1">:</td>
<td><input id="stdScAvg" name="stdScAvg" type="text" style="width: 255px"></td>
</tr>
<tr>
<td style="width: 105px"></td>
<td style="width: 14px" class="style1"></td>
<td><div id="stdScAvg_msg"></div></td>
</tr>
<tr>
<td colspan="3"><input type="button" name="button" value="Submit"
onclick="javascript:get(this.parentNode);">
<input name="Reset" type="reset" value="إعادة تعيين">
</td>
</tr>
</table>
</form>
</right>
<div id="wino"></div>
</body>
</html>
ضوابط المشاركة
رد مع اقتباس
