<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .movable{
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #3f3e3e;
    };

  </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <p class="navbar-brand" href="#">Form Checking</p>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <p class="nav-link active" aria-current="page" href="#">types of Forms</p>
              </li>
              <select id="formSelect">
                {% for form in forms %}  
                <option value='{{ form.id }}'>
                      {{ form.Name }}
                  </option>
                  {% endfor %}
              </select>
              <li class="nav-item">
                <button class="nav-link active" aria-current="page" onclick="obj.AjaxCall('load')">Load</button>
              </li>

                <li class="nav-item">
                    <button class="nav-link active" aria-current="page"><<</button>
                  </li>
                  <li class="nav-item">
                    <button class="nav-link active" aria-current="page"onclick="obj.AjaxCall('next')">>></button>
                  </li>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div id="context">

      </div>
    <script>
  class Work
  { 
    constructor()
    {
         this.j=0, this.current=$("#formSelect :selected").val();
  }
   AjaxCall(change)
{
  if(change=="load")
  {
    this.current=document.getElementById("formSelect").index;
    console.log(this.current);
  }
  this.current=$("#formSelect :selected").val();
    var url ="{% url 'form_changer' %}";
    $.ajax({
            type:'GET',

            url: url,
            data: {
                'change':change,
                'formname': this.current,
                'resnum':this.j,
            },
            error: function(xhr, status, error) {
                                                    alert("disconnected! \n copy token number:"+$("#token").html()+" to get again in Queue");
                                                    console.log("Confirmedddd");
                                                },
            success: function (dd){
              if(change=='next')
              {
                var i;
                console.log("working");
                var dict=dd[null];
                for(i in dict)
                {
                try{
                  console.log(document.getElementsByName(i)[0].tagName);
                  if(document.getElementsByName(i)[0].tagName=="INPUT")
                  {
                            if(document.getElementsByName(i)[0].type=="radio")
                            {
                              console.log("Radio");
                              document.getElementById(dict[i]).checked=true;
                            }
                          else if(document.getElementsByName(i)[0].type=="text")
                            {
                              document.getElementsByName(i)[0].value = dict[i];
                              deleter();
                            }
                            else
                            {
                              $("[name ='"+i+"']").val(dict[i]);
                              console.log("herere");
                            }
                  }
                  else if(document.getElementsByName(i)[0].tagName=="SELECT")
                  {
              
                    $("[name ='"+i+"']").val(dict[i]);
                  }
                  else{
                    console.log("unknown",document.getElementsByName[0](i).tagName,document.getElementsByName[0](i).type);
                  }
                   
              
                  }
                  catch{
                    console.log("datatype error");
                  }
                  }
                    this.j++;
              }
              else if(change=='load')
              {
                document.getElementById("context").innerHTML=dd;
                
                this.j=0;
        
              }

              console.log(dd);
                                  },
                                
        });
}
       deleter(){       
          var paras = document.getElementsByClassName('dropdown');
var i = 0;
for(i=0;i<paras.length;i++){
  paras[i].innerHTML="";
  }
paras = document.getElementsByClassName('delItems');
for(i=0;i<paras.length;i++){
  paras[i].innerHTML="";
  }
  }
};
obj= new Work();
</script>
   
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</html>