How can I change this script so that a user has to click a button at the end to make all form text entries change to capitals? I know that I need to use the onclick function, but I am just not sure where or how to enter it.
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
</body>
</html>
Something like this would work:
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<div>
<button id="clickme" onclick="capInputs();">Capitalize Inputs</button>
</div>
<script>
function capInputs() {
var elements = document.querySelectorAll("input[type=text]")
for (var i = 0, element; element = elements[i++];) {
element.value = (element.value).toUpperCase();
}
}
</script>
</body>
</html>
See this :D
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
var x = document.getElementById("myBtn").innerHTML;
document.getElementById("myBtn").innerHTML =x.toUpperCase() ;
}
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
</body>
</html>
You don't need to force the user to click a button at the end to change their text to uppercase. You can do this authomatically using JavaScript.
It looks like you've figured out that using CSS won't change the value of your inputs to uppercase, only change the appearance on the screen (and on my browser, text-transform doesn't even seem to work on the input element). Instead, you should attach event listeners to your the input event (which is fired every time input text is edited) inside a <script>...</script> tag (which should be inserted just before the closing </body> tag.
document.querySelectorAll('input').forEach(function(e) {
if (e.type === 'text') {
e.addEventListener('input', valueToUpperCase)
}
})
function valueToUpperCase(e) {
(e = e.target).value = e.value.toUpperCase()
}
<label>
Type your name here:
<input type="text" name="nameInput" />
</label>
<br/>
<label>
Type your street address here:
<input type="text" name="addressInput" />
</label>
<br/>
<label>
Type your city and state here:
<input type="text" name="stateInput" />
</label>
I am assuming (based on your css rule) that you want to capitalize the input text entries once the user press a button. If you want to change all text into upper case (i.e. all capital letters, not just the first one), then uppercase should be used in the css instead of capitalize.
#Amber Ollis, your code applies the CSS rule for capitalize to all input text elements from the beginning. The rule should only apply once pressed the button if that is the effect you want (I have added such button which is missing in your code).
See code below (working):
<html>
<head>
<title>Information Form</title>
<style>
.capitalized {
text-transform: capitalize;
}
</style>
<script>
function capitalize() {
var inputs = document.querySelectorAll("input[type=text]");
for (i in inputs) {
inputs[i].className = "capitalized";
}
}
</script>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<input type="button" onclick="capitalize();" value="Capitalize all" />
</body>
</html>
Related
I'm trying to auto-fill text boxes 1 to 3 with the main text box content so that whatever is typed into the text box "Title" will also appear in the text boxes
Input1, Input2 and Input3. Here is what I have, but I get an error.
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
document.getElementById("CopyText").value=Title
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" name ="Input1" id="CopyText"/><br />
Input 2:<input type="text" name ="Input2" id="CopyText"/><br />
Input 3:<input type="text" name ="Input3" id="CopyText"/><br />
</body>
</html>
try this out:
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
var inputs = document.querySelectorAll(".input");
for(var i=0;i < inputs.length;i++)
{
inputs[i].value = a;
}
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" class="input" name ="Input1" /><br />
Input 2:<input type="text" class="input" name ="Input2" /><br />
Input 3:<input type="text" class="input" name ="Input3" /><br />
</body>
</html>
remarks:
do not use same id for multiple elements. try class instead
you use 'Title' which is not defined, use "a", that was where you stored the input's value
to get many elements at once with simple js, good method is to use "querySelectorAll" with the proper selector.
good luck.
I guess you cannot assign the same id tag to more than one TextBox, so you must end up with a more "hard-coded" javascript function. Moreover, I would use Title.value and not only Title
function CopyData(){
document.getElementById("CopyText1").value=Title.value;
document.getElementById("CopyText2").value=Title.value;
document.getElementById("CopyText3").value=Title.value;
}
This question already has answers here:
How do I change Background color of textbox when onfocus?
(5 answers)
Closed 9 years ago.
I want to set yellow background of text field, when it gets focus (only with JavaScript).
I tried
txt.style.backgroundcolor = 'yellow';
and
txt.style = 'background-color: yellow';
and
txt.class = 'yellow';
but none of them works.
Here is the code:
<html>
<head>
<script language="JavaScript" src="form.js" type="text/javascript"></script>
<style>
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<input type='text' size='15' name='txta' Id='txta'
onfocus='txt_onfocus(this)' onchange='txt_onchange(this)'></input>
<br>
<input type='text' size='15' name='txtb' Id='txtb'
onfocus='txt_onfocus(this)' onchange='txt_onchange(this)'></input>
<br>
<Span id='span1'><span>
</body>
</html>
JS:
function txt_onchange(txt) {
document.getElementById('span1').innerHTML = txt.value;
}
function txt_onfocus(txt) {
txt.style.backgroundcolor = yellow;
}
There is a nice way in css. You can use css focus Link
<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<p>Click inside the text fields to see a yellow background:</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
try this
function txt_onfocus(txt) {
txt.style.background = "yellow";
}
Reference
You've got a few mistakes with your syntax but this should work:
http://jsfiddle.net/chrissp26/2Xgfr/124/
JavaScript:
function txt_onfocus(txt) {
txt.style.backgroundColor = "yellow";
}
function txt_onchange(txt)
{
document.getElementById('span1').innerHTML=txt.value;
}
HTML
<input type="text" size="15" name="txta" Id="txta" onfocus="txt_onfocus(this);" onchange="txt_onchange(this)"/>
<br> <Span id='span1'><span>
Background colour in Javascript is written "backgroundColor", also try using hex instead of colour names. yellow is #FFFF00 or, where two characters are the same, #FF0 in this case.
I have also added a GO button to your HTML to force a blur. By clicking on it you exit the input box and fire the onchange event.
<script type="text/javascript">
function txt_onchange(obj) { document.getElementById('span1').innerHTML = obj.value; }
function txt_onfocus(obj){ obj.style.backgroundColor = "#FF0"; }
</script>
<HTML>
<div id="wrap">
<input type="text" size="15" name="txta" Id="txta" onfocus="txt_onfocus(this)" onchange="txt_onchange(this)"></input>
<input type="button" size="10" name="B1" value="Go"> <br>
<input type="text" size="15" name="txtb" Id="txtb" onfocus="txt_onfocus(this)" onchange="txt_onchange(this)"></input>
You entered: nothing
function txt_onfocus(txt){txt.style.backgroundColor='yellow';}
All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here
I've seen all the posts but my problem isn't that it doesn't change the background color but rather that it does and the change it but to the original. Here's the code.
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
<script type="text/javascript">
function calc(color){
//document.body.bgColor = color;
x=document.myForm
var val1=x.input1.value;
var val2=x.input2.value;
var val3=val1+"+"+val2;
if(eval(val3)<0) return;
else{
alert("The result is "+eval(val3));
var bd = document.getElementById ('body');
bd.className="highlight";
return;
}
}
</script>
</head>
<body id="body" onload="changeBackground(red)">
<form name="myForm" onsubmit="calc(this)">
Enter 2 values to add ;)
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" value="Send Input">
</form>
</body>
</html>
CSS:
.hightlight{
background-color: yellow;
}
I understand that the function ends right before the end of the function. So how can I get it to hold the color?
The problem is that you tries to POST page over submit button. In this case page is fully redrawn, without keeping previous state that is set by your script.
Just change code of button:
<input type="button" value="Send Input" onclick="calc(this)">
Suppose I have the following HTML code, how can I pass the user's input to execute(str) JavaScript function as an argument?
<body>
<input name="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(//send the user's input in textbox1 to this function//)" type="button" value="Execute" />
</body>
You could either access the element’s value by its name:
document.getElementsByName("textbox1"); // returns a list of elements with name="textbox1"
document.getElementsByName("textbox1")[0] // returns the first element in DOM with name="textbox1"
So:
<input name="buttonExecute" onclick="execute(document.getElementsByName('textbox1')[0].value)" type="button" value="Execute" />
Or you assign an ID to the element that then identifies it and you can access it with getElementById:
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" />
As opposed to passing the text as a variable, you can use the DOM to retrieve the data in your function:
var text = document.getElementsByName("textbox1").value;
You could just get the input value in the onclick-event like so:
onclick="execute(document.getElementById('textbox1').value);"
You would of course have to add an id to your textbox
This is what I have done. (Adapt from all of your answers)
<input name="textbox1" type="text" id="txt1"/>
<input name="buttonExecute" onclick="execute(document.getElementById('txt1').value)" type="button" value="Execute" />
It works. Thanks to all of you. :)
if I have understood correct the question :
<!DOCTYPE HTML>
<HEAD>
<TITLE>Passing values</TITLE>
<style>
</style>
</HEAD>
Give a number :<input type="number" id="num"><br>
<button onclick="MyFunction(num.value)">Press button...</button>
<script>
function MyFunction(num) {
document.write("<h1>You gave "+num+"</h1>");
}
</script>
</BODY>
</HTML>
document.getElementById('textbox1').value
You can get textbox value and Id by the following simple example in dotNet programming
<html>
<head>
<script type="text/javascript">
function GetTextboxId_Value(textBox)
{
alert(textBox.value); // To get Text Box Value(Text)
alert(textBox.id); // To get Text Box Id like txtSearch
}
</script>
</head>
<body>
<input id="txtSearch" type="text" onkeyup="GetTextboxId_Value(this)" /> </body>
</html>