• 0
SalehZubir

[ تمت الإجابة ]استخدام الزر submit مع اكواد ajax

سؤال

السلام عليكم ورحمة الله وبركاته

قمت بكتابة سكربت بستخدام php يطلب من المستخدم ان يدخل اسمه ومن ثم يقوم السكربت بالتحقق من ان الاسم مطابق لشروط الـ validation فلوكان هناك خطاء ستظر رسالة للمستخدم بتفي بذلك مع نوع الخطاء في نفس الصفحة بدون الانتقال لصفحة اخرة بستخدام ajax

السكربت يعمل بشكل جيد بشرط ان استخدم الزر button ولكن

في حال استخدام الزر submit مع كود الاجاكس يتوقف ويتم نقل المستخدم إلى صفحة اخرة لاظهار رسائل الخطء او حتى في حال استخدام زر button ولكن مع الضغط على زر انتر من لوحة المفاتيح مع وجود المؤشر على الحقل المراد تعبئته سيتوقف كود الاجاكس وسيتم نقل المستخدم لصفحة اخرة لأظهار رسال الخطاء

كيف يمكنني استخدام زر submit مع ajax

وكيف يمكن استخدام زر enter مع ajax

المثال للتوضيح

form.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">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myname").innerHTML =xmlhttp.responseText;
}
}
xmlhttp.open("POST","info.php",true);
var data = 'n_YourName='+document.getElementsByName('n_YourName')[0].value;

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
</script>

</head>

<body>
1
<form action="vali.php" method="post";>
<label>Your Name Please :</label> <input type="text" name="n_YourName" />
<input type="submit" value="Ok" onclick="loadXMLDoc()">
</form>
<div id="myname"></div>
</body>
</html>

vali.php


<?php

if(strlen($_POST["n_YourName"]) <= 0)
{
echo "Error : Your Name ?";
die;
}
else
{
if (!filter_input(INPUT_POST, "n_YourName", FILTER_VALIDATE_REGEXP, array('options' => array('regexp' => '/^[a-zA-Z]+$/'))) || (strlen($_POST["n_YourName"]) < 3) || (strlen($_POST["n_YourName"]) > 20) )
{
echo "Error : Your Name is not valid";
die;
}
}

?>

تم تعديل بواسطه SalehZubir
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

4 إجابة على هذا السؤال .

  • 0

أبدل هذا السطر

<input type="submit" value="Ok" onclick="loadXMLDoc()">

بهذا

<input type="submit" value="Ok" onsubmit="loadXMLDoc()">

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يمكن تحويل الكود السابق من خلال جيكويري إلى مايلي

<!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">
$(function(){
$('#my_button').click(function(){
$("#myname").load("vali.php?n_YourName="+$("#n_YourName").val());
});
});

</script>

</head>

<body>
<label>Your Name Please :</label> <input type="text" id="n_YourName" name="n_YourName" />
<input type="button" value="Ok" id="my_button">

<div id="myname"></div>
</body>
</html>

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اولا شكرا على ردك و اهتمامك

ثانيا

أبدل هذا السطر

<input type="submit" value="Ok" onclick="loadXMLDoc()">

بهذا

<input type="submit" value="Ok" onsubmit="loadXMLDoc()">

قمت بالتجربة لكن لم يحدث اي تغير حيث ان الاجاكس مازالات لا تعمل

يمكن تحويل الكود السابق من خلال جيكويري إلى مايلي


<!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">
$(function(){
$('#my_button').click(function(){
$("#myname").load("vali.php?n_YourName="+$("#n_YourName").val());
});
});

</script>

</head>

<body>
<label>Your Name Please :</label> <input type="text" id="n_YourName" name="n_YourName" />
<input type="button" value="Ok" id="my_button">

<div id="myname"></div>
</body>
</html>

قمت بستخدام الكود من خلال jquery لكنه لم يعمل

حتى ان رسائل الخطاء لم تعد تظهر في

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

تم حل المشكلة وذلك بأضافة العبارة return false

على الكود


<input type="submit" value="Ok" onclick="loadXMLDoc()">

ليصبح بهذا الشكل


<input type="submit" value="Ok" onclick="loadXMLDoc();return false;">

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .