الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

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

بدأه SalehZubir في 18 أبريل 2012 · 4 رد · 1,142 مشاهدة · في منتدى تطوير المواقع بـ PHP
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

قمت بكتابة سكربت بستخدام 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 في 18 أبريل 2012 في 15:26

#2

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

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

بهذا 

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

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#3

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

<!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>

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#4

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

ثانيا

اقتباس

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

<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 لكنه لم يعمل

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

#5

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

على الكود

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

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

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

مواضيع مشابهة

عدد الزوار حالياً

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…