Opening collapsibles |
Opening collapsibles |
PinGuy |
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 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> |
Lo-Fi Version | Time is now: 24th April 2024 - 06:51 PM |