Form textbox content with javascript - javascript

I would like to know if there is better way to this exercice.
Here it is : Create a form that contain a textbox ;after the user enter the text ,all the letters will be converted to lowercase as soon as he or she clicks elsewhere in the form( hint: use change onChange event handler).
I have written this code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body>
<form>
Username : <input type="text" id="username"><br>
<input type="submit" value="button">
</form>
<script type="text/javascript">
var username = document.getElementById("username");
username.onchange = function(){
username.value = username.value.toLowerCase();
};
</script>
</body>
</html>
Basically i'm replacing the content of the textbox by the formatted

Might be too easy, but setting the text over a style to lowercase transform doesn't allow uppercase :)
function toLower(element) {
if (element && element.value) {
element.value = element.value.toLowerCase();
var target = document.getElementById('realvalue');
target.innerHTML = element.value;
}
}
<input type="text" onblur="toLower(this)" />
<div id="realvalue"></div>

But, if all the letters will be converted to lowercase as soon as he or she clicks elsewhere in the form, your code work correctly...
http://jsfiddle.net/b6xwde62/
<form>
Username : <input type="text" id="username"><br>
<input type="submit" value="button">
</form>
<script type="text/javascript">
var username = document.getElementById("username");
username.onchange = function(){
username.value = username.value.toLowerCase();
};
</script>

Related

form to check if names match display display alert message saying whether they match or the dont match. if statment used to check the values if same

Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.
function nameCheck(){
let fname = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 = = fname2){
alert("The names match ");
} else if{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="submit" onclick()= "nameCheck()" name = "submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Where to begin...
there is no onclick()="" attribute for elements, it's onclick=""
you have a space between = =
there is no fname1 variable defined
you don't have a condition after else if
if you are using alert() just for your own debugging purpose, use console.log() instead, it will save you time in a long run.
Here is the fixed code:
function nameCheck(){
let fname1 = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 === fname2){
alert("The names match ");
} else{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="reset" value="Reset">
<input type="submit" onclick= "nameCheck()" name = "submit" value = "Submit">
</div>
</form>
</body>
</html>
Variables
So first, in the if(fname1 = = fname2), and the variable creation, fname and fname1 do not match. Change either one so it matches the other.
if() stuff
This is the equality sign: === and you did = =. The space has to be a equal sign.
Also, the else if() is only when you want multiple if()s. else should be used for this program.
HTML Attribute
The onclick() should be onclick.

How do I trigger a JavaScript function when a button is pressed in HTML code

I am trying to create a calculator that solves the Pythagoras theorem. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
add a span after the button to contain the final result:
<span id="final-result"></span>
add an onclick event to your button, it might look like this:
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function :
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior. Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.
and here is the code what you are trying to make
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="formOne">
<input type="number" required placeholder="1st legnth" id="first">
<br> <br>
<input type="number" required placeholder="2nd legnth" id="second">
<br> <br>
<button type="submit">Give me the answer</button>
</form>
</body>
<script>
let form = document.querySelector("#formOne");
let inputOne = document.querySelector("#first");
let inputTwo = document.querySelector("#second");
form.addEventListener("submit", function(e){
e.preventDefault();
console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
})
</script>
</html>
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
You can try like this:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="form">
<input type="text" id="first_length" name="first_length" />
<input type="text" id="second_length" name="second_length" />
<input type="submit" value="Submit" />
</form>
<script>
function logSubmit(event) {
event.preventDefault();
var first_length = document.getElementById("first_length").value;
var second_length = document.getElementById("second_length").value;
var final = solveforHyp(first_length, second_length);
console.log(final);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);
function solveforHyp(a, b) {
var c = a * a + b * b;
return Math.sqrt(c);
}
</script>
</body>
</html>

html5 required attribute custom validation message not working

I have a simple form with two inputs and a submit button. I need to display the message depending on the lang attribute. When I click on submit button it displays the message even though the field is filled with valid data.
<!DOCTYPE html5>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get">
<input type="text" value="" oninvalid="check(event)" required/>
<input type="text" value="" oninvalid="check(event)" required/>
<input type="submit" value="Save">
</form>
<script type="text/javascript">
function check(e) {
var a=document.documentElement.lang;
var validateMsg=(a=="ar"?"In arabic":"Plz enter on Alphabets");
var input = e.target;
if(input.validity.valid){
return true;
}else{
input.setCustomValidity(validateMsg);
return false;
}
}
</script>
</body>
</html>
check(event) is meaningless. The event parameter is passed internally
checking validity inside the oninvalid handler is useless
If you use only oninvalid, you won't be able to change back the validation message once the user starts filling the field. You should use the change, keyup or keydown event for that, depending on the reactivity you want.
This could work:
<input type="text" value="" onchange="check" required />
// ...
function check(e) {
var input = e.target;
var msg = "";
if(!input.validity.valid) {
var a=document.documentElement.lang;
msg=(a=="ar"?"In arabic":"Plz enter on Alphabets");
}
input.setCustomValidity(msg);
}

JavaScript & DOM Logic Appears Correct but Won't Run Right

All I want to do is disable the button if there's no content in ftemp. If there is, I want the button to enable and check if it is numeric. Then I can send the ftemp to the next page. My html :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function content()
{
var ftemp = document.getElementById("ftemp");
if (ftemp.value=="")
{
var convert = document.getElementById("convert").disabled=true;
document.getElementById("error").innerHTML = "";
}
else
{
isNumeric()
}
}
function isNumeric()
{
var ftemp = document.getElementById("ftemp");
if (isNaN(ftemp))
{
var convert = document.getElementById("convert").disabled=true;
document.getElementById("error").innerHTML = "Enter only numbers";
}
else
{
var convert = document.getElementById("convert").disabled=false;
document.getElementById("error").innerHTML = "";
}
}
</script>
</head>
<body onload="content()">
<form method="get" action="celsius">
<p>
<label>
Enter a temperature in Fahrenheit:
</label>
</p>
<p>
<input required id="ftemp" title="Enter only numbers!" size="3"
maxlength="3" onkeyup="content()"/>
<button id="convert" name="convert">Convert to Celsius</button>
</p>
<p id="error" name="error">
</p>
</form>
</body>
</html>
Inside isNumeric():
You are checking: isNaN(ftemp) where ftemp is a DOM element so it cannot be a number. Change to isNaN(parseInt(ftemp.value, 10)).
You have error here:
if (isNaN(ftemp))
Change it to:
if (isNaN(ftemp.value))
The ftemp is a DOM Object. You need to pass the value here.
Fiddle: http://jsbin.com/ocibuc/2

Javascript output text based on input value

I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>

Categories