JavaScript - writing value into html form from script - javascript

I was wondering how I could input a value into a form with html.
So right when the user goes to the site there's numbers in the text boxes already and they use those numbers to play and "addition game".
This is what I have so far:
<script type="text/javascript">
function addSubmit() {
//trying to have num1 and num2 write into the html form
var num1= Math.floor(89+Math.random()*11);
var num2 = Math.floor(89+Math.random()*11);
/*num1 = value1
num2 = value2*/
document.getElementById("value1").value = num1;
document.getElementById("value2").value = num2;
var guess = document.getElementById("submit").value;
var answer = num1 + num2;
//have to write this to main window
if (guess == answer)
document.writeln("Congratulations you answered correctly! The answer to: "+num1+"+"+num2+"= "+answer);
else
document.writeln("Nice try, but the correct answer to: "+num1+"+"+num2+"= "+answer);
}
function addGiveUp() {
var num1 = Math.floor(89+Math.random()*11)
var num2 = Math.floor(89+Math.random()*11)
document.addition.value1.value=num1;
document.addition.value2.value=num2;
var guess = document.getElementById("submit").value;
var answer = (document.getElementById("value1").value) + (document.getElementById("value2").value);
document.writeln("Never give up! The answer to: "+num1+"+"+num2+"= "+answer);
}
</script>
<form name="addition" action="" method="get">
<table border="1">
<tr>
<td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
</tr>
<tr>
<td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
</tr>
<tr>
<td>Answer:</td> <td><input type="text" id="answer" /></td>
</tr>
<tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
</table>
</form>
I appreciate any help! Thanks!

well you can put this script after the form is created:
<form name="addition" action="" method="get">
<table border="1">
<tr>
<td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
</tr>
<tr>
<td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
</tr>
<tr>
<td>Answer:</td> <td><input type="text" id="answer" /></td>
</tr>
<tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
</table>
</form>
<!-- This is the script-->
<script type="text/javascript">
document.getElementById("value1").value = Math.floor(89+Math.random()*11);
document.getElementById("value2").value = Math.floor(89+Math.random()*11);​
</script>
That would generate random numbers for you and put them in the form
See here for the code: http://jsfiddle.net/wVAFt/

<input type="text" id="answer" value="5" >
or
document.getElementById("answer").value = "5";

To have numbers in input fields you can set them to have a value, like value="10" and the default value would be 10 until the user changes it.

Related

JS Calculations for numbers in text fields, and showing correct decimal points

I'm creating a form where people can list a product but the website takes a listing fee once the item sells
I've got a JS Fiddle working but my fields are not showing the correct decimal points
So:
you put a number value in the price field
then the JS puts the price including tax (12,5%) into the next field
then shows you the 25% that the website owner will receive once sold
the shows the amount the seller will receive once item sells.
You can see what I've managed to get working in the below fiddle, but my JS is just so sloppy and I'm not sure how to get it to work exactly how I want.
Any assistance would be greatly appreciated
https://jsfiddle.net/Lq2cv4w9/1/
<form>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_2">Price</label><br />
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_2" id="CAT_Custom_2" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_13">Price Including Tax's</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_14">Cloudwine Commission 25%</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_15">Seller Receives</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_11">Listed Price</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_11" id="CAT_Custom_11" class="cat_textbox" /></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catcustomcontentbutton" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b89.r513012-phase1"></script>
<script type="text/javascript">
function output() {
var value1 = document.getElementById('CAT_Custom_2').value;
document.getElementById('CAT_Custom_13').value = parseInt(value1) * (0.125) + parseInt(value1);
var value2 = document.getElementById('CAT_Custom_13').value;
document.getElementById('CAT_Custom_14').value = parseInt(value2) * (0.25);
var value3 = document.getElementById('CAT_Custom_14').value;
document.getElementById('CAT_Custom_15').value = parseInt(value2) - parseInt(value3);
document.getElementById('CAT_Custom_11').value = parseInt(value2);
}
</script>
</form>

Unable to fetch the input values from the form in jquery

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?
All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.
Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>

getElementByID().innerHTML never works for me

