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

سؤال حول تضمين صفحة html في اخرى فية

بدأه asrocks في 30 أبريل 2013 · 4 رد · 2,658 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم 

 

انا حاليا اقوم بتعلم لغة html و ما زلت في طور بدايتي

 

و لكن صادفتني مشكلة حول كيفية تضمين صفحة html في صفحة اخرى

 

اي لدي الكود هذا عبارة عن simple login , الذي يعتمد على ادخال اسم المستخدم و الباسورد

و اذا كانت البيانات صحيحة يتم فتم الصفحة target.html.

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuser" && form.pswrd.value == "mypass")
{

window.open('target.html') /*  opens the target page while Id & password matches*/


}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>

 

لكن انا لا اريد ان يقوم بفتح صفحة خارجية و انما يقوم بتنفيذ الكود الخاص بي في نفس الصفحة بكود جديد .. الذي هو كود html الخاص بي: هذا هو :

 

<html>

<header>
<h1>Hello World</h1>
</header>

<body>
<table border=3>
<td><tr>my table</tr></td>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</table>
</body>

</html>

 

ان اقوم بنسخ الكود اعلاه و اضعه السطر (window.open(target.html يعطيني خطأ ..!!

فمل الحل جزاكم الله خيرا 

#2

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

هل تقصد فتح الصفحة بعد ارسال النموذج , يتم ذلك بواسطة خاصية action في الوسم form كالتالي :

<form name="login" action="target.html" id="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>

اما اذا كان قصدك ان تقوم بفتح هذه الصفحة يعد التحقق من مُدخلات المستخدم باستخدام javascript فان ذلك يكون كالتالي :

<!DOCTYPE html>
<html>
    <head>
        <title>
            Login page
        </title>
    </head>
    <body>
        <h1 style="font-family:Comic Sans Ms;text-align:center;font-size:20pt;color:#00FF00;">
            Simple Login Page
        </h1>
        <form name="login" action="target.html" id="login">
            Username <input type="text" name="userid" id="userid"><br>
            Password <input type="password" name="pswrd" id="pswrd">
            <input type="button" onclick="check();" value="Login">
            <input type="reset" value="Cancel">
        </form>
        <script language="javascript">
                //function to check userid & password
                function check()
                {
                    //the following code checkes whether the entered userid and password are matching
                    if (document.getElementById('userid').value === "myuser" && document.getElementById('pswrd').value === "mypass")
                    {
                        document.getElementById('login').submit();
                    }
                    else
                    {
                        //displays error message
                        alert("Error Password or Username");

                    }
                }
        </script>
    </body>
</html>

السطر المهم هو السطر التالي :

document.getElementById('login').submit();

 

ملاحظة : قمت بتعديل الكود قليلاً وتصحيح بعض الاخطاء كما في السطر

<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>

وإضافة DOCTYPE و استخدام document.getElementById للحصول على قيم الحقول ..

1
#3

الله يعطيك العافية اخي على ردك

 

اود ان اوضح لك المسألة ببساطة ...

بطلب صفحة login و اذا كانت البيانات صحيحة myuser & my pass
عندها يختفي نموذج login و يظهر لي عبارة في وسط الصفحة مثلا عبارة ترحيب بالمستخدم "welcome mr.myuser" فقط

 

هنا المفروض كود html لاظهار عبارة الترحيب سوف يتم وضعه ضمن الشرط المكتوب بكود javaScript..

علما ان يبقى في نفس الصفحة دون ان ينتقل لصفحة جديدة

كيف هذا !

هذا ما اقصده
 و شكرا مرة ثانية 

#4

يوجد طريقتين بسكل اساسي : الاولى باستخدام تقنية ajax و بما انك مبتدئ لا انصحك بها . الثانية هي باستخدام الاطارات و تحديد الهدف target  للنموذج هو اسم او id الاطار . قمت باستخدام هذه الطريقة في "مكتبة التعامل مع الصور" يمكنك الاطلاع على الكود المصدري

#5

أريد توضيح بعض النقاط

 

لغة javaScript هي لغة تعمل على متصفح الزائر ويمكن له إيقاف عملها فلهذا لا يكتفي بالتحقق بإستخدام javaScript ولكن يجب التحقق مرة أخرى باللغة المستخدمة في البرمجة على الخادم , ولكن تستخدم لغة javaScript مبدأياً لتوفير عناء وقت الإتصال بالخادم والتحقق من المدخلات , فبعد سلامة المدخلات يتم إرسالها للخادم لمعاودة التحقق منها .

 

السؤال الآن ما هي لغة البرمجة التي تنوي إستخدامها كلغة برمجة من جهة الخادم ؟

 

بالنسبة لسؤالك فيمكنك أيضاً إستخدام تعليمة innerHTML و هذا مثال عليها على w3school 

 

وبما أنك تتعامل مع لغة javaScript فمن الأفضل الإنتقال لإطار عمل كـ jQuery وستجد متعة في التعامل مع لغة javaScript لتنفيذ ما تريد بسهولة ويسر .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

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