مشكلة عند محاولة عمل تحقيق فوري عند ادخال معلومات!!

**elkaser** · 18-06-2012

بحاول اعمل طريقة للتحقق من النتائج مباشرة فور ان يقوم العضو بادخال المعلومات

قمت بحمل هذا الكود جافا سكربت واجي كويري

كود:

// JavaScript Document



$(document).ready(function(){
	//global vars
	var form = $("#forumAdd");
	var name = $("#name");
	var nameInfo = $("#nameInfo");
	var description = $("#description");
	var file = $("#file");
	
	
	//On blur
	name.blur(validateName);

	//On key press
	name.keyup(validateName);


	//On Submitting
	form.submit(function(){
		if(validateName() )
			return true
		else
			return false;
	});
	
	
});


function validateName(){
	
	if(name.val().length < 3){
			name.addClass("error");
			nameInfo.text("<img src='../images/misc/false.png' alt='' style='border: 0;' /> Category name must be at least 3 charecters in length.");	
			nameInfo.addClass("error");
			return false;
	} else {
			name.removeClass("error");
			nameInfo.text("<img src='../images/misc/true.png' alt='' style='border: 0;' /> ");
			nameInfo.removeClass("error");
			return true;
	}
	
}

الكود السابق المفورض يتحقق انا كان الاسم اقل من 3 احرف يعرض خطاء بجانب ال input

وهذا كود ال html

كود:

<?php
echo '
<div id="error" class="error"></div>

';




echo '<form action="" name="forumAdd" id="forumAdd" method="post" enctype="multipart/form-data" >
<table class="general">
<tr>
<th colspan="3">Add New Category</th>
</tr>';






echo '
<tr>
<td><label for="name">Category Name</lable></td>
<td>
<input type="text" name="name" size="35" id="name" value="" />
<div name="nameInfo" class="NamePass"></div>

</td>
</tr>

<tr>
<td><label for="description">Category Description <span style="font-style: italic;">(Optional)</span></label></td>
<td colspan="2"><textarea name="description" colspan="35" row span="5" id="description"></textarea></td>
</tr>

<tr>
<td><label for="file">Attach Picture</label></td>
<td colspan="2">



<div class="file_browse_wrapper"><input type="file" class="FileInput" value="" id="file" /></div>


</td>
</tr>

<tr>
<td colspan="3" style="text-align: center;"><input type="submit" value="Add Category" id="send" name="send" /></td>
</tr>
</form>
</table>';

?>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/category-add.js"></script>

عندما اكتب اي شيء لا يظهر اي علامات!!!!

اين المشكلة؟؟؟

شكرا

**الفريد** · 19-06-2012

جرب

استدعاء الجافا في رأس الصفحة و ليس في body

تأكد من ذلك عند عرض الصفحة في المتصفح

**elkaser** · 19-06-2012

شكرا لكم عزيزي الكريم!

المشكلة لم تحل!!!!

ممكن حل ثاني!!!!

**khashabawy** · 19-06-2012

http://crazy-eng.com/705/

**elkaser** · 19-06-2012

اخي العزيز khashabawy

هذا الرابط درس لطريقة تسجيل الدخول بالاجكس!! كيف ممكن انه يفيدني في حل مشكلتي؟؟

**khashabawy** · 19-06-2012

المشاركة الأصلية كتبت بواسطة elkaser مشاهدة المشاركة

اخي العزيز khashabawy

هذا الرابط درس لطريقة تسجيل الدخول بالاجكس!! كيف ممكن انه يفيدني في حل مشكلتي؟؟

يمكنك الإستفاده منه بطريقة التحقق من المدخلات

========================================

تفضل التعديل على الكود خاصتك

كود:

<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>    
    


<div id="error" class="error"></div>




<form action="" name="forumAdd" id="forumAdd" method="post" enctype="multipart/form-data" >
<table class="general">
<tr>
<th colspan="3">Add New Category</th>
</tr>







<tr>
<td><label for="name">Category Name</lable></td>
<td>
<input type="text" name="name" size="35" id="name" value="" />
<div id="nameInfo" class="NamePass"></div>

</td>
</tr>

<tr>
<td><label for="description">Category Description <span style="font-style: italic;">(Optional)</span></label></td>
<td colspan="2"><textarea name="description" colspan="35" row span="5" id="description"></textarea></td>
</tr>

<tr>
<td><label for="file">Attach Picture</label></td>
<td colspan="2">



<div class="file_browse_wrapper"><input type="file" class="FileInput" value="" id="file" /></div>


</td>
</tr>