I just can't seem to get my head around how document.getElementById("").innerHTML
alert("") works - so the function is fine.
In every college exercise I've done so far, I've tried to use getElement...innerHTML since I feel it's a more useful way of doing things than alert/document.write, and... it never works, ever.
Am I missing some key rules about it?
Here is a very 'early-days' example that didn't work:
<html>
<head>
<title>total of 3</title>
<script language="javascript">
function total()
{
var number1 = 0;
var number2 = 0;
var number3 = 0;
var total = 0;
number1 = parseInt(document.m.number1.value);
number2 = parseInt(document.m.number2.value);
number3 = parseInt(document.m.number3.value);
total = number1 + number2 + number3;
alert("your total is " + total);
document.getElementById("a").innerHTML = total;
}
</script>
</head>
<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr>
<tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr>
<tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
</form>
<p id="a"></p>
</body>
</html>
This is happening because you are using a submit button, and so your form submits and causes the page to change(or reload in this case since you have no action).
Because it reloads you have lost whatever you have changed. You can use preventDefault to stop the default action of an event, in this instance prevent the form submission.
Since you are using inline js you will have to pass the event object to your total function and then call preventDefault() on it.
<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total(event)">
And then in your JS
function total(event){
event.preventDefault();
//...rest of your code
}
Demo
function total(event){
event.preventDefault();
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML= total;
}
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr><tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr><tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" id="Submit" name="submit" value="Submit" onClick="total(event)"></td>
</tr>
</table>
</form>
<p id="a"></p>
Change you input type from submit to input type button.....
<td><input type="button" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
because using submit you are refreshing your page, so you cant see your result..
AND using button page will not refresh and you will get your result :p
This is because you're submitting a form, so when you are clicking the button it's refreshing the page and thus not running the part of your script that writes to the page.
The alert pauses execution of the script (and pauses refreshing) which is why the alert part works.
To prevent the form from refreshing the page you should preventDefault on the submit event.
So, for your total function:
function total()
{
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML= total;
event.preventDefault();
}
Although this should work fine in Chrome, some browsers may need you to pass the event along with the function. So send it as an argument to your total function.
Your code is working, it doesn't change the the inner HTML because the submitbutton refreshes the page. Try :
<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total();return false;" >
Refer the corrected code , here its working but you need to put some delay time otherwise it just flash once a while
<html>
<head>
<title>total of 3</title>
</head>
<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr><tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr><tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
<p id="a"></p>
</form>
<script >
function total()
{
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML = total;
}
</script>
</body>
</html>

Currency Converter Not Converting

The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.
ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.
Try this code
if(select.options[select.selectedIndex].value=="your value")

Why does the JavaScript code stop execution after the for loop

This is my try at creating a registration page however after the for loop whatever follows does not execute and I'm at a loss as to why?
Below is the javascript code and the form
<script type='text/javascript'>
myArray = ['username','email','password','password2'];
reply = ['User Name','Email','Password','Password Again'];
message = "Please Type you're ";
start = "<font color = red size='-1'>";
end = "</font>";
test = 10;
obj = validate();
alert (obj);
function validate(){
for (var i=0; i<=myArray.length; i++) {
if (document.getElementById("in"+myArray[i]).value == "")
{
document.getElementById(myArray[i]).innerHTML = start+message+reply[i]+end;
test = 30;
}
}
alert ("test");
}
<form action="echo.php" method="post" name="register" onsubmit="return validate();">
<table>
<tr>
<td width="185"><font size="2">First Name</font></td>
<td width="499">
<input id = "infirst_name" name="first_name" type="text" /><div id="first_name"></div></td>
</tr>
<tr>
<td><font size="2">Last Name</font></td>
<td><input id = "inlast_name" name="last_name" type="text" /><div id="last_name"></font></div></td>
</tr>
<tr>
<td><font size="2">Username*</font></td>
<td>
<input id = "inusername" name="username" type="text" /><div id="username"></div></td>
</tr>
<tr>
<td><font size="2">Email*</font></td>
<td><input id = "inemail" name="email" type="text" /><div id="email"></div></td>
</tr>
<tr>
<td><font size="2">Password*</font></td>
<td><input id = "inpassword" name="password" type="password" /><div id="password"></div></td>
</tr>
<tr>
<td><font size="2">Repeat Password*</font></td>
<td>
<input id = "inpassword2" name="password2" type="password" /><div id="password2"></div></td>
</tr>
<tr>
<tr>
<td><font size="2">I have read and Agree to the Terms and Conditions</font></td>
<td>
<input id = "incheckme" name="checkme" type="checkbox" /><div id="checkme"></div></td>
</tr>
<tr>
<td><input type="submit" value="Register" /></td>
<td> </td>
</tr>
</table>
</form>
Try fixing your loop:
for (var i=0; i < myArray.length; i++) {
JavaScript will stop executing anything if it encounters an uncaught error. In your case it seems that you've looped past the last element (and tried to set innerHTML on an undefined object).
Most likely because you iterate past the end of the array, but reference it like there's something there.
See JS console output: perhaps it says that you have an error.
i falls out of myArray length: change the loop condition from "i<="to "i<" and you'll be fine.

Categories