I am have made dropdown using bootstarap. I have added onlcick funtions in my anchor tags in dropdown. I just want make my text box readonly if one of the link is clicked on. I have used js to make text boxes read only. Please Help me to solve my problem. Below is my code:
JavaScript
x
107
107
1
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"2
pageEncoding="ISO-8859-1"%>3
<!DOCTYPE html>4
<html>5
<head>6
<!-- Required meta tags -->7
<meta charset="utf-8">8
<meta name="viewport" content="width=device-width, initial-scale=1">9
10
<!-- Bootstrap CSS -->11
<link12
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"13
rel="stylesheet"14
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"15
crossorigin="anonymous">16
17
<title>Mole Calculator | Chemistry Calculator</title>18
19
</head>20
21
22
23
<body>24
25
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">26
27
<div class="container-fluid">28
<a class="navbar-brand" href="#"><h4>29
<b>Chemistry Calculator</b>30
</h4></a>31
32
<button class="navbar-toggler" type="button"33
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"34
aria-controls="navbarSupportedContent" aria-expanded="false"35
aria-label="Toggle navigation">36
<span class="navbar-toggler-icon"></span>37
</button>38
39
<div class="collapse navbar-collapse" id="navbarSupportedContent">40
41
<ul class="navbar-nav text-uppercase">42
43
<li class="nav-item"><a class="nav-link active"44
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>45
46
<li class="nav-item"><a class="nav-link active"47
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>48
49
50
</ul>51
52
</div>53
</div>54
</nav>55
56
<div class="container" style="padding-top: 5%;">57
58
<div class="card px-4 py-5" style="width: 650px;">59
<div class="card-block">60
61
<form action="/Chemistry-Calculator/Number-Of-Moles">62
63
<div class="mb-3">64
<label for="givenMass" class="form-label">Given Mass of65
Substance</label> <input type="text" class="form-control" id="givenMass"66
aria-describedby="emailHelp" name="givenMass"67
value="${givenMass}" style="width: 600px">68
</div>69
<div class="mb-3">70
<label for="molarMass" class="form-label">Molar Mass</label> <input71
type="text" class="form-control" id="molarMass" name="molarMass"72
value="${molarMass}" style="width: 600px">73
</div>74
75
<div class="mb-3">76
<label for="molarMass" class="form-label">Moles</label> <input77
type="text" class="form-control"78
id="molarMass" name="moles" value="${moles}" style="width: 600px">79
</div>80
81
<input class="btn btn-outline-success" type="submit"82
value="Calculate">83
84
<div class="btn-group">85
<button type="button" class="btn btn-success dropdown-toggle"86
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>87
<ul class="dropdown-menu">88
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>89
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>90
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>91
</ul>92
</div>93
94
</form>95
</div>96
</div>97
</div>98
99
<script100
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"101
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"102
crossorigin="anonymous"></script>103
<script type="text/javascript" src="../javascript/script.js"></script>104
105
</body>106
</html>107
My Java Script File:
JavaScript
1
18
18
1
function readonlyForGivenMass() {2
var x = document.getElementById("givenMass").readOnly;3
4
}5
6
function readonlyForMolarMass() {7
var x = document.getElementById("molarMass").readOnly;8
9
}10
11
12
13
function readonlyForMoles() {14
var x = document.getElementById("moles").readOnly;15
16
17
}18
Actually this is small part of java project. Hence I have used jsp and jstl. My file structure:
Advertisement
Answer
you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets
JavaScript
1
126
126
1
<!DOCTYPE html>2
<html>3
<head>4
<!-- Required meta tags -->5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
8
<!-- Bootstrap CSS -->9
<link10
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"11
rel="stylesheet"12
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"13
crossorigin="anonymous">14
15
<title>Mole Calculator | Chemistry Calculator</title>16
17
</head>18
19
20
21
<body>22
23
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">24
25
<div class="container-fluid">26
<a class="navbar-brand" href="#"><h4>27
<b>Chemistry Calculator</b>28
</h4></a>29
30
<button class="navbar-toggler" type="button"31
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"32
aria-controls="navbarSupportedContent" aria-expanded="false"33
aria-label="Toggle navigation">34
<span class="navbar-toggler-icon"></span>35
</button>36
37
<div class="collapse navbar-collapse" id="navbarSupportedContent">38
39
<ul class="navbar-nav text-uppercase">40
41
<li class="nav-item"><a class="nav-link active"42
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>43
44
<li class="nav-item"><a class="nav-link active"45
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>46
47
48
</ul>49
50
</div>51
</div>52
</nav>53
54
<div class="container" style="padding-top: 5%;">55
56
<div class="card px-4 py-5" style="width: 650px;">57
<div class="card-block">58
59
<form action="/Chemistry-Calculator/Number-Of-Moles">60
61
<div class="mb-3">62
<label for="givenMass" class="form-label">Given Mass of63
Substance</label> <input type="text" class="form-control" id="givenMass"64
aria-describedby="emailHelp" name="givenMass"65
value="${givenMass}" style="width: 600px">66
</div>67
<div class="mb-3">68
<label for="molarMass" class="form-label">Molar Mass</label> <input69
type="text" class="form-control" id="molarMass" name="molarMass"70
value="${molarMass}" style="width: 600px">71
</div>72
73
<div class="mb-3">74
<label for="moles" class="form-label">Moles</label> <input type="text" class="form-control" id="moles" name="moles" value="${moles}" style="width: 600px">75
</div>76
77
<input class="btn btn-outline-success" type="submit"78
value="Calculate">79
80
<div class="btn-group">81
<button type="button" class="btn btn-success dropdown-toggle"82
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>83
<ul class="dropdown-menu">84
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>85
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>86
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>87
</ul>88
</div>89
90
</form>91
</div>92
</div>93
</div>94
95
<script96
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"97
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"98
crossorigin="anonymous"></script>99
<script type="text/javascript" src="../javascript/script.js"></script>100
<script>101
function readonlyForGivenMass() {102
document.getElementById("givenMass").readOnly = true;103
document.getElementById("molarMass").readOnly = false;104
document.getElementById("moles").readOnly = false;105
}106
107
function readonlyForMolarMass() { 108
document.getElementById("givenMass").readOnly = false;109
document.getElementById("molarMass").readOnly = true;110
document.getElementById("moles").readOnly = false;111
}112
113
114
function readonlyForMoles() {115
document.getElementById("givenMass").readOnly = false;116
document.getElementById("molarMass").readOnly = false;117
document.getElementById("moles").readOnly = true;118
}119
120
121
122
</script>123
124
</body>125
</html>126