<tr>
<td colspan="3" style="text-align: center;"><input type="submit" value="Add Category" id="send" name="send" /></td>
</tr>
</form>
</table>

</body>
</html>

main.js

كود:

// JavaScript Document



$(document).ready(function(){

    //global vars
    var form = $("#forumAdd");
    var name = $("#name");
    var nameInfo = $("#nameInfo");
    var description = $("#description");
    var file = $("#file");
        
    
    //On blur
    name.blur(function(){  
        
    validateName(name.val().length)
        
    });

    //On key press
    name.keyup(function(){  
        
    validateName(name.val().length)
        
    });


    //On Submitting
    form.submit(function(){
        
        if(validateName(name.val().length) )
            return true
        else
            return false;
            
    });
    
    
});


function validateName(length){
    
    //global vars
    var form = $("#forumAdd");
    var name = $("#name");
    var nameInfo = $("#nameInfo");
    var description = $("#description");
    var file = $("#file");       
    
    if(length < 3){
            name.addClass("error"); 
            nameInfo.html("Category name must be at least 3 charecters in length.");    
            nameInfo.addClass("error");
            return false;
    } else {
            name.removeClass("error");
            nameInfo.text("fine ");
            nameInfo.removeClass("error");
            return true;
    }
    
}

**elkaser** · 20-06-2012

شكرا لك اخي العزيز
الكود ما مشي حاله!!!

شوف اخي انا استنتجت الكود الي كتبته من هذا المثال!!! http://yensdesign.com/tutorials/validateform/

موجود مباشرة على الصفحة

يرجا مراجعته وتعديل الكود الي انا كتبته!! الكود الي انت كتبته هو فقط للتحقق من طول الاسم ولاكن انا رح اقوم بالاضافة الى الكود لاحقا للتحقق من العديد من الاشياء ولاكن بداية احاول فهم وتعلم البرمجة بطريقة ال javascript, ajax, jQuery!

شكرا لك اخي العزيز

**elkaser** · 20-06-2012

واخيرا انحلت المشكلة!!!

المشكلة كانت جدا بسيطة!!!

في كود ال Html
المفروض ان اغير الكود التالي

كود:

<div name="nameInfo" class="NamePass"></div>

الي

كود:

<div id="nameInfo" class="NamePass"></div>

**khashabawy** · 20-06-2012

ما مشى حاله إزاى

إنت شكلك كدا إستخدمت الكود بتاع ال js بس .. عشان كدا مش إشتغل

أنا فى الرد بتاعى اللى فوق حاططلك كود js و كود html اللى فيه التعديل اللى إنت ذكرته

**elkaser** · 20-06-2012

شكرا لك عزيزي khashabawy

القصة ومافيها انا جديد على ال javascript, ajax and jQuery وعم بحاول تعلمه - فوجدت مثال مشابه جدا لما احاول فعله فقمت بالاستفاده منه للتعلم ولتطبيق ما اريده!

شكرا لمساعدتك فيها ما نبهني على الخطاء!!!

ولاكن لدي مشكلة اخري الان! اريد التحقق من ان الاسم مش موجود في قواعد البيانات!!!

كيف ممكن التحقق باستخدام ال php والجافا سكربت؟؟؟

طبعا انا اعلم كيف ممكن عمل ذلك فقط مع php ولاكن لا تكون مباشرة! والمطلوب ان يكون التحقيق مباشر فور كتابه المستخدم الاسم!

شكرا لكم

**khashabawy** · 21-06-2012

المشاركة الأصلية كتبت بواسطة elkaser مشاهدة المشاركة

شكرا لك عزيزي khashabawy

القصة ومافيها انا جديد على ال javascript, ajax and jQuery وعم بحاول تعلمه - فوجدت مثال مشابه جدا لما احاول فعله فقمت بالاستفاده منه للتعلم ولتطبيق ما اريده!

شكرا لمساعدتك فيها ما نبهني على الخطاء!!!

ولاكن لدي مشكلة اخري الان! اريد التحقق من ان الاسم مش موجود في قواعد البيانات!!!

كيف ممكن التحقق باستخدام ال php والجافا سكربت؟؟؟

طبعا انا اعلم كيف ممكن عمل ذلك فقط مع php ولاكن لا تكون مباشرة! والمطلوب ان يكون التحقيق مباشر فور كتابه المستخدم الاسم!

شكرا لكم

عليك بهذا الدرس .... هو يستخدم الأجاكس

http://crazy-eng.com/705/

**elkaser** · 21-06-2012

في الاجكس يبدو ان الطريقة طويلة جدا!

