Javascript html input element changes how to load into function? - javascript

I want user to load page, default value is 10 so it should calculate all variables for default value first, then I want user to enter his own value and click submit and the value gets updated.
Seems it needs onclick event that should call a function to recalculate the value.
I tried first without intparse and .value and no onclick event, then I figured out I need Intparse and .value to get integer. When setting default value on input id 1 it calculates three numbers correctly upon page load.
However when I put it in a function before it would calculate all three numbers correctly then page would reload for some reason and it goes back to default, This one doesn't work at all.
Can somebody explain what I did wrong?
<html>
<head>
</head>
<body>
<form id="frm1">
<input type="number" id="1" name="1" value="10"><br>
<input type="submit" onclick="myFunction()" id="s" value="Submit">
</form>
<p id="t"></p>
<script type="application/javascript">
Function myFunction() {
var N = parseInt(document.getElementById("1").value);
var m = N;
var cm = m * 100;
var mm = m * 1000;
document.getElementById("t").innerHTML = "" + m + " " + cm + " " + mm; }
</script>
</body>
</html>

Change the form to a div. This worked for me when I tried to run your code.

Related

HTML Form to JavaScript variable

I have a script. This script has to do some calculations. For the reason that now the user has to edit the script variables in the file I want to write a form that updates the variables always when the form is updated. There are around 10 variables that needs to be updated always when one variable in the form is updated.
For example:
In the HTML form are 10 fields like this one (the onchange="formChanged()" is from the try):
<input type="number" name="pL" step="0.001" value="250000" onchange="formChanged()"/><br>
So I want to edit this variable in JavaScript:
var pL=250000;
I tried this:
function formChanged() {
var x = document.getElementsByName("x")[0].value
var m0 = document.getElementsByName("pL")[0].value
var V = document.getElementsByName("V")[0].value
}
But this doesn't work...
Do you have any suggestions, what I'm doing wrong?
See https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
It should be getElementsByName.
<!DOCTYPE html>
<html>
<body>
<input type="number" name="pL" step="0.001" value="250000" onchange="formChanged()"/><br>
<input type="number" name="x" step="0.001" value="250000" onchange="formChanged()"/><br>
<input type="number" name="V" step="0.001" value="250000" onchange="formChanged()"/><br>
<p id="demo"></p>
<script>function formChanged() {
var x = document.getElementsByName("x")[0].value
var m0 = document.getElementsByName("pL")[0].value
var V = document.getElementsByName("V")[0].value
document.getElementById("demo").innerHTML = x + ' ' + m0 + ' ' + V;
}
</script>
</body>
</html>
This works. Add a snippet with the whole code, please.
if you want to change the value of the variable through javascript, assign the value to it's value property.
so instead of
pL=250000;
write, in your formChanged function
document.getElementsByName("pL")[0].value=250000;
also it is not clear from your question on the calculation you want to do on the
if say you want to add the values x and V to be the new pL
then write
var x = document.getElementsByName("x")[0].value
var m0 = document.getElementsByName("pL")[0].value
var V = document.getElementsByName("V")[0].value
document.getElementsByName("pL")[0].value=Number(x)+Number(V)
In HTML5, the "name" attribute is deprecated and has been replaced by the "id" attribute for many elements. I've tried the following and it worked for me.
<input type="number" id="pL" step="0.001" value="250000" onchange="formChanged()"/>
<script>
function formChanged() {
var m0 = document.getElementById("pL").value;
alert("The current value is " + m0);
}
</script>
Let me know if this works for you too. Also make sure you put semi-colons after your statements in the formChanged() function.

I want to join two inputs in one var at html on Wordpress

I'm using wordpress but making my own form for payments, i have two inputs of type select, like this:
<div id="S03" class="Selectos"><select tabindex="4" name="Mes" required="">
<option...[Code goes on]
And this:
<div id="S04" class="Selectos"><select tabindex="5" name="Ano" required="">
<option...[Code goes on]
Those works fine, but i want to join them in one input, i have research all day long, i found some clues about what i have to do, but in especifics no one does help me.
This is the input for the joining:
<input id="Expires" name="Expires" type="hidden" />
And the way i call the form:
<div class="container"><form id="contact" class="RV_donateForm" action="https://eps.banorte.com/secure3d/Solucion3DSecure.htm" method="post">
And how it close:
<fieldset><button id="contact-submit" name="submit" type="submit" data-submit=" ">Donar</button></fieldset>
</form></div>
Then i look for some way to joining and this one looks the better way to do it at the submit event:
<script type="text/javascript">
button.onclick = function (){
document.getElementById('Expires').value = document.getElementById('S03').value + '/' + document.getElementById('S04').value; cn = document.getElementById('Expires').value ;
alert(cn);
};
</script>
Well, at the bank 'post' they throw me all the vars ok, except for Expires that never joins and shows null, and i notice also because it never show me the alert. I'm new at html and JavaScript, and i'm not sure what could be wrong. All the code on the file are on this order for exception that the call of the form is at the beginning of everything, ¿maybe is the position on line that i have to put the javascript?
I appreciate any help. Thanks a lot stackfellas!
You may want to check this https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
I guess you first need to get the button, then add the listener
<script type="text/javascript">
var button = document.getElementById('contact-submit')
button.addEventListener('click', function () {
document.getElementById('Expires').value = document.getElementById('S03').value + '/' + document.getElementById('S04').value;
cn = document.getElementById('Expires').value ;
alert(cn);
});
</script>
Finally! It does work like Omar says, but loading the addEventListener at onload body function, it will run the function that the event refers when you click on submit button.
<script type="text/javascript">
function putExpires(){
var cm = document.getElementById('S03').value;
var ca = document.getElementById('S04').value;
document.getElementById("Expires").value = cm + '/' + ca;
var cn = document.getElementById("Expires").value;
}
function load() {
var button = document.getElementById("contact-submit");
button.addEventListener("click", function(){putExpires()}, false);
}
</script>
<body onload="load();">
Thanks Omar!

Trying to make a pricing list with jQuery in JavaScript

I've typed the whole calculation. I have a submission button which by clicking needs to retrieve the sum. It doesn't work. I'm pretty new at JavaScript so I can't really tell where is the problem. Here is the code:
$('#home_price').submit(function(){
var shutter_price, lights_price, socket_price, screen10_price, screen7_price, dimmer_price, x
var total_price = 3000;
shutter_price = ($('#shutter').val())*200;
light_price = ($('#lights').val())*200;
socket_price = ($('#socket').val())*200;
screen10_price = ($('#screen10').val())*700;
screen7_price = ($('#screen7').val())*200;
dimmer_price = ($('#dimmer').val())*400;
if($('#boiler').is(":checked")==true){
total_price+=600;
x+=1;
}
x+=($('#shutter').val())*2+($('#lights').val())+($('#socket').val());
Math.floor(x);
x+=1;
total_price = total_price + shutter_price + light_price + socket_price + screen10_price + screen7_price + dimmer_price + x*400;
$('#home_pricing').val()=total_price;
if($('#home_pricing').val() < 6000)
alert('the solution invalid');
else
alert(" total: " + $('#home_pricing').val());
});
});
and a piece of the html code:
<label for="screen7"> 7inch screen </label>
<input style="margin-right:70px" name="screen7" type="number" id="screen7"> <br><br>
<label for="dimmer"> dimmer</label>
<input style="margin-right:174px" name="dimmer" type="number" id="dimmer"> <br><br>
<label for="boiler"> bolier </label>
<input style="margin-right:148px" type="checkbox" name="boiler" id="boiler" > <br><br>
<div>
<input type="submit" name=" home_pricing " id="home_pricing" value=" calculate " >
</div>
</form>
I tried doing the same with document.getelementbyid(' one_of the id's').value
but still once I pick values in each input line and then click the submission button it just jumps to the window again with no values and doesn't print anything.
Change the submit button's type from 'submit' to 'button'. That way, clicking submit won't redirect you. What you have to do to set the values though, is make an onclick event for the new button.
Instead of using $('#home_price').submit(), use calculate() and it will work.
The default behavior when a form is submitted to is to to go to a new page. If no new page is specified, the current page is just reloaded. You can prevent that default behavior in the submit event handler method by invoking the event's preventDefault method. To do that, specify an event parameter to the submit method definition, then call preventDefault, like so:
$('#home_price').submit(function(event) {
event.preventDefault();
// Rest of your code here
// ...
Update
There are also a couple of obvious errors in your code. The Math.floor method does not modify the variable passed to it, it returns a integer value. Change this line:
Math.floor(x);
to this
x = Math.floor(x);
Putting the jQuery val() method on the left side of an assignment does do anything. However, you can pass a value to val() and it will set the new value. Change this line:
$('#home_pricing').val()=total_price;
to this:
$('#home_pricing').val(total_price);

Javascript Random Number Generator comes up with NaN

I am trying to make a random number generator using a form. When you press the button, and enter in the maximum number, it comes up with a dialog box reading NaN, when it is meant to come up with the random number.
I have some code that looks like this:
<html>
<head>
</head>
<body>
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button name="generate" type="submit" onclick="gennum()">Generate!</button>
<script>
function gennum()
{
alert(Math.floor(Math.random() * num.value + 1));
}
var num = document.getElementById('numgen').value;
</script>
</form>
</body>
</html>
I am not very good with Javascript, but I know a bit. If anyone knows how to fix this, I would be happy.
num.value is a string. Use parseInt(num.value, 10) to turn it into a number, that way it can be added to a number appropriately.
Also, it looks like you're getting the value twice, and the first time is when the page loads (so it doesn't have a value yet:
var numElem = document.getElementById('numgen'); //remove value here
then in your function:
alert(Math.floor(Math.random() * parseInt(num.value + 1)));
and, you need to use type="button" on your button, or the page will reload.
Here's your code refactored with better practices.
Live demo here (click).
Markup:
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button id="generate" type="button">Generate</button>
</form>
JavaScript:
/* get element references */
var genButton = document.getElementById('generate');
var numInput = document.getElementById('numgen');
//use javascript to add the click function
genButton.addEventListener('click', function() {
/* it's easier to read and debug if you break things up
* instead of putting it all on one line with tons of ((()))
*/
var rand = genRandom(1, parseInt(numInput.value, 10));
alert(rand);
});
function genRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

result of input box times 2 appears in window not div

I'm trying to get a text box where you can enter a number and then you click the button and it will multiply it by two and display that result in theDiv. Right now, it opens a new page for the result, and displays the entered number, not the number times two. What am I doing wrong? Beginner here, please be gentle! Thank you!!
<html>
<script>
function doubleit()
{
var theNumber=document.write(parseFloat(document.getElementById('theInput').value));
var doubleNumber =document.getElementById('theNumber')*2;
document.getElementById('theDiv').innerHTML(document.getElementById('doubleNumber'))
}
</script>
<body>
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="doubleit()"></p>
<div id="theDiv"></div>
</body>
</html>
It's the call to document.write that is replacing the page. Remove it:
var theNumber=parseFloat(document.getElementById('theInput').value);
When you want the value of a variable, you shouldn't use document.getElementById:
var doubleNumber = theNumber * 2;
innerHTML is a property, not a method:
document.getElementById('theDiv').innerHTML = doubleNumber;
var doubleNumber = Number(theNumber, 10)*2;
document.getElementById('theDiv').innerHTML(doubleNumber);
Something like this
function doubleit()
{
var theNumber=parseFloat(document.getElementById('theInput').value) * 2;
document.getElementById('theDiv').innerHTML = theNumber;
}
Try This Solution :
Use the id of your button to call the function to calculate result.
theButton.onclick = function doubleit()
{
//Simply get the number from user and parse it as float.
var theNumber=parseFloat(document.getElementById('theInput').value);
//Multiply it with 2
var doubleNumber =theNumber*2;
//Display the result in another div
document.getElementById('theDiv').innerHTML = doubleNumber;
}
Demo

Categories