تحسين نموذج HTML/PHP لفتح نافذة جديدة بنجاح

في البداية، يبدو أن لديك شيئًا يعمل ولكن ليس بالطريقة التي ترغب فيها. الكود الذي قدمته يعتمد على استخدام لغة برمجة مثل PHP ويتضمن نموذجًا يتم إرساله عبر الطريقة POST، وعند النقر على زر الإرسال، يتم فتح نافذة جديدة بحجم معين.

للتحقق من أننا فهمنا بشكل صحيح، يبدو أنك تواجه تحديًا في ضبط حجم النافذة الجديدة ونقل بيانات $_POST إلى الصفحة الجديدة بنجاح.

للتحسين، يمكنك أولاً استخدام JavaScript لفتح النافذة الجديدة بدلاً من استخدام الخاصية target="_blank"، وهذا يمنحك مزيدًا من التحكم. فيما يلي تعديل للكود:

html
<pre><code>
    <form id="battleForm" method="post" action="battle.php" >
        <input type="hidden" name="username" value="<?php echo $username; ?>"/>
        <input type="hidden" name="password" value="<?php echo $password; ?>"/>
        <input type="button" value="OPEN TO BATTLE.php" onclick="openBattlePage()"/>
    </form>

    <script>
        function openBattlePage() {
            var form = document.getElementById('battleForm');
            var newWindow = window.open('', '', 'width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');
            
            if (newWindow) {
                form.target = '_blank';
                form.submit();
            } else {
                alert('Please enable pop-ups to proceed.');
            }
        }
    </script>
code>pre>

تم إضافة تغييرات في الكود لاستدعاء دالة JavaScript openBattlePage() عند النقر على زر الإرسال. تقوم هذه الدالة بفتح نافذة جديدة وتحديث هدف النموذج ليكون _blank، ثم تقوم بإرسال النموذج. إذا لم يتمكن المستخدم من فتح النافذة الجديدة، سيتم عرض تنبيه يُطلب فيه تمكين النوافذ المنبثقة.

المزيد من المعلومات

بدايةً، يظهر أن لديك رمز HTML و PHP يقوم بإنشاء نموذج

، والذي يستخدم أسلوب POST لإرسال بيانات المستخدم إلى صفحة “battle.php” عند النقر على زر الإرسال. ولكن، وفقًا للتعليمات، يبدو أن هناك تحسينًا ترغب في إدخاله في هذا الرمز لتحقيق السلوك المرغوب.

في البداية، يبدو أن هناك مشكلة في الرمز الحالي، حيث تريد أن يتم فتح نافذة جديدة باستخدام window.open وفي نفس الوقت يتم إرسال البيانات باستخدام الطريقة POST. ومن الواضح أن هناك مشكلة في تحقيق هذا السلوك بالطريقة التي توضع فيها الآن.

لتحقيق هذا، يمكنك استخدام JavaScript للقيام بذلك بشكل فعال. يمكنك تحسين الرمز على النحو التالي:

html
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open in New Tabtitle>
head>
<body>



<script>
function openInNewTab() {
    // الحصول على النموذج
    var form = document.getElementById("myForm");

    // إعداد النوافذ الجديدة بحجم محدد
    var newWindowFeatures = 'width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0';

    // فتح نافذة جديدة
    var newWindow = window.open('about:blank', '', newWindowFeatures);

    // إعداد هدف النموذج للنافذة الجديدة
    form.target = '_blank';

    // إرسال النموذج
    form.submit();

    // إغلاق نافذة الجديدة بعد إرسال النموذج
    newWindow.close();
}
script>

<form id="myForm" method="post" action="battle.php" onsubmit="openInNewTab(); return false;">
    <input type="hidden" name="username" value=""/>
    <input type="hidden" name="password" value=""/>
    <input type="submit" value="OPEN TO BATTLE.php"/>
form>

body>
html>

هذا التحسين يستخدم JavaScript لفتح نافذة جديدة، ثم يعيد توجيه النموذج للهدف الجديد، وأخيرًا يغلق النافذة الجديدة بعد إرسال النموذج. يضمن هذا السلوك السليم لنقل البيانات بشكل صحيح إلى الصفحة “battle.php” في نافذة جديدة.

الوسوم

المزيد من المعلومات

استخدام kd-tree في Python للبحث الفعّال عن أقرب الجيران بإحداثيات الطول والعرض

تحذير Gradle: تجاهل فنية API Android 2.1_r1

مقالات ذات صلة

تحسين أداء حلول تلاعب السلاسل النصية

تحليل كود C: استكشاف الأخطاء في حلقة الطباعة

حل مشكلة Android: Could not find com.android.support:support-v4:23.2.1 في تطبيقك

فهم أساسيات معالجة الأحداث في جافا سكريبت

أنت تستخدم إضافة Adblock