We Keep Coding

Automated Form Filling

I’m looking for a way to automate a form.
Here are the details:
Extract a certain number (displayed in its html)
Do some calculations on the extracted number (percentage of that number)
Then automatically fill the remaining input fields with the result instead of typing it out.

This is a common occurrence in forms. The solution depends on what framework / libraries you're using. Assuming you're using none, here is how you might go about it:
https://jsfiddle.net/f52h1smj/1/
rough HTML:
<form>
<label for="number">Number: </label>
<input id="number" type="number" />
<br /> <br />
<label for="calculatedNumber">Calculated Number (50%): </label>
<input id="calculatedNumber" type="number" disabled="true" />
</form>
JS:
(() => {
//get the form element nodes
const $number = document.getElementById("number");
const $calculatedNumber = document.getElementById("calculatedNumber");
//add an event listen to the value you're going to use to pre calculate the other fields
$number.addEventListener("keyup", (e) => {
//it's value is available like so
const value = e.target.value;
//do some validation so that you're calculations don't throw exceptions
if (Number(value) !== 0 && !Number.isNaN(value)) {
//set the value of the other inputs to whatever you like by setting the 'value' property of the node.
$calculatedNumber.value = value / 2;
} else {
$calculatedNumber.value = null;
}
});
})();
These things become a lot simpler in frameworks like React and Angular.

Automatic percentage calculator

I am working on a code to calculate percentage but I need it to calculate the percentage automatically without the submit button, that is I want it to output the calculated percentage without the need of the user hitting the submit button.
Here is my code
Input: <input type="text" id="input"/><br />
Percent: <input type="text" id="percent" value="50"/>%<br />
Output: <input type="text" id="output"/>
function calc() {
var i = document.getElementById("input").value;
var p = document.getElementById("percent").value;
var o = (i/100) * p;
document.getElementById("output").value = o;
}

On each of the two inputs, add onchange="calc();" (updates when user tabs to the next field) or onkeyup="calc();" (updates whenever user types something).

Trouble setting variables from form inputs. Radio and Text entries

I am attempting to create an equation using people's pay rates and some other information from a from. However, I can't even get variables to set based on information from the form. The form includes 1 set of radio buttons and 2 text input forms.
<form id="userInfo" action="" method="post">
<p>Pay Frequency: <select name="payFreqS">
<option>Hourly</option>
<option>Weekly</option>
<option>Bi-Weekly</option>
<option>Monthly</option>
</select></p>
<p>Pay Rate:<input type="text" name="payRateS" value="0000.00">
</p>
<p>Cost of Item:<input type="text" name="costS" value="000.00">
</p>
</form>
<p><input name="submit" type="submit" class="btn" value="Submit" onclick="shouldIBuy()"/></p>
Javascript:
function shouldIBuy()
{
// attempt to find error with console statements
console.log("How far can we get?");
// setting variables for my function
var payRate = document.getElementByIds("payRateS").value;
var cost = document.getElementById("costS").value;
// pay frequency variable
var payFreq = document.forms[0].payFreqS;
var i;
for (i=0;i<payFreq.length;i++)
{
if (payFreq[i].checked)
{
payFreqVal = i;
}
}
//more console.log statements to troubleshoot
console.log(cost);
console.log(payRate);
console.log(payFreq);
// setting what I hoped were strings to integers.
var payRateInt = parseInt(payRate);
var costInt = parseInt(cost);

There should be errors in your console because you are using the non-existent getElementByIds.

I went back and broke it down to the very basic elements to figure out was going on. I was not referencing the right things. You were right. Thanks.

javascript calculation field comparison algorithm

Good day,
I have 3 text fields for input.
TotalWeight
CustomUnitWeight
CustomsNumberOfUnit
There should be a validation to make sure TotalCustomWeight matches TotalWeight (neither higher nor lower).
I started playing around trying to construct a function for validating this no luck and looking for assistance
Scenario :
User input total weight of pkg at 30, then put number of custom unit at 2 and the weight at 10. On click the function calculate 2 * 10 = 20 and look at the total weight 30 and compare the total custom weight. In this case 20 does not equal to 30 therfore throw error message.
HTML
<input type="text" name="TotalWeight" id="TotalWeight" />
<input type="text" name="customsNumberOfUnitsUSA" id="CustomsNumberOfUnits" />
<input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight" onChange="ChkWeight();" />
JAVASCRIPT
$(function(ChkWeight){
$('#CustomsUnitWeight').click(function() {
var TotalWeight = document.getElementById('TotalWeight');
var CustomUnitWeight = document.getElementById('CustomsUnitWeight');
var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits');
var TotalCustomWeight = CustomUnitWeight * CustomsNumberOfUnit;
if (TotalWeight != TotalCustomWeight) {
error message "pkg weight does not match total custom weight"
}
});
});

Well everything else is fine in your code just needs to put .value to get value from your input fields and converting string (simple text) to Float type and then calculate and show alert like
<body>
<input type="text" name="TotalWeight" id="TotalWeight" />
<input type="text" name="customsNumberOfUnits" id="CustomsNumberOfUnits"/>
<input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight" onblur="CheckWeight()" />
//I have changed the event as onblur and calling CheckWeight() function defined in javascript below.
</body>
<script type="text/javascrit">
function CheckWeight()
{
var TotalWeight = document.getElementById('TotalWeight').value;
var CustomUnitWeight = document.getElementById('CustomsUnitWeight').value;
var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits').value;
//parsing text value to Float type for multipication
var TotalCustomWeight = parseFloat(CustomUnitWeight) * parseFloat(CustomsNumberOfUnit);
if (TotalWeight != TotalCustomWeight)
{
alert("pkg weight does not match total custom weight");
}
}
</script
and Off course you must need to validate for value to be number before calculation. This works perfect.

How do I pass form values to other fields in a form with javascript

I'm Working with form validation and fields for the first time without inline event handling. I can't find an example of how to pass a integer value, do a operation on it and pass to another field. This is what I'm up against:
FORM LOOKS LIKE THIS:
ITEM CONTAINER QUANTITY PRICE EXTENDEDCOST
Small Beer Bottle,Can ?? #3.99/ea ??
HTML BITS
<form action="#" method="get" name="orderForm" id="orderForm">
<table id="products">
<input name="qtySmall" id="qtySmall" type="text" size="4" maxlength="6" value="" />
<input name="extSmall" id="extSmall" type="text" size="10" maxlength="60" value="" />
Javascript
window.onload = initForms;
function initForms()
{
document.getElementById("qtySmall").onfocus = detect;
document.getElementById("qtySmall").onchange = going_away;
document.getElementById("extSmall").value = passmyvalue; //not sure about this one yet
}
function detect()
{
alert("works")
}
function going_away()
{
pass_variable = document.getElementById("qtySmall").value;
}
function passmyvalue()
{
// I have no idea how to pass my qty small multiply it and pass it to the next field box 4 beers * 3.99 = 15.96 in extsmall
}
Thanks for the Help

Not sure if I am understanding your problem here. Can't you just change your going_away function to do the following?
function going_away()
{
pass_variable = document.getElementById("qtySmall").value;
document.getElementById("extSmall").value = parseInt(pass_variable) * cost;
}