I would just like to know how to display AngularJS in Angular 2+ (I have a very unique situation that requires this)
So far this is what I have tried:
https://stackblitz.com/edit/angular-wbbzbz?file=src/app/app.component.ts
To give you an idea of what is happening on stackblitz:
I have a basic html string (which I got from here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_default):
myHtml = `
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
`;
And through a pipe, I display it using:
<div [innerHTML]="myHtml | pipeSanitizeHtml"></div>
But I end up having this (broken AngularJS):
AngularJS will work if you put this in your Angular 2+ index.html's header:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
I'm trying to create an area in which you can enter text into a text box and display the written text onto a box above in HTML. I'm very new to HTML so any help will be greatly appreciated. I drew a beautiful picture of what I'm trying to make.
The best way to deal with this situation is use Javascript or jQuery which is javascript's library itself. Let me show you how you should do it in jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#form-to-be-submitted").click(function(){
$(".whatever-styling-you-want").html($("#textBox").val());
});
});
</script>
<div class="whatever-styling-you-want">
</div>
<!-- Your text box and submit button -->
<div>
<input type="text" id="textBox" placeholder="Please input your text here..."/>
<input id="form-to-be-submitted" value="submit" type="button"/>
</div>
Javascript's way is also the same. No need to use the click function but use javascript's on function with the 'click' event.
I hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<p id="x"></p><br>
<input id="value"><input type="button" value="submit" onClick="getV()">
<script>
function getV(){document.getElementById("x").innerHTML = document.getElementById("value").value;}
</script>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I did that but it doesn't work. What's the right thing to do?
Here is my jsFiddle example. this works fine:
<textarea name='awesome'>Default value</textarea>
You can use placeholder Attribute, which doesn't add a default value but might be what you are looking out for :
<textarea placeholder="this text will show in the textarea"></textarea>
Check it out here - http://jsfiddle.net/8DzCE/949/
Important Note ( As suggested by Jon Brave in the comments ) :
Placeholder Attribute does not set the value of a textarea. Rather "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value" [and it disappears as soon as user clicks into the textarea]. It will never act as "the default value" for the control. If you want that, you must put the desired text inside the Here is the actual default value, as per other answers here
If you want to bring information from a database into a textarea tag for editing:
The input tag not to display data that occupy several lines: rows no work, tag input is one line.
<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->
The textarea tag has no value, but work fine with handlebars
<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>
Just in case if you are using Angular.js in your project (as I am) and have a ng-model set for your <textarea>, setting the default just inside like:
<textarea ng-model='foo'>Some default value</textarea>
...will not work!
You need to set the default value to the textarea's ng-model in the respective controller or use ng-init.
Example 1 (using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
// your controller implementation here
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
</div>
</body>
</html>
Example 2 (without using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
$scope.foo = 'Some default value';
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-model='foo'></textarea>
</div>
</body>
</html>
A few notes and clarifications:
placeholder='' inserts your text, but it is greyed out (in a tool-tip style format) and the moment the field is clicked, your text is replaced by an empty text field.
value='' is not a <textarea> attribute, and only works for <input> tags, ie, <input type='text'>, etc. I don't know why the creators of HTML5 decided not to incorporate that, but that's the way it is for now.
The best method for inserting text into <textarea> elements has been outlined correctly here as: <textarea> Desired text to be inserted into the field upon page load </textarea> When the user clicks the field, they can edit the
text and it remains in the field (unlike placeholder='').
Note: If you insert text between the <textarea> and </textarea> tags, you cannot use placeholder='' as it will be overwritten by your inserted text.
Also, this worked very well for me:
<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>
In this case, $_POST['encode'] came from this:
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
The PHP code was inserted between the and tags.
Placeholder cannot set the default value for text area. You can use
<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>
This is the tag if you are using it for database connection. You may use different syntax if you are using other languages than php.For php :
e.g.:
<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>
required command minimizes efforts needed to check empty fields using php.
You can use this.innerHTML.
<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>
When text area is focused, it basically makes the innerHTML of the textarea an empty string.
Please note that if you made changes to textarea, after it had rendered; You will get the updated value instead of the initialized value.
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#btnShow').click(function () {
alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
});
});
function updateAddress() {
$('#addressFieldName').val('District: Peshawar \n');
}
</script>
</head>
<body>
<?php
$address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
?>
<textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
<?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
<input type="button" id="btnShow" value='show' />
</body>
</html>
As you can see the value of textarea will be different than the text in between the opening and closing tag of concern textarea.
You can also add the "value" attribute and set that so something like so:
<textarea value="your value"> </textarea>
Hey So I have a project for school where I have to create a website and in the website there has to be a quiz. The questions are asking for numbers as answers, so I cannot use radio buttons. I know how to make textboxes and submit buttons but I dont think the box is getting the information, so I was wondering if someone could help me fix my code
Here is the end of what I have
*This is not the question I am asking this is just so I can get the code working
<P><INPUT TYPE=SUBMIT VALUE="Submit"> </FORM>
<SCRIPT type=text/javascript>
</FORM>function getAnswer(input) { if (input == "3.14") {alert ("Congradulations")} else {alert ("No that's incorrect, please try again...")}
}
</SCRIPT>
You surely haven't given us the complete code we need to answer your question, but here's all the wrong things I can see in your code snippet fixed.
The most obvious wrong thing was the text </FORM> placed inside your <script> tag.
I also fixed your misspelling Congradulations, because I imagine that wouldn't go down too well :)
<p><input type="submit" value="Submit" /></p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (input == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
If this isn't helpful, please show us more of your file.
#Olivia try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="getAnswer();"
<p>
<label for="textfield"></label>
Q. What is the value of Pi to 2 decimal places?</p>
<p>Answer
<input type="text" name="textfield1" id="textfield1" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (document.form1.textfield1.value == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
</body>
</html>
In form submit I give an action to call the function.
onsubmit="getAnswer();"
Inside the function I am getting the value as
document.form1.textfield1.value
Then simple steps.
Cheers