I am designing a simple calculator, which has 3 inputs and one output.
I wonder if it's possible to change the formula the output element "uses", based on which input-fields are used (*).
For example, we have tree inputs: Input A, Input B and Input C
If A and B are used (and C is empty), then the formula for Output should be "A+B"
If A and C are used (and B is empty), then the formula for Output should be "A*C"
If B and C are used (and A is empty), then the formula for Output should be "B/C"
So, how can I change the formula used for the output element, based on the used inputs?
This is a simplified example, I hope you get the point :-)
As requested, here's some example code
[code]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<script>
function Test(){
<!--alert('Formula change!');-->
if (input_a.valueAsNumber && input_b.valueAsNumber){
alert('Formula One');
o.value=input_a.valueAsNumber+input_b.valueAsNumber;
}
if (input_b.value && input_c.value){
alert('Formula Two');
o.value=input_a.valueAsNumber*input_c.valueAsNumber;
}
if (input_a.value && input_c.value){
alert('Formula Three');
o.value=input_b.valueAsNumber/input_c.valueAsNumber;
}
}
</script>
<style>
</style>
<title>Example</title>
</head>
<body onload="">
<form onsubmit="return false" oninput="
Test();
<!--o.value=input_a.valueAsNumber+input_b.valueAsNumber;-->
">
<input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
<input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
<input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
</br>
<output name="o" for="a b c"></output>
</form>
</body>
[/code]
(*) Another possibility might be to have multiple outputs, but hide the ones which are not relevant (based on the inputs)...but how would I do that?
I got it to work, by using the Eval-function
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<script>
function SelectFormula(){
if (input_a.valueAsNumber && input_b.valueAsNumber){
return "input_a.valueAsNumber+input_b.valueAsNumber";
} else if (input_b.value && input_c.value){
return "input_b.valueAsNumber*input_c.valueAsNumber";
} else if (input_a.value && input_c.value){
return "input_a.valueAsNumber/input_c.valueAsNumber";
}
}
</script>
<style>
</style>
<title>Example</title>
</head>
<body onload="">
<form onsubmit="return false" oninput="
o.value=eval(SelectFormula());
">
Input A: <input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
Input B: <input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
Input C: <input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
</br>
Output: <output name="o" for="a b c"></output>
</form>
</body>
I rather not use the Eval-function, but setting o.value=... directly in the function does not work :-(
Related
Why won't this code just take the input value and console.log() it?
The updated code reads.
!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="index.html" method="get">
<h1>thank you</h1>
<a href="index.html">
<button>Home</button>
</a>
<br>
<br>
<a href="https://github.com/shanegibney/link-two-pages">
<button>Back to repositoryy</button>
</a>
<br>
<br>
<form>
<input type="number" id="Idkey" value="5" min="0" max="10">
<button type="submit">submit</button>
</form>
</body>{
<script>
let Idkey = document.getElementById(Idkey).value;
console.log(Idkey);
</script>
</html>
The submit button is not rendering at all.
The error I get is,
settings.html:26 Uncaught TypeError: Cannot read properties of null (reading 'value')
The script will only read the initial value in the input field (it will always log 5).
You need to tell the script to read the input value each time the submit button is clicked by adding the oninput attribute, like this:
<form>
<input type="number" value="5" id="Idkey" oninput="myfunction()" />
</form>
<script>
function myfunction() {
let val = document.getElementById("Idkey").value;
console.log(val);
}
</script>
I have the following simple HTML code and want to add a condition, like if fname <> a then display a
comment "Wrong first name". I have the following code and am unsure where to put the conditional
code. Please help as I am new to HTML!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" `enter code
here`"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<body>
<!DOCTYPE html>
<h2>HTML Forms</h2>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
If fname <> a Then //This is where I go wrong!
alert("Condition met")
end If
</body>
</html>
You can try below code.
<form action="" onsubmit="myFunction()">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function myFunction(){
var fname = document.getElementById("fname").value;
if(fname == '<>')
alert("Condition met")
}
</script>
HTML Inputs have some basic validation that you can implement with their input attributes, like the maxlength, minlength, size, or the pattern attribute that takes a regular expression (if you are familiar with them).
<input type="text" pattern="a" name="fname" id="fname" />
This will force the user to submit exactly the letter "a" as name (just an example of course! You should write a more useful regex).
In case of invalid input, the browser will display an error message.
If you want to go further, and have full control over the (client-side) validation, then you need JavaScript.
<script>
const nameInput = document.getElementById('fname');
if (nameInput.value !== 'the_value_to_check_against') {
alert('Incorrect name');
}
</script>
Learn more here.
PS: This may not work if you are not using HTML5. If it is your code, I suggest you use HTML5 by replacing the first line (. Remove the xmlns attribute in the and also remove the two other .
How can create html template of following?
I have 6 textboxes. Textboxes 1-5 is for input and 6 is for output. In textbox 6, i want average value of other 5 textboxes without pressing any button in order to send result to textbox 6. Input of 5 textboxes may be optional(textbox value may be blank or number).
I guess this is what you are looking for...
index.html
<!DOCTYPE html>
<html>
<head>
<title>Average Calculation</title>
</head>
<body>
<input class="my_val" type="number" size="5" name="input1">
<input class="my_val" type="number" size="5" name="input2">
<input class="my_val" type="number" size="5" name="input3">
<input class="my_val" type="number" size="5" name="input4">
<input class="my_val" type="number" size="5" name="input5">
<input class="output" type="number" size="5" name="input6" readonly>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
$('.my_val').keyup(function () {
var total = 0,
count_field = 0,
average;
$('.my_val').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
count_field += 1;
total += val;
}
});
average = total / count_field;
$('.output').val(average);
});
Here is the working fiddle JSFiddle
Hope I helped you.
I have an input of type number in my form. Can I set the 'min' and 'max' attributes at once? I mean can I write something like this:
<!DOCTYPE html>
<html>
<body>
<form action="MyWeb.asp">
Quantity (between 1 and 10): <input type="number" name="quantity" min, max="10">
<input type="submit">
</form>
</body>
</html>
instead of:
<!DOCTYPE html>
<html>
<body>
<form action="MyWeb.asp">
Quantity (between 1 and 10): <input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>
No. HTML provides no shorthand means to set multiple attributes at once.
The closest you could come would be to use a loop in JavaScript.
It's not possible to do that, but you can use a hidden input field to force the user to input value of 10.
<input hidden type="number" name="quantity" value="10">
i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)