I'm trying to test a very basic javascript function that will only remove an attribute from an input. In this case, i want the placeholder attribute to be removed, and this is not working:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function buttonClicked() {
document.getElementById("textBox").removeAttribute('placeholder');
}
</script>
</head>
<body>
<div id="commentBox">
<input type="textarea" rows="4" cols="50">
</div>
<div id="textBox">
<input type="text" placeholder="Write">
</div>
<div id="shoutButton">
<input type="button" value="Shout!" onclick="buttonClicked();">
</div>
</body>
</html>
In the provided code "textBox" is the id of the div element which wraps your input. You need to get the input instead. Try setting the id of the input as well:
<div id="textBox">
<input id="input" type="text" placeholder="Write">
</div>
Then update your buttonClicked function to use the input's id:
function buttonClicked() {
document.getElementById("input").removeAttribute('placeholder');
}
Related
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<title>Make Page</title>
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
</body>
</html>
I did this, but it didn't work. So I tried another way
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
Changed to
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
I still can't look at it. What am I doing wrong?
Is it because Javascript is not used in Timeleaf? Then, is it impossible to use ckeditor?
According to the documentation, you need a <script> tag to load the libary and a bit of JavaScript to setup. So your example should be something like this:
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head>
<title>Make Page</title>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
</head>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#content' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
I want my entered text to appear in the Bubble. How do I have to change my code to make it work?
My HTML Code is this One:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('Chat_Bubble').value.innerHTML=document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
You don't need to both set myForm.innerHTML and Chat_Bubble.innerHTML. You can use:
document.getElementById('myForm').children[0].innerHTML = (...), or
document.getElementsByClassName('Chat_Bubble').innerHTML = (...). You need to get the element using the class name, because the div has a class, not an id.
Also, it's good practice to use textContent instead of innerHTML. This way you're sure that the element submitted is seen as text by the browser. Using innerHTML anyway can break your page. I changed this in the code below.
For example, you should try submitting <b> (nothing is drawn on the screen).
The following code works:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick=" document.getElementsByClassName('Chat_Bubble')[0].textContent = document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
I want to display the value in the input text field using ng-bind directive.Can someone help me with this?
<div class="col-md-3">
<input class="form-control" disabled="disabled" value="ng-bind="type"">
</div>
Controller:
$scope.type = $scope.name[0].type_of_request;
I am trying to print this type in html page.I am not able to achieve that.Would someone help
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$scope.type = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
ng-model works to be fine here, use it:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
Or Use ng-value="type"
Check the below example:
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>Hi <input type="text" value="{{name}}" /></p>
<p>Ahoy <input type="text" ng-value="name" /></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Use ng-model instead
If you need one way binding then
<input class="form-control" disabled="disabled" ng-model="::type">
else if you need two way binding
<input class="form-control" disabled="disabled" ng-model="type">
I just want that when I press Submit button to get me to the <div id="Home> where the other code will be.
This is my work:
<!DOCTYPE html>
<head>
<title>MyWebsite</title>
</head>
<body>
<div id="Start" align="center">
<h1 style="color:red">My</style><span style="color:blue">Website</span></h1>
<hr/>
Name:<br/>
<input type="text" name="username"><br/>
Password:<br/>
<input type="password" name="password"><br/><br/>
<form action="Home">
<input type="submit" name="continue" value="Continue">
</form>
</div>
<div id="Home" align="center">
<p>Hello world!</p>
</div>
</body>
You need some PHP (or other server side language) between your form and the div below it. Otherwise you're just refreshing the page when you hit submit.
You could also use javascript/jQuery.
Try doing one or both of the above and then come back for help if you have trouble.
I am trying to place a glyphicon inside a input form using placeholder via bootstrap.
but the result is its displaying the code in input form instead icon.
here's my code:
<input type="text" class="form-control" placeholder="<span class='glyphicon glyphicon-search'></span>search">
output:
Displaying as
<span class="glyphicon glyphicon-search">search
inside a input form.
sorry for unclear question
It should be actually when i click over the input form and enter some text the glyphicon should go hidden as we place in a placeholder.
Thanks in advance.
try like this
<!DOCTYPE html>
<html>
<title>Timer</title>
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
jQuery(function(){
$('#exampleInputAmount').blur(function(){
var textValue = $(this).val(); // GETTING TEXT BOX VALUE
if(textValue != '') {
$('.glyphicon-search').parent().hide(); // HIDDING DIV IF TEXT BOX IF NOT EMPTY
} else {
$('.glyphicon-search').parent().show(); // SHOWING DIV IF TEXT BOX IF EMPTY
}
});
});
</script>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></div>
</div>
</div>
</form>
</body>
</html>
Further, you can refer below URL, which gives syntax and format for many bootstap related issues.
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-lists.php