اهل هناك درس لعمل ذلك بالغة ال jQuery?

**khashabawy** · 21-06-2012

بص يا سيدى بكل بساطه دا كود jquery إستخدمه

كود:

$(document).ready(function(){
    


$("#button").click(function(){

var email = $("#email").val();

$("#results").html("please wait...");

$.post("check.php",{email : email} ,function(data){

if(data ==1){

/// show a message that the user exists


/// return false


}else{

/// return true


}

 });//post

});//click


});//ready

إعمل صفحة إسمها check.php إتستقبل فيها post إسمه email

كود PHP:


$email = $_POST['email'];

و إعمل فيها إستعلام فى قاعدة البيانات عن الميل دا

و إعمل

كود PHP:


echo 1;

لو لقى الإيميل دا مستجل قبل كدا

أو

كود PHP:


echo 0;

لو الإيميل دا مش متسجل قبل كدا

بعد كدا هيرجعلك ال 0 أو 1 اللى إنتا عملتلهم echo دول فى المتغير اللى فى ال jquery اللى إسمه data

إعمل if على قيمته و شوف عاوز تعمل إيه لما يكون 0 و تعمل إيه لما يكون 1

**elkaser** · 21-06-2012

شكرا لك عزيزي - انا متشكر لك جزيل الشكر
حاولت تغير الكود قليلا للتناسب مع الكود عندي ولاكن لا يعمل

هذا كود ال PHP الذي بداخل ملف ال check.php

طبعا هذا كود بسيط لاحقا سوف اقوم بجلب معلومات من قواعد البيانات

كود:

<?php
if($_POST['name'] == "test")
echo 1;
else 
echo 0;

?>

وهذا الكود هو كود جافا

كود:

// JavaScript Document

$(document).ready(function(){
	//global vars
	var form = $("#forumAdd");
	var name = $("#name");
	var nameInfo = $("#nameInfo");
	var description = $("#description");
	var file = $("#file");
	
	
	//On blur
	name.blur(validateName);
	name.blur(CheckDuplicate);

	//On key press
	name.keyup(validateName);
	name.keyup(CheckDuplicate);


	//On Submitting
	form.submit(function(){
		if(validateName() & CheckDuplicate() ) // 
				return true;
			
		else
			return false;
	});
	
	


////This is working fine
function validateName(){
	if (name.val().length == 0){
			name.removeClass("error");
			nameInfo.html("");	
			nameInfo.removeClass("error");
			return false;
	}
	else if( name.val().length < 3 & name.val().length > 0 ){
			name.addClass("error");
			nameInfo.html("<img src='../images/misc/false.png' alt='' style='border: 0;' />Minimum 3 charecters in length.");	
			nameInfo.addClass("error");
			return false;
	}
	else {
			name.removeClass("error");
			nameInfo.html("<img src='../images/misc/true.png' alt='' style='border: 0;' />");
			nameInfo.removeClass("error");
			return true;
	}
	
}



//This is not working
function CheckDuplicate(){

		$.post("../check.php",{name : name.val()} ,function(data){
		
				if(data == 1){
				/// show a message that the user exists
				/// return false
							name.addClass("error");
							nameInfo.html("<img src='../images/misc/false.png' alt='' style='border: 0;' />This name already exists");	
							nameInfo.addClass("error");
							return false;
				}else{
				/// return true
							name.removeClass("error");
							nameInfo.html("<img src='../images/misc/true.png' alt='' style='border: 0;' />  Good name...");
							nameInfo.removeClass("error");
							return true;
				}
		
		 });//post

}




});

دالة ال CheckDuplicate المفروض هي التي تتحقق من وجود المعلومات

name هو الاسم الذي يقم المستخدم ادخاله

**khashabawy** · 21-06-2012

إستبدل

كود:

//This is not working
function CheckDuplicate(){

        $.post("../check.php",{name : name.val()} ,function(data){

ب

كود:

//This is not working
function CheckDuplicate(){

    var the_name = name.val();
    
        $.post("../check.php",{name : the_name} ,function(data){

و تأكد من مسار ملف ال php

الموضوع: مشكلة عند محاولة عمل تحقيق فوري عند ادخال معلومات!!

أدوات الموضوع

بحث في الموضوع

مشكلة عند محاولة عمل تحقيق فوري عند ادخال معلومات!!

المواضيع المتشابهه

مشكلة لم افهمها حدثت عند محاولة عمل تحقيق للكود - المشكلة بكود <div - يرجا المساعدة

مشكلة في ادخال البيانات الى mysql

مشكلة عند محاولة دخول آي بي

ضوابط المشاركة