The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Opening collapsibles
PinGuy
post Nov 13 2019, 03:58 AM
Post #1





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



Hi, I am having some difficulties with my (messy) code, with a simple issue...
I need my form to check the values, and if they exist, open the collapsible on load. I am using Materialize CSS 1.0.
I got this working, the problem I am having is that to open the closed collapsibles, or to close the opened ones, it is requiring double clicks for such action instead of single clicks, so they behave erratically.
I suspect the issue is with the function cn(3). If I comment it out, all works normally, except of course the collapsibles with populated values won't open automatically... Tips for optimizing my code would also be of great help, as well as knowing if I am doing something ridiculously wrong smile.gif
Thanks in advance!

CODE

<html>

  <head>
    <title>User Management</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
      function cn(n, o) {
        var u = ["u1", "u2", "u3", "u4", "u5"];
        var un = ["un1", "un2", "un3", "un4", "un5"];
        var nu = ["nu1", "nu2", "nu3", "nu4", "nu5"];
        var i;
        if (n == 1) { //Submit
          for (i = 0; i < u.length; i++) {
              if (document.getElementById(u[i]).value != "" && document.getElementById(un[i]).value == "") {
                document.getElementById(un[i]).focus();
                return false;
              }
              if (document.getElementById(un[i]).value != "" && document.getElementById(u[i]).value == "") {
                document.getElementById(u[i]).focus();
                return false;
              }
          }
        }
        if (n == 2) { // Onload
          for (i = 0; i < u.length; i++) {
            if (document.getElementById(u[i]).value != "" || document.getElementById(un[i]).value != "") {
              document.getElementById('m' + nu[i]).classList.add("active");
              document.getElementById('i'+(i+1)).style.display = 'block';
            }
          }
          $('.collapsible').collapsible();
        }
        if (n == 3) { // Opening
            document.getElementById(o).classList.add("active");
            $('.collapsible').collapsible();
        }
        if (n == 4) { // Check Delete
            if (document.getElementById(u[parseInt(o.slice(-1))-1]).value != "" || document.getElementById(un[parseInt(o.slice(-1))-1]).value != "")
              return true;
            else
              return false;
        }
      }

    </script>
    <style>
      .wrap {
        margin: auto;
        min-width: 400px;
        max-width: 600px
      }

    </style>
  </head>

  <body class="container wrap" onload="cn(2)">
    <form method="POST" action="http://127.0.0.1/guardarcfg">
      <a href="/" class="waves-effect waves-teal btn-floating" style="margin-top:10px"><i class="material-icons">arrow_back_ios</i></a>
      <h4 style="text-align:center">Add Users</h4>
      <ul class="collapsible">
        <li>
          <div id="mnu1" class="collapsible-header active" style="position:relative">
            <i class="material-icons">account_box</i>User 1<a href="\" id="a1" onclick="return cn(4, this.id)"><i id="i1" class="material-icons" style="display:none;position:absolute;right:0">close</i></a></div>
          <div class="collapsible-body" style="margin-left:-20px;padding-top:5px;padding-bottom:0px">
            <div class="row">
              <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="un1" type="text" name="un1" maxlength="15" value="User1" autocapitalize="words" autocorrect="off" autocomplete="off" class="validate">
                <label for="un1">Name</label>
              </div>
              <div class="input-field col s6">
                <i class="material-icons prefix">stay_current_portrait</i>
                <input title="Only numbers, max 15" maxlength="15" pattern="[0-9]{0,15}" type="tel" id="u1" name="u1" value="11111" autocorrect="off" autocomplete="off" class="validate">
                <label for="u1">Mobile</label><span style="font-size:x-small;float:right;color:gray">Ex: 111122223333</span>
              </div>
              <div style="display:table;margin:0 auto">
                <label style="padding-right:10px">
                  <input type="radio" id="nu11" name="nu1" value="1" class="with-gap" checked=""> <span style="font-size:medium">Type 1</span></label>
                <label>
                  <input type="radio" id="nu12" name="nu1" value="2" class="with-gap"> <span style="font-size:medium">Type 2</span></label>
                <br>
                <label style="padding-right:10px">
                  <input type="radio" id="nu13" name="nu1" value="3" class="with-gap"> <span style="font-size:medium">Type 3</span></label>
                <label>
                  <input type="radio" id="nu14" name="nu1" value="4" class="with-gap"> <span style="font-size:medium">Type 4</span></label></div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="collapsible">
        <li>
          <div onclick="return cn(3, this.id)" id="mnu2" class="collapsible-header" style="position:relative">
            <i class="material-icons">account_box</i>User 2<a href="\" id="a2" onclick="return cn(4, this.id)"><i id="i2" class="material-icons" style="display:none;position:absolute;right:0">close</i></a></div>
          <div class="collapsible-body" style="margin-left:-20px;padding-top:5px;padding-bottom:0px">
            <div class="row">
              <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="un2" type="text" name="un2" maxlength="15" value="" autocapitalize="words" autocorrect="off" autocomplete="off" class="validate">
                <label for="un2">Name</label>
              </div>
              <div class="input-field col s6">
                <i class="material-icons prefix">stay_current_portrait</i>
                <input title="Only numbers, max 15" maxlength="15" pattern="[0-9]{0,15}" type="tel" id="u2" name="u2" value="" autocorrect="off" autocomplete="off" class="validate">
                <label for="u2">Mobile</label><span style="font-size:x-small;float:right;color:gray">Ex: 111122223333</span>
              </div>
              <div style="display:table;margin:0 auto">
                <label style="padding-right:10px">
                  <input type="radio" id="nu21" name="nu2" value="1" class="with-gap" checked=""> <span style="font-size:medium">Type 1</span></label>
                <label>
                  <input type="radio" id="nu22" name="nu2" value="2" class="with-gap"> <span style="font-size:medium">Type 2</span></label>
                <br>
                <label style="padding-right:10px">
                  <input type="radio" id="nu23" name="nu2" value="3" class="with-gap"> <span style="font-size:medium">Type 3</span></label>
                <label>
                  <input type="radio" id="nu24" name="nu2" value="4" class="with-gap"> <span style="font-size:medium">Type 4</span></label></div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="collapsible">
        <li>
          <div onclick="return cn(3, this.id)" id="mnu3" class="collapsible-header" style="position:relative">
            <i class="material-icons">account_box</i>User 3<a href="\" id="a3" onclick="return cn(4, this.id)"><i id="i3" class="material-icons" style="display:none;position:absolute;right:0">close</i></a></div>
          <div class="collapsible-body" style="margin-left:-20px;padding-top:5px;padding-bottom:0px">
            <div class="row">
              <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="un3" type="text" name="un3" maxlength="15" value="John Doe" autocapitalize="words" autocorrect="off" autocomplete="off" class="validate">
                <label for="un3">Name</label>
              </div>
              <div class="input-field col s6">
                <i class="material-icons prefix">stay_current_portrait</i>
                <input title="Only numbers, max 15" maxlength="15" pattern="[0-9]{0,15}" type="tel" id="u3" name="u3" value="123123" autocorrect="off" autocomplete="off" class="validate">
                <label for="u3">Mobile</label><span style="font-size:x-small;float:right;color:gray">Ex: 111122223333</span>
              </div>
              <div style="display:table;margin:0 auto">
                <label style="padding-right:10px">
                  <input type="radio" id="nu31" name="nu3" value="1" class="with-gap" checked=""> <span style="font-size:medium">Type 1</span></label>
                <label>
                  <input type="radio" id="nu32" name="nu3" value="2" class="with-gap"> <span style="font-size:medium">Type 2</span></label>
                <br>
                <label style="padding-right:10px">
                  <input type="radio" id="nu33" name="nu3" value="3" class="with-gap"> <span style="font-size:medium">Type 3</span></label>
                <label>
                  <input type="radio" id="nu34" name="nu3" value="4" class="with-gap"> <span style="font-size:medium">Type 4</span></label></div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="collapsible">
        <li>
          <div onclick="return cn(3, this.id)" id="mnu4" class="collapsible-header" style="position:relative">
            <i class="material-icons">account_box</i>User 4<a href="\" id="a4" onclick="return cn(4, this.id)"><i id="i4" class="material-icons" style="display:none;position:absolute;right:0">close</i></a></div>
          <div class="collapsible-body" style="margin-left:-20px;padding-top:5px;padding-bottom:0px">
            <div class="row">
              <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="un4" type="text" name="un4" maxlength="15" value="" autocapitalize="words" autocorrect="off" autocomplete="off" class="validate">
                <label for="un4">Name</label>
              </div>
              <div class="input-field col s6">
                <i class="material-icons prefix">stay_current_portrait</i>
                <input title="Only numbers, max 15" maxlength="15" pattern="[0-9]{0,15}" type="tel" id="u4" name="u4" value="" autocorrect="off" autocomplete="off" class="validate">
                <label for="u4">Mobile</label><span style="font-size:x-small;float:right;color:gray">Ex: 111122223333</span>
              </div>
              <div style="display:table;margin:0 auto">
                <label style="padding-right:10px">
                  <input type="radio" id="nu41" name="nu4" value="1" class="with-gap" checked=""> <span style="font-size:medium">Type 1</span></label>
                <label>
                  <input type="radio" id="nu42" name="nu4" value="2" class="with-gap"> <span style="font-size:medium">Type 2</span></label>
                <br>
                <label style="padding-right:10px">
                  <input type="radio" id="nu43" name="nu4" value="3" class="with-gap"> <span style="font-size:medium">Type 3</span></label>
                <label>
                  <input type="radio" id="nu44" name="nu4" value="4" class="with-gap"> <span style="font-size:medium">Type 4</span></label></div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="collapsible">
        <li>
          <div onclick="return cn(3, this.id)" id="mnu5" class="collapsible-header" style="position:relative">
            <i class="material-icons">account_box</i>User 5<a href="\" id="a5" onclick="return cn(4, this.id)"><i id="i5" class="material-icons" style="display:none;position:absolute;right:0">close</i></a></div>
          <div class="collapsible-body" style="margin-left:-20px;padding-top:5px;padding-bottom:0px">
            <div class="row">
              <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="un5" type="text" name="un5" maxlength="15" value="" autocapitalize="words" autocorrect="off" autocomplete="off" class="validate">
                <label for="un5">Name</label>
              </div>
              <div class="input-field col s6">
                <i class="material-icons prefix">stay_current_portrait</i>
                <input title="Only numbers, max 15" maxlength="15" pattern="[0-9]{0,15}" type="tel" id="u5" name="u5" value="" autocorrect="off" autocomplete="off" class="validate">
                <label for="u5">Mobile</label><span style="font-size:x-small;float:right;color:gray">Ex: 111122223333</span>
              </div>
              <div style="display:table;margin:0 auto">
                <label style="padding-right:10px">
                  <input type="radio" id="nu51" name="nu5" value="1" class="with-gap" checked=""> <span style="font-size:medium">Type 1</span></label>
                <label>
                  <input type="radio" id="nu52" name="nu5" value="2" class="with-gap"> <span style="font-size:medium">Type 2</span></label>
                <br>
                <label style="padding-right:10px">
                  <input type="radio" id="nu53" name="nu5" value="3" class="with-gap"> <span style="font-size:medium">Type 3</span></label>
                <label>
                  <input type="radio" id="nu54" name="nu5" value="4" class="with-gap"> <span style="font-size:medium">Type 4</span></label></div>
            </div>
          </div>
        </li>
      </ul>
      <button class="btn waves-effect waves-light" style="width:100%;padding-top=10px;margin-bottom:10px" onclick='return cn(1)' type="submit" onclick="return cn()">Save Changes</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
  </body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:11 PM