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.
Related
I've searched SO a bit for the same issue, but I could only find 'sort of solutions' like max & maxlength, but these won't work for me.
HTML that I have:
<input type="text" id="current" name="current_xj" maxlength="9" placeholder="Enter your value">
I want to set the maximum at: 200000000.
I thought I could use max="200000000" but it doesn't work for me.
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
You can still enter the number 250000000 or 999999999, I tend to do some live calculations. So it doesn't validate if the number is higher then 200000000.
What I want to do is:
Option 1)
If somebody enters a number higher then 200000000, then change the input value to 200000000. Instantly, since there is no button to click (like submit or calculate or anything).
Option 2)
Don't allow any number higher then 200000000 being input.
How would I do this?
Thanks in advance!
Below is the code which will trigger the function when the value becomes greater
function func() {
if (document.getElementById("current").value > 200000000) {
//alert("reached max limit");
document.getElementById("current").value = 200000000;
}
}
<input type="text" id="current" name="current_xj" maxlength="9" onkeyup="func()" placeholder="Enter your value">
Try the below code:
$(document).ready(function() {
$("input").keyup(function() {
//alert($(this).val());
if ($(this).val() < 200000000) {
} else {
alert("Reached Maximun Limit of Input");
$(this).val() = 200000000;
}
});
});
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Validate text Box</h4>
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
</body>
Here is some JQuery test you could continue on developing
$(document).ready(function() {
$(".Int").keydown(function() {
try {
var value = parseFloat($(this).val());
$(this).attr("Temp", value) // Save the current value
} catch (err) {
}
}).keyup(function() {
var value = parseFloat($(this).val());
var temp = $(this).attr("Temp");
var max = parseFloat($(this).attr("max"));
// if the new value bigger then max, then load the prev value
if (value > max)
$(this).val(temp);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="current" class="Int" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
I have the following field in my form, where a user should enter a 10 digit number.
I present the number in 3 separate fields (3-3-4):
Phone: [_ _ _]-[_ _ _]-[_ _ _ _]
Code:
<div id="phone-element" class="form-element">
<input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> <span class="wc_sep">-</span>
<input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> <span class="wc_sep">-</span>
<input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
</div>
But currently between each field, users need to place their mouse in the next field in order to continue to type the number.
How can I make it continuously?
This can be done with jQuery by checking the length of the entered value(on keyup) against the maxlength you have set on the inputs. If the length of the input value matches the maxlength of the input, then focus the next input:
$(function() {
$('input[type="tel"]').keyup(function () {
if (this.value.length === this.maxLength) {
$(this).nextAll('input[type="tel"]').first().focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone-element" class="form-element">
<input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required="">
<span class="wc_sep">-</span>
<input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required="">
<span class="wc_sep">-</span>
<input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required="">
</div>
You'll need to use JavaScript.
Attach an event listener to the input elements on keyup. If the length of the field matches your predetermined length, add focus to the next input element.
e.g.
var phone1 = document.getElementById('phone1');
phone1.addEventListener('keyup', function() {
if (phone1.value.length === 3) {
document.getElementById('phone2').focus();
}
});
You might need to cater to any edge cases that you find to make sure the UX is smooth, but this should get you started.
You could use jquery
<html>
<head>
<title></title>
<meta content="">
<style></style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="text" name="" id="field1">
<input type="text" name="" id="field2">
<input type="text" name="" id="field3">
<script type="text/javascript">
$(function(){
var field1 = $("#field1");
var field2 = $("#field2");
var field3 = $("#field3");
field1.on("keyup", function(e){
if(field1.val().length == 3)
{
field2.focus();
}
})
field2.on("keyup", function(e){
if(field2.val().length == 3)
{
field3.focus();
}
})
})
</script>
</body>
</html>
i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.
so one textbox,one button two different pages.
Code :
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
document.getElementById('a').action = action;
document.getElementById('a').submit();
}
function submitForm1(action)
{
document.getElementById('b').action = action;
document.getElementById('b').submit();
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<form action="b.php" name="b" id="b" method="post">
<form action="a.php" name="a" id="a" method="post">
<input type="submit" onclick="submitForm('a.php')" value="TRY" name="a">
<input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">
</form>
</form>
</body>
</html>
You can change the action onsubmit based on the text inside the input.
<html>
<head>
<script type="text/javascript">
function onsubmit_handler(){
var myForm = document.getElementById('myForm');
var data = document.getElementById('data').value;
if(data == "a")
myForm.setAttribute('action', 'a.php');
else if(data == "b")
myForm.setAttribute('action', 'b.php');
else
myForm.setAttribute('action', 'error.php');
}
</script>
</head>
<body>
<h3>Enter Text:</h3>
<form id="myForm" method="post" onsubmit="onsubmit_handler()">
<input type="text" id="data" name="data" value="">
<input type="submit" value="Post">
</form>
</body>
</html>
Test code here : http://jsfiddle.net/Eg9S4/
use this codes buddy
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);
if(n==1)
{
window.open("main.html");
}
else if(n==-1)
{
window.open("index.html");
}
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<input type="submit" onclick="submitForm()" value="TRY" name="a">
</form>
</form>
</body>
</html>
The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).
I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.
Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.
Here is some working code:
Test Page
function SubmitForm(el) {
// Get the form element so that we can set the action later
var form = document.getElementById('theForm');
// Set the action for the form based on which button was clicked
if (el.id == "A")
form.action = "a.php";
if (el.id == "B")
form.action = "b.php";
// You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
}
</script>
<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>
<input type="text" style="font-size:15pt;height:32px;"><br><br>
<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
<input type="submit" id="A" value="A" onclick="SubmitForm(this);">
<input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>
I am making a program that requires the user to input a string into an HTML text input box but it has to be four characters. Is there any way to set a max value for the input? Also can you make it so it can only be numbers? Here is what I mean:
<html>
<head>
</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<input type=text id=pin_number **maxvalue=4**>
/*Maybe you can do it with buttons*/
<table><tr><td><input type="button" value="1>"</td><td><input type="button" value="2>"</td>
<td><input type="button" value="3>"</td></tr><tr><td><input type="button" value="4>"</td><td><input type="button" value="5>"</td>
<td><input type="button" value="6>"</td></tr><tr><td><input type="button" value="7>"</td><td><input type="button" value="8>"</td>
<td><input type="button" value="9>"</td></tr></table>
</body>
</html>
<input type="number" max="9999" min="0" required value="0">
Fiddle.
Another solution, using the HTML5 pattern attribute:
<input type='text' pattern='\d\d\d\d' />
Fiddle
Again, I'm supposing you want exactly four digits. And you can type anything you want in, but an error is thrown when you click submit
Use Javascript and regular expressions like this:
<html>
<head>
<script language="javascript" type="text/javascript">
function pinnotify() {
var notify = document.getElementById('notify');
var numberRegex = new RegExp("^[0-9]+$");
var text = document.getElementById("pin");
if(numberRegex.test(text.value)){
notify.innerHTML = '<a style="font-size:1em;">Looks good!</a>';
}else{
notify.innerHTML = '<a style="font-size:1em;">Please numbers only.</a>';
}
if(text.value.length > 4){
text.value = text.value.substring(0,4);
}
}
</script>
</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<form method="post" action="">
<input type="text" name="pin" id="pin" size="32" onkeyup="return pinnotify();"> <span id="notify"></span><br/>
</form>
</body>
</html>
Here is my way to filter digits and check max value in a text field.
It works in any browser
JS function:
function InputReplaceForInt(input, max) {
if(max > 0 && input.value.length > max) {
input.value = input.value.substr(0,max);
}
input.value = input.value.replace(/[^\d]/g, '');
}
Html code:
<input name="telephone" type="text" onkeyup="InputReplaceForInt(this,11)"/>
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 :-(