I've written the following code, which enables a textbox when the checkbox is checked. The code is working with a small defect. For the first time when we execute, the textbox is enabled irrespective of the checkbox is checked or unchecked. But after a couple of times, the code is working correctly. Please help me to find the bug.
<html>
<head>
<title>SHOP ALL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" src="addcart.js"></script>
<script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
document.getElementById(textBoxID).disabled = !bEnable
}
</script>
</head>
<body>
<form>
<table align="center" width="100%" cellpadding="50px">
<tr>
<th> TICK ON THE THINGS YOU NEED </th>
<th> PRODUCT </th>
<th> DESCRIPTION </th>
<th> NO OF ITEMS </th>
</tr>
<tr>
<td><input type="checkbox" name="shoe" onclick="enableDisable(this.checked, '0')"></td>
<td><img src="images/1.jpg" alt="shoe1" width="180px" height="200px"></td>
<td><h4>-------</h4></td>
</tr>
--------------
</body>
</html`>
You should put your code:
<script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
document.getElementById(textBoxID).disabled = !bEnable
}
</script>
before closing the body, or to be invoked on DOM ready. In this way the code is being executed before even the checkbox and the text field exists.
By default the text input is enabled so you may need also to set the checkbox as checked.
Here is a working version:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<input type="text" id="txtBox" />
<input type="checkbox" id="chkbox" onchange="document.getElementById('txtBox').disabled=!this.checked;" checked="checked" />
</body>
</html>
And a demo: http://jsbin.com/ulemim/2
Related
I'm a vue.js beginner, so I need help.
I write an HTML page which show a list of object in a simple table.
The table is made by a script which get a JSON object from a servlet and shows it using a v-for directive.
In each row of the table, there is a button that the user can click to book the object wrote in the corresponding row, using a form.
The problem is that I don't know how to get the object's information correspondent to the clicked line to put it in the form's fields.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repetition - catalog</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<header><h1>REPETITIONS.com</h1></header>
<div id="app" class="float-container" style="height: 80%">
<table class="catalog-table">
<thead>
<tr>
<th style="width: 200px">Corso</th>
<th style="width: 250px">Docente</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="rep in reps">
<td>{{rep.teacherName}} {{rep.teacherSurName}}</td>
<td>{{rep.course}}</td>
<td>
<form action="/Repetition/controller/ServletController" method="post" id="i">
<input type="hidden" name="operation" value="booking">
<input type="hidden" name="id_t" value="rep.getId_teac"> <---set the value of the current row
<input type="hidden" name="id_c" value="rep.getId_cor"> <---set the value of the current row
<button type="submit">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<footer>xxxxxxx</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
repetitions: [],
link: '/Repetition/ServletController?operation=catalog&device=x'
},
mounted(){
this.getRepetitions()
},
methods:{
getRepetitions: function(){
var self = this;
$.get(this.link, function(data) {
self.repetitions = data;
});
}
}
});
</script>
</body>
</html>
Alternatively the form request could be manage with another script, but there would be the same problem.
I want to use this code from Codepen. So, I right clicked on the result frame and chose View Frame source. Then I copied the source code and pasted it in my own text-editor.
But my webpage shows the codepart as blank.
I copied the source starting from <style> till </body> and inserted in my component.
When using the ZIP instead, I don't know how to use the code, because I just have a component and the ZIP contains a script.js and a style.css
What am I doing wrong?
Ok here's copy-and-pasting for dummies:
This is the html part:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table class="dayparts table">
<thead>
<tr>
<td class="cell-label presets-label"></td>
<td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
<select v-model="selected" #change='clearAll();selectedFunc()'>
<option value="">Select a Preset</option>
<option value="0">None</option>
<option value="1">Afternoons</option>
<option value="2">Evenings</option>
<option value="3">Mornings</option>
<option value="4">Weekdays</option>
<option value="5">Weekends</option>
<option value="6">Weekends including Friday</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td class="cell-label am-label" colspan="12">AM</td>
<td class="cell-label pm-label" colspan="12">PM</td>
</tr>
<tr class="hour-row">
<td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
</td>
</tr>
</thead>
<tbody #mousedown='mouseDown' #mouseup='mouseUp' #mousemove='mouseMove'>
<tr class="day" v-for="day in days">
<td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
v-on:click='activateDay'>{{day.dayName}}</td>
<td class='dayparts-cell' v-bind:value="hour.hour" data='day'
v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This is the "head":
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
1) Remove <link rel="stylesheet" href="style.css"> and add <style></style> in the same place. Fill it with the content of the css-part.
2) Replace "vue.js" in <script src="vue.js"></script> with "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" when you're in development or with "https://cdn.jsdelivr.net/npm/vue#2.6.11" for production.
Then go to the bottom of your html-code and find <script src="main.js"></script>. Remove it and add an empty <script></script> instead. Fill it with the copied Javascript part.
Now your page should run properly.
Tip: Do not use Ctrl + A in Codepen to select everything since it selects a few extra words then.
I have a test code block through which I am trying to display a table based on a checkbox selection. The action is working and the table is being displayed. The only problem is - there are no borders. Could you please give me suggestions on what I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<tr>
<td style=min-width:50px></td>
<td style=min-width:50px>Retrofit</td>
<td style=min-width:50px><input style=min-width:50px id="retrofit" name="retrofit" type="checkbox" value="1" onchange="javascript:toggleOtherTextboxVisible()" /></td>
</tr>
</table>
<table style="display:none" name="table" id ='table' border="1"/>
<th>new</th>
<th>newer</th>
</table>
</body>
<script type="text/javascript">
function toggleOtherTextboxVisible()
{
var check = document.getElementById('retrofit');
if (check.checked) {
document.getElementById('table').style.display. = 'block';
}
else
{
document.getElementById('table').style.display = 'none';
}
}
</script>
</html>
The first error I can see is that a table doesn't have a display value of "block" but "table".
Therefore, simply change this line :
document.getElementById('table').style.display. = 'block';
To :
document.getElementById('table').style.display. = 'table';
I need to add +1 to the total number of tweets when a new tweet (text input) is submitted:
Here is my HTML:
<!DOCTYPE html>
<html lang="en" data-ng-app="Twitter">
<head>
<meta charset="UTF-8">
<title>Twitter Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="profileArea">
<img id="profile" src="http://potdeli.webs.com/twitter.png" alt="tweet">
<p style="color:white;"><strong>Tweeto</strong></p>
<p>#TweetoTwiteech</p>
<table style="width:100%">
<tr>
<th>Tweets</th>
<th colspan="1">Following</th>
<th colspan="1">Followers</th>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="tweets" ng-app="" ng-controller="TweetsController">
<form method="POST" action="" ng-submit="addTweet()">
<h2>Compose new tweet</h2>
<input name="tweet" type="text" ng-model="newTweet" ng-maxlength="140" placeholder="What's happening?">
<button type="submit" value="addTweets">Tweet!</button>
</form>
<div class="tweetDisplay" ng-repeat="tweet in tweets track by $index">{{ tweet }}
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js">
</script>
<script src="tweets.js">
</script>
</body>
</html>
And here is the JavaScript:
function TweetsController($scope) {
$scope.tweets = ["First sample tweet", "Second sample tweet"];
$scope.addTweet = function() {
if(this.newTweet) {
$scope.tweets.push($scope.newTweet);
$scope.newTweet = "";
}
};
}
I tried a couple of things but I didn't get the desired result, also I checked out a few similar Stack Overflow questions but I wasn't able to get it figured out.
Oh man, I can't believe what a half-wit I am! I just added:
<td>{{ tweets.length }}</td>
Instead of number 2, as the number of tweets and placed this on the body:
<body ng-app="" ng-controller="TweetsController">
Thanks to all for pointing me in the right direction!!
Your table markup is outside of your controller scope. Make it part of your controller scope, and then you could print a counter value there, such as $scope.tweets.length
Consider:
File script.js,
function AdaugaComboBox(id, name){
var select_tag = document.getElementById(id);
select_tag.innerHTML += "<select name='"+name+"'><option value='0'>Selecteaza autor</option></select><br/>";
return true;
}
and file index.html:
<html>
<head>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button"
value="Adauga autor"
onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
The scope of the function is to add a combo box to the specific TD in the TABLE. But when I press the button this error appears:
AdaugaComboBox is not defined
Why?
Update:
!!! I've fixed it. The problem was with another function.
If the script is included in your HTML, then it's possible that you don't have the path correct based on the location of the HTML file. Check with Firefox/Firebug to make sure that the JS file is being downloaded correctly.
Your HTML should be:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button" value="Adauga autor" onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
You have to put a reference to the script.js file.
<script type="text/javascript" src="script.js"></script>