إظهار خيارات في الـ Form حسب جنس المستخدم

Omer Amad · 2 يوليو

فيه عندي حقل select وفيه خيارات... مثال خيار الذكر والأنثى... اريد لما يتم اختيار ذكر يظهر حقل تحت وفيها خيارات الوظائف الخاصة ب الذكور ولما يختار أنثى تظهر خيارات الوظائف الخاصة ب الاناث.... المشروع استمارة php

Chihab Hedidi · 2 يوليو

يمكنك استخدام PHP مع JavaScript لجعل الحقول تظهر أو تختفي بناء على الخيار المحدد في حقل select، سنستخدم JavaScript للتعامل مع تغيير الخيارات في حقل select وPHP لعرض الحقول المناسبة بناء على هذا التغيير.

أولا نقوم بإعداد HTML وJavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Form Example</title>
    <script type="text/javascript">
        function showJobs() {
            var gender = document.getElementById("gender").value;
            var maleJobs = document.getElementById("maleJobs");
            var femaleJobs = document.getElementById("femaleJobs");

            if (gender == "male") {
                maleJobs.style.display = "block";
                femaleJobs.style.display = "none";
            } else if (gender == "female") {
                maleJobs.style.display = "none";
                femaleJobs.style.display = "block";
            } else {
                maleJobs.style.display = "none";
                femaleJobs.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <form method="post" action="submit.php">
        <label for="gender">الجنس:</label>
        <select id="gender" name="gender" onchange="showJobs()">
            <option value="">اختر...</option>
            <option value="male">ذكر</option>
            <option value="female">أنثى</option>
        </select>

        <div id="maleJobs" style="display:none;">
            <label for="maleJob">وظائف الذكور:</label>
            <select id="maleJob" name="maleJob">
                <option value="job1">وظيفة 1</option>
                <option value="job2">وظيفة 2</option>
                <option value="job3">وظيفة 3</option>
            </select>
        </div>

        <div id="femaleJobs" style="display:none;">
            <label for="femaleJob">وظائف الإناث:</label>
            <select id="femaleJob" name="femaleJob">
                <option value="job4">وظيفة 4</option>
                <option value="job5">وظيفة 5</option>
                <option value="job6">وظيفة 6</option>
            </select>
        </div>

        <input type="submit" value="إرسال">
    </form>
</body>
</html>

في ملف submit.php، يمكنك معالجة البيانات المرسلة من النموذج:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $gender = $_POST["gender"];
    
    if ($gender == "male") {
        $job = $_POST["maleJob"];
    } elseif ($gender == "female") {
        $job = $_POST["femaleJob"];
    }

    echo "الجنس: " . $gender . "<br>";
    echo "الوظيفة: " . $job;
}
?>

عند تغيير الخيار في حقل select، تقوم JavaScript باستدعاء وظيفة showJobs التي تعرض أو تخفي حقول الوظائف بناء على الخيار المختار، و عند إرسال النموذج، تقوم PHP بمعالجة البيانات وتحديد الوظيفة المختارة بناء على الجنس، و بهذا الشكل يمكنك جعل الحقول تظهر وتختفي بناء على الخيارات المحددة في حقل select.

Mustafa Suleiman · 2 يوليو

الأمر يتم من خلال PHP و HTML و JavaScript معًا.

أولاً نقوم بإنشاء حقل الاختيار Select للجنس:

<label for="gender">الجنس:</label>
<select id="gender" name="gender">
  <option value="">اختر الجنس</option>
  <option value="male">ذكر</option>
  <option value="female">أنثى</option>
</select>

ثم إنشاء حقول الوظائف (مخفية في البداية):

<div id="maleJobs" style="display: none;">
  <label for="maleJob">الوظيفة (للذكور):</label>
  <select id="maleJob" name="maleJob">
    <option value="">اختر الوظيفة</option>
    <option value="engineer">مهندس</option>
    <option value="doctor">طبيب</option>
    <option value="teacher">مدرس</option>
  </select>
</div>

<div id="femaleJobs" style="display: none;">
  <label for="femaleJob">الوظيفة (للإناث):</label>
  <select id="femaleJob" name="femaleJob">
    <option value="">اختر الوظيفة</option>
    <option value="nurse">ممرضة</option>
    <option value="teacher">مدرسة</option>
    <option value="designer">مصممة</option>
  </select>
</div>

هنا يأتي دور JavaScript لإظهار حقل الوظائف المناسب:

<script>
  const genderSelect = document.getElementById('gender');
  const maleJobsDiv = document.getElementById('maleJobs');
  const femaleJobsDiv = document.getElementById('femaleJobs');

  genderSelect.addEventListener('change', function() {
    if (this.value === 'male') {
      maleJobsDiv.style.display = 'block';
      femaleJobsDiv.style.display = 'none';
    } else if (this.value === 'female') {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'block';
    } else {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'none';
    }
  });
</script>

حيث ستعمل addEventListener على تنفيذ دالة عند تغيير قيمة حقل الجنس، داخل الدالة، نتحقق من قيمة حقل الجنس ونعرض حقل الوظائف المناسب باستخدام style.display = 'block'.

نخفي حقل الوظائف الآخر باستخدام style.display = 'none'.

بالطبع ستحتاج إلى إرسال البيانات من خلال النموذج إلى السيرفر ثم معالجتها في PHP.

Omer Amad · 3 يوليو

الشغل ضبط لكن فيه مشكله لما ارسل المعلومات تظهر عندي في الجدول لما نختار ذكر تظهر male وانا اريد تظهر ذكر في الجدول....

Omer Amad · 3 يوليو

بتاريخ 14 ساعة قال Chihab Hedidi:

يمكنك استخدام PHP مع JavaScript لجعل الحقول تظهر أو تختفي بناء على الخيار المحدد في حقل select، سنستخدم JavaScript للتعامل مع تغيير الخيارات في حقل select وPHP لعرض الحقول المناسبة بناء على هذا التغيير.

أولا نقوم بإعداد HTML وJavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Form Example</title>
    <script type="text/javascript">
        function showJobs() {
            var gender = document.getElementById("gender").value;
            var maleJobs = document.getElementById("maleJobs");
            var femaleJobs = document.getElementById("femaleJobs");

            if (gender == "male") {
                maleJobs.style.display = "block";
                femaleJobs.style.display = "none";
            } else if (gender == "female") {
                maleJobs.style.display = "none";
                femaleJobs.style.display = "block";
            } else {
                maleJobs.style.display = "none";
                femaleJobs.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <form method="post" action="submit.php">
        <label for="gender">الجنس:</label>
        <select id="gender" name="gender" onchange="showJobs()">
            <option value="">اختر...</option>
            <option value="male">ذكر</option>
            <option value="female">أنثى</option>
        </select>

        <div id="maleJobs" style="display:none;">
            <label for="maleJob">وظائف الذكور:</label>
            <select id="maleJob" name="maleJob">
                <option value="job1">وظيفة 1</option>
                <option value="job2">وظيفة 2</option>
                <option value="job3">وظيفة 3</option>
            </select>
        </div>

        <div id="femaleJobs" style="display:none;">
            <label for="femaleJob">وظائف الإناث:</label>
            <select id="femaleJob" name="femaleJob">
                <option value="job4">وظيفة 4</option>
                <option value="job5">وظيفة 5</option>
                <option value="job6">وظيفة 6</option>
            </select>
        </div>

        <input type="submit" value="إرسال">
    </form>
</body>
</html>

في ملف submit.php، يمكنك معالجة البيانات المرسلة من النموذج:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $gender = $_POST["gender"];
    
    if ($gender == "male") {
        $job = $_POST["maleJob"];
    } elseif ($gender == "female") {
        $job = $_POST["femaleJob"];
    }

    echo "الجنس: " . $gender . "<br>";
    echo "الوظيفة: " . $job;
}
?>

عند تغيير الخيار في حقل select، تقوم JavaScript باستدعاء وظيفة showJobs التي تعرض أو تخفي حقول الوظائف بناء على الخيار المختار، و عند إرسال النموذج، تقوم PHP بمعالجة البيانات وتحديد الوظيفة المختارة بناء على الجنس، و بهذا الشكل يمكنك جعل الحقول تظهر وتختفي بناء على الخيارات المحددة في حقل select.

استاذ اريد تظهر عندي في جدول ذكر وانثى بالعربي والاختصاص كذالك

محمد عاطف17 · 3 يوليو

بتاريخ 13 دقائق مضت قال Baker Mohammed:

استاذ اريد تظهر عندي في جدول ذكر وانثى بالعربي والاختصاص كذالك

يمكنك تعير ذلك من خلال تغير الخاصية value في عنصر option بداخل select هكذا :

<label for="gender">الجنس:</label>
<select id="gender" name="gender">
  <option value="">اختر الجنس</option>
  <option value="ذكر">ذكر</option>
  <option value="أنثى">أنثى</option>
</select>

هنا قمنا بتعير كلمة male في الخاصية value إلى ذكر و female إلى أنثى ويمكنك تغيرهم الى أي قيمة تريد .

<div id="maleJobs" style="display: none;">
  <label for="maleJob">الوظيفة (للذكور):</label>
  <select id="maleJob" name="maleJob">
    <option value="">اختر الوظيفة</option>
    <option value="مهمدس">مهندس</option>
    <option value="طبيب">طبيب</option>
    <option value="مدرس">مدرس</option>
  </select>
</div>

<div id="femaleJobs" style="display: none;">
  <label for="femaleJob">الوظيفة (للإناث):</label>
  <select id="femaleJob" name="femaleJob">
    <option value="">اختر الوظيفة</option>
    <option value="ممرضه">ممرضة</option>
    <option value="مدرسة">مدرسة</option>
    <option value="مصممة">مصممة</option>
  </select>
</div>

وهنا أيضا قمنا بتغير الخاصية value إلى الفيمة التي تريدها ويمكنك تغيرها كيفما شئت

Omer Amad · 3 يوليو

بتاريخ 4 دقائق مضت قال محمد عاطف17:

يمكنك تعير ذلك من خلال تغير الخاصية value في عنصر option بداخل select هكذا :

<label for="gender">الجنس:</label>
<select id="gender" name="gender">
  <option value="">اختر الجنس</option>
  <option value="ذكر">ذكر</option>
  <option value="أنثى">أنثى</option>
</select>

هنا قمنا بتعير كلمة male في الخاصية value إلى ذكر و female إلى أنثى ويمكنك تغيرهم الى أي قيمة تريد .

<div id="maleJobs" style="display: none;">
  <label for="maleJob">الوظيفة (للذكور):</label>
  <select id="maleJob" name="maleJob">
    <option value="">اختر الوظيفة</option>
    <option value="مهمدس">مهندس</option>
    <option value="طبيب">طبيب</option>
    <option value="مدرس">مدرس</option>
  </select>
</div>

<div id="femaleJobs" style="display: none;">
  <label for="femaleJob">الوظيفة (للإناث):</label>
  <select id="femaleJob" name="femaleJob">
    <option value="">اختر الوظيفة</option>
    <option value="ممرضه">ممرضة</option>
    <option value="مدرسة">مدرسة</option>
    <option value="مصممة">مصممة</option>
  </select>
</div>

وهنا أيضا قمنا بتغير الخاصية value إلى الفيمة التي تريدها ويمكنك تغيرها كيفما شئت

اخي لما اغير قيمة value عمليه اختيار ذكر وتظهر وظائف الذكور لاتعمل

محمد عاطف17 · 3 يوليو

بتاريخ 2 دقائق مضت قال Baker Mohammed:

اخي لما اغير قيمة value عمليه اختيار ذكر وتظهر وظائف الذكور لاتعمل

عذرا كان يجب أيضا تغير كود الجافاكريبت حتي تظهر قيم حقول ال select وهذا هو الكود بعد التعديل :

<script>
  const genderSelect = document.getElementById('gender');
  const maleJobsDiv = document.getElementById('maleJobs');
  const femaleJobsDiv = document.getElementById('femaleJobs');

  genderSelect.addEventListener('change', function() {
    if (this.value === 'ذكر') {
      maleJobsDiv.style.display = 'block';
      femaleJobsDiv.style.display = 'none';
    } else if (this.value === 'أنثى') {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'block';
    } else {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'none';
    }
  });
</script>

وتأكذ إذا قمت بتغير ال value في عناصر ال select قم بتغيرها في هذا الجظء أيضا بنفس الثمية تمام

Omer Amad · 3 يوليو

بتاريخ 5 ساعة قال محمد عاطف17:

عذرا كان يجب أيضا تغير كود الجافاكريبت حتي تظهر قيم حقول ال select وهذا هو الكود بعد التعديل :

<script>
  const genderSelect = document.getElementById('gender');
  const maleJobsDiv = document.getElementById('maleJobs');
  const femaleJobsDiv = document.getElementById('femaleJobs');

  genderSelect.addEventListener('change', function() {
    if (this.value === 'ذكر') {
      maleJobsDiv.style.display = 'block';
      femaleJobsDiv.style.display = 'none';
    } else if (this.value === 'أنثى') {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'block';
    } else {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'none';
    }
  });
</script>

وتأكذ إذا قمت بتغير ال value في عناصر ال select قم بتغيرها في هذا الجظء أيضا بنفس الثمية تمام

استاذ سؤال اسم العامود الذي اريد ان يظهر فيه كلمة ذكر وانثى اين يكون عنوان العامود في الكود أعلاه...

وايضآ اسم العامود الموجود في قاعدة بيانات الذي اريد ان يظهر فيه اسم الإختصاص بعد الإرسال اين اضعه اذا ممكن توضيح مع فائق المودة والاحترام

محمد عاطف17 · 3 يوليو

بتاريخ 26 دقائق مضت قال Baker Mohammed:

استاذ سؤال اسم العامود الذي اريد ان يظهر فيه كلمة ذكر وانثى اين يكون عنوان العامود في الكود أعلاه...

وايضآ اسم العامود الموجود في قاعدة بيانات الذي اريد ان يظهر فيه اسم الإختصاص بعد الإرسال اين اضعه اذا ممكن توضيح مع فائق المودة والاحترام

أعتقد أنك يجب عليك دراسة الأساسيات أولا قبل البدأ في أى مشاريع حيث أنك إذا لم تكن لديك علم بالأساسيات فالعمل سيكون صعبا و لن يكون شيئا جيدا بالنسبة للتعلم .

أولا إن ما يتم إرساله إلى الخادم هو مصفوفة تحمل المدخلات الخاصة بال Form . وهذه المصفوفة تكون المفاتيح فيها هي خاصية ال name فى المدخلات و قيمتها هي ما تم إدخاله .

لاحظ هنا

 <select id="femaleJob" name="femaleJob">

الخاصية name لها قيمة femaleJob إذا ما سيتم إرساله إلى الخادم كالتالي فرضا أن المستخدم إختار ممرضة :

[ "femaleJob" => "ممرضة" ]

وهذا ما سيأتي في الخادم :

$femaleJob = $_POST['femaleJob'];

وهكذا في أى مدخل (input) لديك . و يمكنك بعد ذلك إدخاله في قاعدة البيانات

Omer Amad · 3 يوليو

بتاريخ 4 دقائق مضت قال محمد عاطف17:
أعتقد أنك يجب عليك دراسة الأساسيات أولا قبل البدأ في أى مشاريع حيث أنك إذا لم تكن لديك علم بالأساسيات فالعمل سيكون صعبا و لن يكون شيئا جيدا بالنسبة للتعلم .

أولا إن ما يتم إرساله إلى الخادم هو مصفوفة تحمل المدخلات الخاصة بال Form . وهذه المصفوفة تكون المفاتيح فيها هي خاصية ال name فى المدخلات و قيمتها هي ما تم إدخاله .

لاحظ هنا
 <select id="femaleJob" name="femaleJob">
الخاصية name لها قيمة femaleJob إذا ما سيتم إرساله إلى الخادم كالتالي فرضا أن المستخدم إختار ممرضة :
[ "femaleJob" => "ممرضة" ]
وهذا ما سيأتي في الخادم :
$femaleJob = $_POST['femaleJob'];
وهكذا في أى مدخل (input) لديك . و يمكنك بعد ذلك إدخاله في قاعدة البيانات

اخي العزيز عندي الأساسيات كامله لكن مش عارف السبب وين.... صراحه الاتصال ناجح مع قاعدة بيانات لكن الموضوع هو اسم العامود الذي يظهر فيه اسم الاختصاص في اي مكان سيكون في select

بتاريخ 5 ساعة قال محمد عاطف17:

عذرا كان يجب أيضا تغير كود الجافاكريبت حتي تظهر قيم حقول ال select وهذا هو الكود بعد التعديل :

<script>
  const genderSelect = document.getElementById('gender');
  const maleJobsDiv = document.getElementById('maleJobs');
  const femaleJobsDiv = document.getElementById('femaleJobs');

  genderSelect.addEventListener('change', function() {
    if (this.value === 'ذكر') {
      maleJobsDiv.style.display = 'block';
      femaleJobsDiv.style.display = 'none';
    } else if (this.value === 'أنثى') {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'block';
    } else {
      maleJobsDiv.style.display = 'none';
      femaleJobsDiv.style.display = 'none';
    }
  });
</script>

وتأكذ إذا قمت بتغير ال value في عناصر ال select قم بتغيرها في هذا الجظء أيضا بنفس الثمية تمام

استاذ سؤال اسم العامود الذي اريد ان يظهر فيه كلمة ذكر وانثى اين يكون عنوان العامود في الكود أعلاه...

وايضآ اسم العامود الموجود في قاعدة بيانات الذي اريد ان يظهر فيه اسم الإختصاص بعد الإرسال اين اضعه اذا ممكن توضيح مع فائق المودة والاحترام

محمد عاطف17 · 3 يوليو

بتاريخ 1 دقيقة مضت قال Baker Mohammed:

استاذ سؤال اسم العامود الذي اريد ان يظهر فيه كلمة ذكر وانثى اين يكون عنوان العامود في الكود أعلاه...

هذا هو إسم العمود وهو gender ويمكنك تغيره إلى أي إسم تريده وإستقباله في الخادم:

<select id="gender" name="gender">

بتاريخ 3 دقائق مضت قال Baker Mohammed:

وايضآ اسم العامود الموجود في قاعدة بيانات الذي اريد ان يظهر فيه اسم الإختصاص بعد الإرسال اين اضعه اذا ممكن توضيح مع فائق المودة والاحترام

وهذا هو إسم العمود في إختصاص الرجال maleJob :

  <select id="maleJob" name="maleJob">

وإسم العمود في إختصاص النساء هو femaleJob :

  <select id="femaleJob" name="femaleJob">

Omer Amad · 3 يوليو

بتاريخ 4 دقائق مضت قال محمد عاطف17:
هذا هو إسم العمود وهو gender ويمكنك تغيره إلى أي إسم تريده وإستقباله في الخادم:
<select id="gender" name="gender">
وهذا هو إسم العمود في إختصاص الرجال maleJob :
  <select id="maleJob" name="maleJob">
وإسم العمود في إختصاص النساء هو femaleJob :
  <select id="femaleJob" name="femaleJob">

استاذ الموضوع كله تمام والاختيار شغال والارسال شغال.... لكن انا عندي عامود فارغ بدي المتقدم لما يختار اسم الإختصاص من اي اختصاص سواء ذكر او أنثى بدي تصل المعلومة لعامود info.... اما عامود الخاص لذكر والأنثى ف شغال وتصل عليه البيانات لما المتقدم يختار ذكر او أنثى يعني مشكلتي فقط في عدم إيصال بيانات الاختصاص لعامود info

Omer Amad · 3 يوليو

تم حل المشكلة شكرا جزيلا

إظهار خيارات في الـ Form حسب جنس المستخدم

السؤال

Omer Amad

13 أجوبة على هذا السؤال

Recommended Posts

Chihab Hedidi

Mustafa Suleiman

Omer Amad

Omer Amad

محمد عاطف17

Omer Amad

محمد عاطف17

Omer Amad

محمد عاطف17

Omer Amad

محمد عاطف17

Omer Amad

Omer Amad

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية