مشكلة في إخفاء و إظهار العناصر

Omer Amad · 12 أغسطس

كيفكم يا أصدقاء.... ارجوا المساعدة.... لديه صفحة updata.php.... تحتوي على form.... ال form يحتوي على select مرتبطة مع بعضها لما يتم اختيار الخيار أنثى او ذكر يظهرلي سلكت اخر مع input خاص بالصوره.....

<!-- الـselect الأول -->
<select name="Cn" id="Cn" onchange="showSelect(this)">
    <option value="">الجننس</option>
    <option value="انثى" <?php echo ($row['Cn'] == 'انثى') ? 'selected' : ''; ?>>انثى</option>
    <option value="ذكر" <?php echo ($row['Cn'] == 'ذكر') ? 'selected' : ''; ?>>ذكر</option>
</select>

<!-- الـselect الثاني -->
<select id="na" name="nah" style="display: <?php echo ($row['Cn'] == 'انثى') ? 'block' : 'none'; ?>;" value="<?php echo $row['nah']; ?>">
    <option value="">نوع المركز</option>
    <option value="المركز الاول" <?php echo ($row['nah'] == 'المركز الاول') ? 'selected' : ''; ?>>المركز الاول</option>
    <option value="المركز الثاني" <?php echo ($row['nah'] == 'المركز الثاني') ? 'selected' : ''; ?>>المركز الثاني</option>
</select>


<select  id="am" name="aly" style="display:none;"  value="<?php echo $row ['aly'] ?>">
                        <option value="">هل انت مدير </option>
                            <option  value="نعم">نعم</option>
                            <option  value="لا">لا</option>

                        </select>

 <div>
                        <label id="zoo" style="display: none;"  value="<?php echo $row ['zoo'] ?>">ارسل صورة :</label>
                         <input  type="file" id="img" name="file" style="display: none;" value="<?php echo $row ['file'] ?>">
                    </div> <br>

عبد الوهاب بومعراف · 12 أغسطس

يمكنك استخدام JavaScript للتحكم في العرض والإخفاء، حيث عندما يختار المستخدم 'انثى'، يظهر الـselect الثاني ويسمح للمستخدم بتحديد نوع المركز، أما إذا اختار 'ذكر'، فيظهر فقط الـselect الثالث الذي يسأل إذا كان المستخدم مديرا، ام الـselect الثالث يظهر دائما إذا تم تحديد الجنس، وإذا اختار المستخدم 'نعم'، يظهر حقل الصورة للرفع بهذا الشكل:

<!-- الـselect الأول -->
<select name="Cn" id="Cn" onchange="showSelect(this)">
    <option value="">الجنس</option>
    <option value="انثى" <?php echo ($row['Cn'] == 'انثى') ? 'selected' : ''; ?>>انثى</option>
    <option value="ذكر" <?php echo ($row['Cn'] == 'ذكر') ? 'selected' : ''; ?>>ذكر</option>
</select>

<!-- الـselect الثاني (يظهر إذا كان الخيار 'انثى') -->
<select id="na" name="nah" style="display: <?php echo ($row['Cn'] == 'انثى') ? 'block' : 'none'; ?>;" value="<?php echo $row['nah']; ?>">
    <option value="">نوع المركز</option>
    <option value="المركز الاول" <?php echo ($row['nah'] == 'المركز الاول') ? 'selected' : ''; ?>>المركز الاول</option>
    <option value="المركز الثاني" <?php echo ($row['nah'] == 'المركز الثاني') ? 'selected' : ''; ?>>المركز الثاني</option>
</select>

<!-- الـselect الثالث (يظهر دائمًا بعد تحديد 'انثى' أو 'ذكر') -->
<select id="am" name="aly" style="display:none;" value="<?php echo $row['aly']; ?>">
    <option value="">هل انت مدير؟</option>
    <option value="نعم" <?php echo ($row['aly'] == 'نعم') ? 'selected' : ''; ?>>نعم</option>
    <option value="لا" <?php echo ($row['aly'] == 'لا') ? 'selected' : ''; ?>>لا</option>
</select>

<!-- قسم الصورة (يظهر إذا تم اختيار 'نعم' في الـselect الثالث) -->
<div>
    <label id="zoo" style="display: none;">ارسل صورة:</label>
    <input type="file" id="img" name="file" style="display: none;" value="<?php echo $row['file']; ?>">
</div>
<br>

<script>
function showSelect(select) {
    const naSelect = document.getElementById('na');
    const amSelect = document.getElementById('am');
    const zooLabel = document.getElementById('zoo');
    const imgInput = document.getElementById('img');

    // عرض الـselect الثاني فقط إذا كان الجنس 'انثى'
    if (select.value === 'انثى') {
        naSelect.style.display = 'block';
        amSelect.style.display = 'block';
    } else if (select.value === 'ذكر') {
        naSelect.style.display = 'none';
        amSelect.style.display = 'block';
    } else {
        naSelect.style.display = 'none';
        amSelect.style.display = 'none';
        zooLabel.style.display = 'none';
        imgInput.style.display = 'none';
    }

    // عرض قسم الصورة إذا كان المستخدم اختار 'نعم'
    amSelect.addEventListener('change', function() {
        if (amSelect.value === 'نعم') {
            zooLabel.style.display = 'block';
            imgInput.style.display = 'block';
        } else {
            zooLabel.style.display = 'none';
            imgInput.style.display = 'none';
        }
    });
}
</script>

