تحسين تفاعل النماذج باستخدام jQuery في صفحات الويب

عند النظر إلى كودك على jsfiddle، يظهر أن لديك صفحة ويب تحتوي على زر “+ Create Forum” ونموذج (form) مخفي يظهر عند النقر على هذا الزر. تواجه مشكلة في تحقيق السلوك المرجو، حيث ترغب في أن يقوم النموذج بإظهار نفسه عند النقر على الزر، وأن يتم إعادة تعيين النموذج وإخفاؤه عند النقر على زر “Cancel”.

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

يمكنك تحقيق ذلك عن طريق وضع جميع الأكواد الخاصة بالجافا سكريبت داخل دالة $(document).ready(function() {...});. هذا سيضمن أن السكريبت لا يقوم بتفعيل الأحداث حتى يتم تحميل كل العناصر على الصفحة.

html
<html>
<head>
  
  <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

  <button class="btn btn-default" type="submit" id="createform">+ Create Forumbutton>
  <div class="form-group" id="createForum">
    <form action="forums.php" method="get" id="forumForm" style="display: none">
      <label>Forum name:label>
      <input type="text" class="form-control" id="forumName">
      <label>Description:label>
      <textarea class="form-control" rows="5" id="description">textarea>
      <button class="btn btn-danger" type="submit" name="create">Createbutton>
      <input type="button" value="Reset Form" onclick="clearing()">
    form>
  div>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#createform").click(function() {
        $("#forumForm").show();
      });

      function clearing() {
        document.getElementById("forumForm").reset();
      }
    });
  script>

body>
html>

الآن، يجب أن يعمل الكود بالشكل المتوقع، حيث يظهر النموذج عند النقر على “+ Create Forum”، ويمكن إعادة تعيينه وإخفاؤه عند النقر على زر “Reset Form”.

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

إدارة ظهور وإخفاء عنصر الواجهة في تطبيق Swift

تقديم صفحات AMP: كيفية تحسين تجربة المستخدم للأجهزة المحمولة