I'm making a printable ICE card. User enters info in form inputs and they are shown preview below.
The code I have is working fine, but I have to copy/paste it for each input/element match. I want to compress the code so that it listens for changes for each input and changes the text for matching element.
Snippet below. JSFiddle is here
$("#inputName").keyup(function() {
$("#spanName").html($(this).val());
});
$("#inputHCN").keyup(function() {
$("#spanHCN").html($(this).val());
});
$("#inputDOB").keyup(function() {
$("#spanDOB").html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
Data attributes is the way I would go
$("[data-out]").keyup(function() {
var selector = $(this).data("out");
$(selector).text($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
Add data-target attribute to your form elements with ids of elements where the text should be displayed:
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
Now change your scripts to display the text. Note that I am using two events keyup and change so that copy-paste would work as well.
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
Demo shown below:
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
There could be a lot of variants, here is a short one that rely to keep a naming convention between input id attribute and span id attribute:
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
$("#span" + this.id.replace('input', '')).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
Another way is through replacing input with span assuming that the naming convention is followed.
$("#inputName, #inputHCN, #inputDOB").keyup(function() {
var spanId = $(this).attr("id").replace("input", "span");
$("#" + spanId).html($(this).val());
});
You can try this. Hope it will help. Just change the name of textboxes and find the span control using textbox name.
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
var inputValue = $(this).attr("name");
$("#span" + inputValue).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
You could loop through inputs and add event listeners to each:
var inputs = $('form p input');
for (var i=0; i<inputs.length; i++) {
$(inputs[i]).keyup(function() {
var span = $(this).attr('id').replace('input','span');
$("#"+span).html($(this).val());
});
}
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>
//map the names of the input elements with the output elements
var myIOMap={
inputName:"spanName",
inputHCN:"spanHCN",
inputDOB:"spanDOB",
};
function doTextBinding(ioMap){
Object.keys(ioMap).forEach(function(inputName,outputName){
var inputElement="#"+inputName;
var outputElement="#"+ioMap[inputName];
console.log(inputElement);
console.log(outputElement);
$(inputElement).keyup(function() {
$(outputElement).html($(this).val());
});
});
}
doTextBinding(myIOMap);
Replace your JavaScript with the following code, it will do the same without having to rewrite the key-up binding for each element. Make sure you call the function every time the page initializes though.
Related
The calculator was working fine until I added the activity level from the drop down. Depending on the users selection for activity level, the value returned should be multiplied by the corresponding value associated with each activity level. I have added the values that it should be multiplying the result by. However, it doesn't seem to be seeing the 'activityLevel' variable inside the function. Am I not declaring this properly? When I try to run the code, it returns a NaN result.
/* Calculate female macros */
(function() {
function calculateFemale(femaleWeight, femaleHeight, femaleAge) {
femaleWeight = parseFloat(femaleWeight);
femaleHeight = parseFloat(femaleHeight);
femaleAge = parseFloat(femaleAge);
activityLevel = (activityLevel);
return (((femaleWeight * 4.3) + (femaleHeight * 4.7) - (femaleAge * 4.7) * activityLevel);
}
var womanBMR = document.getElementById("womanBMR");
if (womanBMR) {
womanBMR.onsubmit = function() {
this.result.value = calculateFemale(this.femaleWeight.value, this.femaleHeight.value, this.femaleAge.value, this.activityLevel.value);
return false;
};
}
}());
/* Calculate male macros */
(function() {
function calculateMale(maleWeight, maleHeight, maleAge) {
maleWeight = parseFloat(maleWeight);
maleHeight = parseFloat(maleHeight);
maleAge = parseFloat(maleAge);
activityLevel = (activityLevel);
return (((maleWeight * 6.3) + (maleHeight * 12.9) - (maleAge * 6.8) + 66) * activityLevel);
}
var maleBMR = document.getElementById("manBMR");
if (manBMR) {
manBMR.onsubmit = function() {
this.result.value = calculateMale(this.maleWeight.value, this.maleHeight.value, this.maleAge.value, this.activityLevel.value);
return false;
};
}
}());
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
.w-button {
display: inline-block;
padding: 9px 15px;
background-color: #3898EC;
color: white;
border: 0;
border-radius: 0;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}
.w-row:before,
.w-row:after {
content: " ";
display: table;
}
.w-row:after {
clear: both;
}
.w-col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
.w-col .w-col {
padding-left: 0;
padding-right: 0;
}
.w-col-1 {
width: 8.33333333%;
}
.w-col-2 {
width: 91.66666667%;
}
body {
margin: 0;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
h1 {
font-size: 38px;
line-height: 44px;
margin-top: 20px;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
color: #f70909;
font-size: 32px;
line-height: 36px;
font-weight: 400;
}
.text-block {
position: relative;
left: 100px;
}
.text-block-3 {
margin-top: 20px;
padding-left: 100px;
}
.text-block-4 {
padding-top: 20px;
padding-left: 20px;
}
.list {
padding-left: 140px;
}
.div-block {
font-style: italic;
font-weight: 400;
}
.paragraph {
padding-top: 20px;
}
.container {
margin-top: 0px;
}
.button {
margin-top: 20px;
margin-left: 100px;
background-color: #020202;
}
.column-1 {
background-color: #f0e8e8;
}
.image {
padding-left: 20px;
}
<!DOCTYPE html>
<head>
<title>Calculator</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w-row">
<div class="w-col w-col-1"><img src="images/apple.jpg" alt="apple"></div>
<div class="column-1 w-col w-col-2">
<h1>Healthy Eating</h1>
</div>
</div>
<div class="w-container">
<h2>Calculator</h2>
</div>
<div class="w-container">
<div><em>Use the form below if you are female.</em></div>
<form id="womanBMR">
<fieldset>
<p>
<label for="femaleWeight">Weight (lbs)</label>
<input id="femaleWeight" name="femaleWeight" type="number" />
</p>
<p>
<label for="femaleHeight">Height (inches)</label>
<input id="femaleHeight" name="femaleHeight" type="number" />
</p>
<p>
<label for="femaleAge">Ages (years)</label>
<input id="femaleAge" name="femaleAge" type="number" />
</p>
<p>
<select id = "selActivity">
<option value = "1.2">Sedentary</option>
<option value = "1.375">Light Activity</option>
<option value = "1.55">Moderate Activity</option>
<option value = "1.725">Very Active</option>
<option value = "1.9">Extra Active</option>
</select>
</p>
<p>
<input type="submit" value="Calculate" />
</p>
<p>
<label for="result">Base Calories Per Day</label>
<input id="result" name="result" />
</p>
<p>
<input type="reset" value="Clear" />
</p>
</fieldset>
</form>
</div>
<div class="w-container">
<div><em>Use the form below if you are male.</em></div>
<form id="manBMR">
<fieldset>
<p>
<label for="maleWeight">Weight (lbs)</label>
<input id="maleWeight" name="maleWeight" type="number" />
</p>
<p>
<label for="maleHeight">Height (inches)</label>
<input id="maleHeight" name="maleHeight" type="number" />
</p>
<p>
<label for="maleAge">Ages (years)</label>
<input id="maleAge" name="maleAge" type="number" />
</p>
<p>
<select id = "activityLevel">
<option value = "1.2">Sedentary</option>
<option value = "1.375">Light Activity</option>
<option value = "1.55">Moderate Activity</option>
<option value = "1.725">Very Active</option>
<option value = "1.9">Extra Active</option>
</select>
</p>
<p>
<input type="submit" value="Calculate" />
</p>
<p>
<label for="result">Base Calories Per Day</label>
<input id="result" name="result" />
</p>
<p>
<input type="reset" value="Clear" />
</p>
</fieldset>
</form>
</div>
<script src="js/calculatorscript.js"></script>
HomeRecipesTipsFAQ
</body>
</html>
You forgot to add the parameter to the function definition and to call parseFloat
/* Calculate female macros */
(function() {
function calculateFemale(femaleWeight, femaleHeight, femaleAge) {
femaleWeight = parseFloat(femaleWeight);
femaleHeight = parseFloat(femaleHeight);
femaleAge = parseFloat(femaleAge);
return ((femaleWeight * 4.3) + (femaleHeight * 4.7) - (femaleAge * 4.7) + 655);
}
var womanBMR = document.getElementById("womanBMR");
if (womanBMR) {
womanBMR.onsubmit = function() {
this.result.value = calculateFemale(this.femaleWeight.value, this.femaleHeight.value, this.femaleAge.value);
return false;
};
}
}());
/* Calculate male macros */
//*This function calculates the macros for a male, it requires three variables be input
//*by the user. Their weight, height, and age. It then returns the
(function() {
function calculateMale(maleWeight, maleHeight, maleAge, activityLevel) {
maleWeight = parseFloat(maleWeight);
maleHeight = parseFloat(maleHeight);
maleAge = parseFloat(maleAge);
activityLevel = parseFloat(activityLevel);
return (((maleWeight * 6.3) + (maleHeight * 12.9) - (maleAge * 6.8) + 66) * activityLevel);
}
var maleBMR = document.getElementById("manBMR");
if (manBMR) {
manBMR.onsubmit = function() {
this.result.value = calculateMale(this.maleWeight.value, this.maleHeight.value, this.maleAge.value, this.activityLevel.value);
return false;
};
}
}());
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
.w-button {
display: inline-block;
padding: 9px 15px;
background-color: #3898EC;
color: white;
border: 0;
border-radius: 0;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}
.w-row:before,
.w-row:after {
content: " ";
display: table;
}
.w-row:after {
clear: both;
}
.w-col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
.w-col .w-col {
padding-left: 0;
padding-right: 0;
}
.w-col-1 {
width: 8.33333333%;
}
.w-col-2 {
width: 91.66666667%;
}
body {
margin: 0;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
h1 {
font-size: 38px;
line-height: 44px;
margin-top: 20px;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
color: #f70909;
font-size: 32px;
line-height: 36px;
font-weight: 400;
}
.text-block {
position: relative;
left: 100px;
}
.text-block-3 {
margin-top: 20px;
padding-left: 100px;
}
.text-block-4 {
padding-top: 20px;
padding-left: 20px;
}
.list {
padding-left: 140px;
}
.div-block {
font-style: italic;
font-weight: 400;
}
.paragraph {
padding-top: 20px;
}
.container {
margin-top: 0px;
}
.button {
margin-top: 20px;
margin-left: 100px;
background-color: #020202;
}
.column-1 {
background-color: #f0e8e8;
}
.image {
padding-left: 20px;
}
<!DOCTYPE html>
<head>
<title>Calculator</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w-row">
<div class="w-col w-col-1"><img src="images/apple.jpg" alt="apple"></div>
<div class="column-1 w-col w-col-2">
<h1>Healthy Eating</h1>
</div>
</div>
<div class="w-container">
<h2>Calculator</h2>
</div>
<div class="w-container">
<div><em>Use the form below if you are female.</em></div>
<form id="womanBMR">
<fieldset>
<p>
<label for="femaleWeight">Weight (lbs)</label>
<input id="femaleWeight" name="femaleWeight" type="number" />
</p>
<p>
<label for="femaleHeight">Height (inches)</label>
<input id="femaleHeight" name="femaleHeight" type="number" />
</p>
<p>
<label for="femaleAge">Ages (years)</label>
<input id="femaleAge" name="femaleAge" type="number" />
</p>
<p>
<select id = "selActivity">
<option value = "1.2">Sedentary</option>
<option value = "1.375">Light Activity</option>
<option value = "1.55">Moderate Activity</option>
<option value = "1.725">Very Active</option>
<option value = "1.9">Extra Active</option>
</select>
</p>
<p>
<input type="submit" value="Calculate" />
</p>
<p>
<label for="result">Base Calories Per Day</label>
<input id="result" name="result" />
</p>
<p>
<input type="reset" value="Clear" />
</p>
</fieldset>
</form>
</div>
<div class="w-container">
<div><em>Use the form below if you are male.</em></div>
<form id="manBMR">
<fieldset>
<p>
<label for="maleWeight">Weight (lbs)</label>
<input id="maleWeight" name="maleWeight" type="number" />
</p>
<p>
<label for="maleHeight">Height (inches)</label>
<input id="maleHeight" name="maleHeight" type="number" />
</p>
<p>
<label for="maleAge">Ages (years)</label>
<input id="maleAge" name="maleAge" type="number" />
</p>
<p>
<select id = "activityLevel">
<option value = "1.2">Sedentary</option>
<option value = "1.375">Light Activity</option>
<option value = "1.55">Moderate Activity</option>
<option value = "1.725">Very Active</option>
<option value = "1.9">Extra Active</option>
</select>
</p>
<p>
<input type="submit" value="Calculate" />
</p>
<p>
<label for="result">Base Calories Per Day</label>
<input id="result" name="result" />
</p>
<p>
<input type="reset" value="Clear" />
</p>
</fieldset>
</form>
</div>
<script src="js/calculatorscript.js"></script>
HomeRecipesTipsFAQ
</body>
</html>
I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>
You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.
You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>
Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>
you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)
I created a web-to-lead form using SuiteCRM. Using the code generated by it,I further enhanced it and added a set of 4-checkboxes.
I saved it as a HTML normal page. When I open this html page in browser and it correctly display the alert and submits all the required values correctly to prescribed MySQL database table.
Here is the complete code of this html page:
<html lang='en_us'><head><base target=”_parent” /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d4090f764d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2jgjhr49146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="mello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
But my problem starts when I strips the opening & closing html codes from it. I created a 'Custom HTML' module in Joomla and pasted the code there and accessed in a article. The form takes correct shape at the front-end of website.
All the values of 3-fields viz., First Name, Last Name, Email are correctly recorded in database, but checkbox value(s) are not recorded. Even the alert is blank which occurs immediately after I click on submit/subscribe button.
I don't know why it is not working in JOOMLA 3.
MY OBJECTIVE: To have four checkboxes whose values are appended with " - " and stored in the 'list_name_c' field of database table.
What can I do to make it work?
With thanks,
RK
The problem has been solved. Java script was not working because of one more form on the final html webpage. The solution was to replace the code line var test = document.forms[0]; with the code line: var test = document.MYFORMNAME; Thanks!
I have a little problem with my javascript code.
How can i get this code:
HTML
<button id="toggle1" onclick="myFunction1()">Circle</button>
<button id="toggle2" onclick="myFunction2()">Square</button>
<button id="toggle3" onclick="myFunction3()">Border</button>
<li>
<div class="icon lm-home"></div>
<input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon lm-arrow"></div>
<input id="text" class="text" type="text" readonly="readonly" value="arrow">
</li>
<li>
<div class="icon lm-info"></div>
<input id="text" class="text" type="text" readonly="readonly" value="info">
</li>
Script
document.getElementById('toggle1').onclick = function() {
var txt = ' circle';
$.each( $(".text"), function( key, inputItem ) {
inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
});
}
document.getElementById('toggle2').onclick = function() {
var txt = ' square';
$.each( $(".text"), function( key, inputItem ) {
inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
});
}
document.getElementById('toggle3').onclick = function() {
var txt = ' border';
$.each( $(".text"), function( key, inputItem ) {
inputItem.value = inputItem.value.indexOf(txt) != -1 ? inputItem.value.replace(txt, '') : inputItem.value + txt;
});
}
Jquery 2.2.1 is needed
To work that when i click toggle1 it adds circle. But when i click toggle2 it will add square and remove circle. Vice Versa for the other buttons.
Can anybody help me with this?
My mockup of the code i use: JSFiddle
try this
$('#toggle1,#toggle2,#toggle3').click(function() {
toggleText(this.innerHTML);
});
function toggleText(text)
{
$(".text").each(function() {
$(this).val($(this).val().split( /circle|square/ ).join("") + " " + text); //remove existing circle or square and then add text
});
}
You can reset the inputItem value to 'home' every time a button is clicked
inputItem.value = "home";
JSFiddle : https://jsfiddle.net/93vrpybn/
Here is the answer that i was looking for.
$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() {
toggleText(this.innerHTML.toLowerCase());
});
function toggleText(text) {
$(".text").each(function() {
var totalArray = [' circle', ' square', ' border', 'burst'];
if ($(this).val().indexOf(text) != -1) {
var regex1 = new RegExp(text, "");
$(this).val($(this).val().replace(regex1, ""));
console.log("After replacing " + $(this).val());
} else {
//console.log( "After replacing " + $(this).val() );
$(this).val($(this).val() + "" + text);
//console.log( "After replacing " + $(this).val() );
}
totalArray.splice(totalArray.indexOf(text), +1);
console.log(totalArray);
var regex2 = new RegExp(totalArray.join("|"), "");
console.log(regex2);
$(this).val($(this).val().replace(regex2, ""));
});
}
$(document).ready(function() {
$("button.cirkel").click(function() {
$(".icon").removeClass("border");
$(".icon").removeClass("square");
$(".icon").toggleClass("circle");
$("button.cirkel").toggleClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").removeClass("on");
});
$("button.vierkant").click(function() {
$(".icon").removeClass("border");
$(".icon").toggleClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").toggleClass("on");
$("button.rand").removeClass("on");
});
$("button.rand").click(function() {
$(".icon").toggleClass("border");
$(".icon").removeClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").toggleClass("on");
});
$("#uitleg-toggle").click(function() {
$("#uitleg").toggleClass("zichtbaar");
});
$("input:text").focus(function() {
$(this).select();
});
});
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
ul {
padding: 0;
margin: 10px 0 0 0;
}
li {
list-style-type: none;
display: block;
left: 0;
margin: 5px 0 5px 0;
postiton: relative;
float: left;
}
button {
width: 100px;
border-radius: 7px;
height: 40px;
font-size: 20px;
border: 0px;
margin: 10px 10px 10px 0;
color: #FFF;
background-color: #D95021;
border: 3px outset #EA6C40;
display: block;
float: left;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #F9794D;
}
.on {
background-color: #5DC55D !important;
color: #FFF !important;
border: 3px outset #6BD46B;
}
.icon {
height: 66px !important;
width: 66px !important;
margin: 0 auto;
font-size: 55px !important;
padding: 10px !important;
text-align: center;
}
input {
border-radius: 10px;
padding: 10px;
border: 1px solid #dedede;
font-size: 16px;
text-transform: uppercase;
}
.circle {
border-radius: 80px !important;
display: block;
border: 3px solid #FF0066;
background-color: #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.circle:hover {
background-color: #FFF;
border: 3px solid #FF0066;
color: #FF0066 !important;
}
.square {
border-radius: 10px !important;
display: block;
background-color: #FF0066;
border: 3px solid #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.square:hover {
background-color: #FFF;
border: 3px solid #FF0066;
background-color: #FFF;
color: #FF0066 !important;
}
.border {
border-radius: 80px !important;
border: 3px solid #FF0066;
display: block;
background-color: #FFF;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FF0066 !important;
}
.border:hover {
background-color: #FF0066 !important;
color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click to add a class to see how it looks with a extra classname.</h3>
<button id="toggle1" class="cirkel">Circle</button>
<button id="toggle2" class="vierkant">Square</button>
<button id="toggle3" class="rand">Border</button>
<div style="clear:both;"></div>
<ul class="glyphs css-mapping">
<li>
<div class="icon lm-home">1</div>
<input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon lm-notes">2</div>
<input id="text" class="text" type="text" readonly="readonly" value="notes">
</li>
<li>
<div class="icon lm-info">3</div>
<input id="text" class="text" type="text" readonly="readonly" value="info">
</li>
<li>
<div class="icon lm-support">4</div>
<input id="text" class="text" type="text" readonly="readonly" value="support">
</li>
<li>
<div class="icon lm-check">5</div>
<input id="text" class="text" type="text" readonly="readonly" value="check">
</li>
<li>
<div class="icon lm-cross">6</div>
<input id="text" class="text" type="text" readonly="readonly" value="cross">
</li>
<li>
<div class="icon lm-min">7</div>
<input id="text" class="text" type="text" readonly="readonly" value="min">
</li>
<li>
<div class="icon lm-full">8</div>
<input id="text" class="text" type="text" readonly="readonly" value="full">
</li>
<li>
<div class="icon lm-menu">9</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu">
</li>
<li>
<div class="icon lm-menu-list">10</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu-list">
</li>
<li>
<div class="icon lm-dots">11</div>
<input id="text" class="text" type="text" readonly="readonly" value="dots">
</li>
<li>
<div class="icon lm-star">12</div>
<input id="text" class="text" type="text" readonly="readonly" value="star">
</li>
<li>
<div class="icon lm-zoom">13</div>
<input id="text" class="text" type="text" readonly="readonly" value="zoom">
</li>
<li>
<div class="icon lm-excl-mark">14</div>
<input id="text" class="text" type="text" readonly="readonly" value="excl-mark">
</li>
<li>
<div class="icon lm-question">15</div>
<input id="text" class="text" type="text" readonly="readonly" value="question">
</li>
<li>
<div class="icon lm-arrow-rd">16</div>
<input id="text" class="text" type="text" readonly="readonly" value="arrow-rd">
</li>
<li>
<div class="icon lm-s-arrow-r">17</div>
<input id="text" class="text" type="text" readonly="readonly" value="s-arrow-r">
</li>
<li>
<div class="icon lm-reset">18</div>
<input id="text" class="text" type="text" readonly="readonly" value="reset">
</li>
</ul>
</div>
How can i use this code so that it affects multiple input fields.
So when someone clicks on a button every input get's that value added to the original.
But the added value has to toggle on and off.
HTML
<button id="toggle1" onclick="myFunction1()" class="1">Circle On</button>
<button id="toggle2" onclick="myFunction2()" class="2">Square On</button>
<button id="toggle3" onclick="myFunction3()" class="3">Border On</button>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
Script
document.getElementById('toggle1').onclick = function() {
var txt = ' circle',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle2').onclick = function() {
var txt = ' square',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle3').onclick = function() {
var txt = ' border',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
Try it!
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["#mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
Your all input ID values are same ,
if you want to change all input when click try with it jquery
look it
<pre>https://jsfiddle.net/6xyasx7u/</pre>
I have the answer.
$('#toggle1,#toggle2,#toggle3').click(function() {
toggleText(this.innerHTML.toLowerCase());
});
function toggleText(text) {
$(".text").each(function() {
var totalArray = [' circle', ' square', ' border'];
if ($(this).val().indexOf(text) != -1) {
var regex1 = new RegExp(text, "");
$(this).val($(this).val().replace(regex1, ""));
console.log("After replacing " + $(this).val());
} else {
//console.log( "After replacing " + $(this).val() );
$(this).val($(this).val() + "" + text);
//console.log( "After replacing " + $(this).val() );
}
totalArray.splice(totalArray.indexOf(text), 1);
console.log(totalArray);
var regex2 = new RegExp(totalArray.join("|"), "");
console.log(regex2);
$(this).val($(this).val().replace(regex2, ""));
});
}
$(document).ready(function() {
$("button.cirkel").click(function() {
$(".icon").removeClass("border");
$(".icon").removeClass("square");
$(".icon").toggleClass("circle");
$("button.cirkel").toggleClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").removeClass("on");
});
$("button.vierkant").click(function() {
$(".icon").removeClass("border");
$(".icon").toggleClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").toggleClass("on");
$("button.rand").removeClass("on");
});
$("button.rand").click(function() {
$(".icon").toggleClass("border");
$(".icon").removeClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").toggleClass("on");
});
$("#uitleg-toggle").click(function() {
$("#uitleg").toggleClass("zichtbaar");
});
$("input:text").focus(function() {
$(this).select();
});
});
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
ul {
padding: 0;
margin: 10px 0 0 0;
}
li {
list-style-type: none;
display: block;
left: 0;
margin: 5px 0 5px 0;
postiton: relative;
float: left;
}
button {
width: 100px;
border-radius: 7px;
height: 40px;
font-size: 20px;
border: 0px;
margin: 10px 10px 10px 0;
color: #FFF;
background-color: #D95021;
border: 3px outset #EA6C40;
display: block;
float: left;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #F9794D;
}
.on {
background-color: #5DC55D !important;
color: #FFF !important;
border: 3px outset #6BD46B;
}
.icon {
height: 66px !important;
width: 66px !important;
margin: 0 auto;
font-size: 55px !important;
padding: 10px !important;
text-align: center;
}
input {
border-radius: 10px;
padding: 10px;
border: 1px solid #dedede;
font-size: 16px;
text-transform: uppercase;
}
.circle {
border-radius: 80px !important;
display: block;
border: 3px solid #FF0066;
background-color: #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.circle:hover {
background-color: #FFF;
border: 3px solid #FF0066;
color: #FF0066 !important;
}
.square {
border-radius: 10px !important;
display: block;
background-color: #FF0066;
border: 3px solid #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.square:hover {
background-color: #FFF;
border: 3px solid #FF0066;
background-color: #FFF;
color: #FF0066 !important;
}
.border {
border-radius: 80px !important;
border: 3px solid #FF0066;
display: block;
background-color: #FFF;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FF0066 !important;
}
.border:hover {
background-color: #FF0066 !important;
color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click to add a class to see how it looks with a extra classname.</h3>
<button id="toggle1" class="cirkel">Circle</button>
<button id="toggle2" class="vierkant">Square</button>
<button id="toggle3" class="rand">Border</button>
<div style="clear:both;"></div>
<ul class="glyphs css-mapping">
<li>
<div class="icon lm-home">1</div>
<input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon lm-notes">2</div>
<input id="text" class="text" type="text" readonly="readonly" value="notes">
</li>
<li>
<div class="icon lm-info">3</div>
<input id="text" class="text" type="text" readonly="readonly" value="info">
</li>
<li>
<div class="icon lm-support">4</div>
<input id="text" class="text" type="text" readonly="readonly" value="support">
</li>
<li>
<div class="icon lm-check">5</div>
<input id="text" class="text" type="text" readonly="readonly" value="check">
</li>
<li>
<div class="icon lm-cross">6</div>
<input id="text" class="text" type="text" readonly="readonly" value="cross">
</li>
<li>
<div class="icon lm-min">7</div>
<input id="text" class="text" type="text" readonly="readonly" value="min">
</li>
<li>
<div class="icon lm-full">8</div>
<input id="text" class="text" type="text" readonly="readonly" value="full">
</li>
<li>
<div class="icon lm-menu">9</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu">
</li>
<li>
<div class="icon lm-menu-list">10</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu-list">
</li>
<li>
<div class="icon lm-dots">11</div>
<input id="text" class="text" type="text" readonly="readonly" value="dots">
</li>
<li>
<div class="icon lm-star">12</div>
<input id="text" class="text" type="text" readonly="readonly" value="star">
</li>
<li>
<div class="icon lm-zoom">13</div>
<input id="text" class="text" type="text" readonly="readonly" value="zoom">
</li>
<li>
<div class="icon lm-excl-mark">14</div>
<input id="text" class="text" type="text" readonly="readonly" value="excl-mark">
</li>
<li>
<div class="icon lm-question">15</div>
<input id="text" class="text" type="text" readonly="readonly" value="question">
</li>
<li>
<div class="icon lm-arrow-rd">16</div>
<input id="text" class="text" type="text" readonly="readonly" value="arrow-rd">
</li>
<li>
<div class="icon lm-s-arrow-r">17</div>
<input id="text" class="text" type="text" readonly="readonly" value="s-arrow-r">
</li>
<li>
<div class="icon lm-reset">18</div>
<input id="text" class="text" type="text" readonly="readonly" value="reset">
</li>
</ul>
</div>