محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>Javascript On Submit</h1>
    
    
    <form id="myForm" action="/tryit/submitted" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <br>
    <hr>
    <p id="status">Form data are not submitted yet.</p>

    <script>
        // myForm في متغير إسمه myForm يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let form = document.querySelector('#myForm');
        
        // status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let status = document.querySelector('#status');

        // form للعنصر الذي يمثله المتغير submit هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
        form.addEventListener('submit', (event) => {
            // إفتراضياً النموذج يقوم بإرسال البيانات الموجودة فيه إلى السيرفر
            // ثم يقوم بتحديث الصفحة عندما يتم النقر على زر إرسال البيانات
            // فإننا نمنع ذلك preventDefault() و لكن عند استدعاء الدالة
            event.preventDefault();

            // مع إزالة أي password و name هنا قمنا بتخزين محتوى الحقول
            // مسافات فارغة من أطرافها في متغيرات ليكون التعامل معها أسهل
            const name = document.querySelector("#name").value.trim();
            const password = document.querySelector("#password").value.trim();

            // هنا قمنا بالتحقق من محتوى الحقول لمعرفة ما إن كانت فارغة أم لا
            if (name === '' || password === '') {
                // لإعلام المستخدم بأنه يجب أن يدخل قيم فيها status إذا كان أحدها فارغ سيتم عرض نص في العنصر
                status.innerHTML = 'Please fill in all fields.';
                // باللون بالأحمر status بعدها سيتم تلوين نص العنصر 
                status.style.color = 'red';
                // نضعه لعدم تنفيذ الأوامر المتبقية في الحدث return الأمر
                return;
            }

            // status إذا إنتهى التحقق من محتوى الحقول و لم يكن هناك مشكلة سيتم عرض قيمها في العنصر
            status.innerHTML = '<h3>Submitted data<h3>';
            status.innerHTML += 'Name: ' + name + '<br>';
            status.innerHTML += 'Password: ' + password;
            
            // باللون الأخضر status بعدها سيتم تلوين نص العنصر 
            status.style.color = 'green';
            
            // في حال أردت الآن إرسال البيانات إلى السيرفر يمكنك إستدعاء الدالة التالية
            // form.submit();

            // هنا قمنا بحذف قيم الحقول التي تم إدخالها في النموذج و هذا أمر إختياري
            form.reset();
        });
	</script>
</body>
</html>