Omer Amad · 12 أغسطس

بتاريخ 5 دقائق مضت قال عبد الوهاب بومعراف:

يمكنك استخدام JavaScript للتحكم في العرض والإخفاء، حيث عندما يختار المستخدم 'انثى'، يظهر الـselect الثاني ويسمح للمستخدم بتحديد نوع المركز، أما إذا اختار 'ذكر'، فيظهر فقط الـselect الثالث الذي يسأل إذا كان المستخدم مديرا، ام الـselect الثالث يظهر دائما إذا تم تحديد الجنس، وإذا اختار المستخدم 'نعم'، يظهر حقل الصورة للرفع بهذا الشكل:

<!-- الـselect الأول -->
<select name="Cn" id="Cn" onchange="showSelect(this)">
    <option value="">الجنس</option>
    <option value="انثى" <?php echo ($row['Cn'] == 'انثى') ? 'selected' : ''; ?>>انثى</option>
    <option value="ذكر" <?php echo ($row['Cn'] == 'ذكر') ? 'selected' : ''; ?>>ذكر</option>
</select>

<!-- الـselect الثاني (يظهر إذا كان الخيار 'انثى') -->
<select id="na" name="nah" style="display: <?php echo ($row['Cn'] == 'انثى') ? 'block' : 'none'; ?>;" value="<?php echo $row['nah']; ?>">
    <option value="">نوع المركز</option>
    <option value="المركز الاول" <?php echo ($row['nah'] == 'المركز الاول') ? 'selected' : ''; ?>>المركز الاول</option>
    <option value="المركز الثاني" <?php echo ($row['nah'] == 'المركز الثاني') ? 'selected' : ''; ?>>المركز الثاني</option>
</select>

<!-- الـselect الثالث (يظهر دائمًا بعد تحديد 'انثى' أو 'ذكر') -->
<select id="am" name="aly" style="display:none;" value="<?php echo $row['aly']; ?>">
    <option value="">هل انت مدير؟</option>
    <option value="نعم" <?php echo ($row['aly'] == 'نعم') ? 'selected' : ''; ?>>نعم</option>
    <option value="لا" <?php echo ($row['aly'] == 'لا') ? 'selected' : ''; ?>>لا</option>
</select>

<!-- قسم الصورة (يظهر إذا تم اختيار 'نعم' في الـselect الثالث) -->
<div>
    <label id="zoo" style="display: none;">ارسل صورة:</label>
    <input type="file" id="img" name="file" style="display: none;" value="<?php echo $row['file']; ?>">
</div>
<br>

<script>
function showSelect(select) {
    const naSelect = document.getElementById('na');
    const amSelect = document.getElementById('am');
    const zooLabel = document.getElementById('zoo');
    const imgInput = document.getElementById('img');

    // عرض الـselect الثاني فقط إذا كان الجنس 'انثى'
    if (select.value === 'انثى') {
        naSelect.style.display = 'block';
        amSelect.style.display = 'block';
    } else if (select.value === 'ذكر') {
        naSelect.style.display = 'none';
        amSelect.style.display = 'block';
    } else {
        naSelect.style.display = 'none';
        amSelect.style.display = 'none';
        zooLabel.style.display = 'none';
        imgInput.style.display = 'none';
    }

    // عرض قسم الصورة إذا كان المستخدم اختار 'نعم'
    amSelect.addEventListener('change', function() {
        if (amSelect.value === 'نعم') {
            zooLabel.style.display = 'block';
            imgInput.style.display = 'block';
        } else {
            zooLabel.style.display = 'none';
            imgInput.style.display = 'none';
        }
    });
}
</script>

كيف اقدر اتواصل معك... معي مشكله مش عارف احلها ارجو المساعدة

عبد الوهاب بومعراف · 12 أغسطس

بتاريخ 6 دقائق مضت قال Omer Amad:

كيف اقدر اتواصل معك... معي مشكله مش عارف احلها ارجو المساعدة

أرجوا وضع أسئلتك فقطهنا و سيتكفل المدربون بمساعدتك.

Omer Amad · 12 أغسطس

بتاريخ 3 دقائق مضت قال عبد الوهاب بومعراف:

أرجوا وضع أسئلتك فقطهنا و سيتكفل المدربون بمساعدتك.

ارجو من حظرتك المساعدة لكي اشرح لك تفاصيل المشكله

مشكلة في إخفاء و إظهار العناصر

السؤال

Omer Amad

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

Recommended Posts

عبد الوهاب بومعراف

Omer Amad

عبد الوهاب بومعراف

Omer Amad

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية