أثناء إنشاء نموذج أو استبيان ، يمكن أن يكون هناك متطلب لتخصيص قيمة إدخال المستخدم لحقل معين. على سبيل المثال ، إلحاق إدخالات سرية ، أي كلمة مرور أو قيمة مشفرة من أجل الاستفادة منها. في مثل هذه الحالات ، يساعد تعيين قيمة عنصر الإدخال المخفي من خلال JavaScript في الحفاظ على البيانات آمنة ومأمونة.
ستناقش هذه المدونة الإجراء الخاص بتعيين قيمة حقل الإدخال المخفي من خلال JavaScript
كيفية تعيين قيمة حقل الإدخال المخفي من خلال JavaScript؟
لتعيين قيمة حقل الإدخال المخفي من خلال JavaScript ، قم بتطبيق الأساليب المذكورة أدناه:
الطريقة الأولى: قم بتعيين قيمة العنصر المخفي عبر خاصية innerHTML
ال ' داخلي HTML 'إرجاع محتوى HTML للعنصر. يمكن استخدام هذه الخاصية لتعيين وإلحاق القيمة المعرفة من قبل المستخدم بحقل الإدخال المخفي المخصص.
بناء الجملة:
element.innerHTML = نص
في الصيغة أعلاه ، ' جزء 'يشير إلى العنصر الذي يجب إلحاقه بـ' نص ' القيمة.
مثال
لنستعرض المثال المذكور أدناه:
< إدخال يكتب = 'مختفي' هوية شخصية = 'العنصر المخفي' القيمة = '' >< النصي >
يترك myInput = موجه ( 'الرجاء إدخال النص الخاص بك' و '' ) ؛
لو ( myInput ! = فارغ ) {
يترك x = document.getElementById ( 'العنصر المخفي' ) .innerHTML = 'قيمة العنصر المخفي هي:' + مدخلاتي ؛
إنذار ( x )
}
النصي >
في كتلة التعليمات البرمجية أعلاه:
- أولاً ، قم بإنشاء حقل الإدخال الذي يحتوي على السمات المحددة.
- ال ' يكتب 'مع القيمة' مختفي 'يدل على أنه حقل مخفي.
- بعد ذلك ، ' اِسْتَدْعَى يأخذ مربع الحوار قيمة من المستخدم.
- الآن ، قم بتطبيق فحص على القيمة المعرفة من قبل المستخدم بحيث لا تكون ' باطل ' باستخدام ' لو ' حالة.
- أخيرًا ، قم بالوصول إلى حقل الإدخال المخفي من خلال ' هوية شخصية ' باستخدام ' getElementById () 'وتعيين القيمة المحددة من قبل المستخدم إليها عبر' داخلي HTML ' خاصية.
- أخيرًا ، اعرض القيمة الملحقة عبر تنبيه.
انتاج |
كما لوحظ ، يتم إلحاق قيمة إدخال المستخدم بحقل الإدخال المخفي.
الطريقة 2: تعيين قيمة العنصر المخفي باستخدام نهج jQuery
في هذا النهج ، فإن 'jQuery' فال () ”لتخصيص قيمة حقل نص الإدخال المرئي لحقل الإدخال المخفي.
مثال
دعونا نلقي نظرة عامة على الكود التالي:
< ص > أدخل القيمة ل العنصر المخفي ص >< إدخال هوية شخصية = 'مدخلاتي' القيمة = '' يكتب = 'نص' /> ر >
< إدخال هوية شخصية = 'العنصر المخفي' يكتب = 'مختفي' القيمة = '' />
< ر >
< زر هوية شخصية = 'btnShow' > إرسال زر >
< النصي src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > النصي >
< النصي >
$ ( '#btnShow' ) .على ( 'انقر' و وظيفة ( ) {
يترك inputValue = دولار ( '#myInput' ) .val ( ) ؛
$ ( '#hiddenElement' ) .val ( قيمة المدخلات ) ؛
إنذار ( 'قيمة العنصر المخفي هي:' + المدخلاتالقيمة ) ؛
} ) ؛
النصي >
في سطور التعليمات البرمجية أعلاه:
- أولاً ، قم بتضمين حقل نص الإدخال الذي يحتوي على السمات المحددة.
- وبالمثل ، قم بتخصيص حقل إدخال مخفي آخر ، كما يتضح من ' يكتب ' ينسب.
- تمت إضافة علامة
- بعد ذلك ، قم بتضمين مكتبة jQuery بمساعدة ' src 'في'