Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Opening collapsibles
Posted by: PinGuy Nov 13 2019, 03:58 AM
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>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)