Also my I need help with the loop to add more names when I put the number 2 instead of 1. Having issues with my code any help is appreciated. I know its simple For Loop coding, but I am stumped.
HTML
<p>Enter First Name: <input type="text" id="firstname">
<span id="firstname_error"></span>
</p>
<p>Enter Last Name: <input type="text" id="lastname">
<span id="lastname_error"></span>
</p>
<p>How Many Pets do you have? (0-3):
<input type="text" id="numpets" size="1" maxlength="1">
<span id="numpets_error"></span>
</p>
<p>List your Pet's names:
<input type="text" id="pet1">
<input type="text" id="pet2">
<input type="text" id="pet3">
</p>
<p><input id="mybutton" type="button" value="Submit Information"></p>
<p id="message"></p>
JavaScript
for(counter=1; counter<=numpets; counter++) {
var PetId = "pet" + counter;
var myPetName = document.getElementById(PetId).value;
// Code to append test into a message variable
}
I have a total of three fields in the var "numpets", if I put the number 1 in that field, it will only the read the name in the number 1 field. If I put 2 it will only read the name in the number 2 field. I need it to be able to read all 3 three fields.
The for loop is ok. You have just to put your loop inside a function and call it with your button. And define the numpets like you did with the var namepet.
Related
<html>
<head>
<title>Tax Calculator</title>
<!-- Name: Jacob Zoppina-->
<!--Section: 25-->
<!--TA: Fang Wang-->
<meta charset="UTF-8">
</head>
<body>
<h1>Payroll Processing</h1>
<h2>Report Generator</h2>
<hr>
<style>
h1 {
text-align: center; background-color: black; color: darkgreen;
}
h2 {
text-align: center; background-color: lightgreen; color: black;
}
body {
background: lightyellow
}
</style>
<p> Department: <input name="department" type="text" id="dpt" value=""/></p>
<hr>
<p>Employee 1: <input name="empId" type="text" id="initials1" value=""/>
<input name="hoursWorked" type="text" id="work1" value=""/>
<input name="hourlySalary" type="text" id="salary1" value=""/>
</p>
<p>Employee 2: <input name="empId" type="text" id="initials2" value=""/>
<input name="hoursWorked" type="text" id="work2" value=""/>
<input name="hourlySalary" type="text" id="salary2" value=""/>
</p>
<p>Employee 3: <input name="empId" type="text" id="initials3" value=""/>
<input name="hoursWorked" type="text" id="work3" value=""/>
<input name="hourlySalary" type="text" id="salary3" value=""/>
</p>
<hr>
<p><input type="button" value="Process" onclick="myFunction()"/>
<input type="button" value="Clear" onclick="clears();"/>
</p>
<script>
function departmentName() {document.getElementById("dpt")
document.write("Department Name:"+departmentName)
}
function totalHours (var wrk1, wrk2, wrk3;) {}
</script>
</body>
`I am an absolute javascript beginner and I am only doing it for a college course. I am struggling on my final javascript assignment and I cannot figure it out. I'm not asking for someone to do my homework for me I just need somewhere to start. You will use a text box to get the department’s name. I have to use text boxes to get Employee ID his/her initials), Hours worked during the week and Hourly salary. Each department may have up to 3 employees.A button will generate a report, which will display on a separate page, including, The name of the department. The Regular Salary and Overtime salary for each employee, a summary section with, Department Regular Hours, Department Overtime Hours, Total Department Regular Salaries, Total Department Overtime Salaries, Total Department Salaries.
Another button to clear previous entries and reset memory variables, I have to use at least one function for the salaries calculations.
I have to use a loop, in conjunction with an array, for the salaries calculations. The report will be produced using the Dynamic Web page creation techniques using document.write statements).
What I really need is just somewhere to start, I don't want someone to do my homework I kinda just need an example of how to get data from a text box, put it in an array somehow, and then use document.write to display the final product. For example I need to figure out how to take the data from my text boxes labeled "hours worked" and have them add up together and then display itself on a separate page. I feel like if I can learn how to do just one section of the boxes then I can replicate it onto my other groups of boxes.
JavaScript gives us some selectors by which we can get perticular element and its value these are below:
1. Id Selector: By which we can get element by its unique id.
ex:document.getElementById('#id')
2. Element Name Selector: By actual element we can get data.
ex:document.getElementByName('nameOfElement')
3. Class Selector: By the class also we can element values
ex:document.getElementByClass('className')
But in your case, as you have several input fields for different purpose
you can use Id Selector to get perticular element values.
example:
HTML:
<form name="userForm">
<input type='text' id="name">
<input type='password' id="password">
<button type='submit' onClick="submit()">Submit</button>
</form>
JavaScript:
function submit(){
var userName=document.getElementById('name').value();
var password=document.getElementById('password').value();
// now you can make your micro-service call
}
hello i need little help to read multiple values by multiple buttons like 1,2,3 and output in input like this 123 not only 1 number, concurnete number by every click
<input type="button" onclick="changeText(1)" value="1" >
<input type="button" onClick="changeText(2)" value="2">
<input type="button" onClick="changeText(3)" value="3">
<br>
<input type="text" id="count" value=""/>
function changeText(value) {
document.getElementById('count').value = value ;
}
floowed by next number
link demo
http://jsfiddle.net/J7m7m/541/
function changeText(value) {
document.getElementById('count').value += value ;
}
I am trying to create a simple calculator that takes a number from 1 text box and after hitting a submit button it takes the number and multiplies it by 92 then puts it in a read only box.
This is what I have so far:
<form name="1star">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="1star.output.value == 1star.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
This is not working and I could use some help. I know its easy but I am very new to js and I'm not understanding why this isn't working.
<form name="onestar">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="onestar.output.value = onestar.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
An identifier cannot start with a digit in JavaScript, so 1star is an error. Also, you wanted = (assignment), not == (comparison).
That said, there are a number of outdated or beginner practices above. If I was writing it, I would separate the script from the markup, and I'd use document.getElementById to fetch the element rather than relying on implicit variables defined by name. I would also explicitly parse the string into a number. But for now no need to worry about it too much. Even though the code seems much more complicated at first glance, it's all things that will make your life easier later, with bigger programs.
var input = document.getElementById('input');
var output = document.getElementById('output');
var button = document.getElementById('button');
button.addEventListener('click', function(evt) {
var value = parseInt(input.value, 10);
if (!isNaN(value)) {
output.value = value * 92;
}
});
<form>
<input type="text" id="input"/>
<input type="button" id="button" value="Enter"/>
<br/>
<input type="text" id="output" readonly="readonly" />
</form>
I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!
I am using Gravity Forms for Wordpress and I am trying to figure out how to count the length of characters a user types into one of my input boxes and print that number to another input box in the same form. I think this can be done with Javascript but I am a total newb and well here is my very watered down effort. Just so you can see what I am trying to do.
<!-- edited -->
<form>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
<div style="padding:10px 15px; font-family:sans-serif !important;">
<p id="preview" style="text-align:center;font-size:22px;font-weight:bold;">Sample Text</p>
</div>
</form>
<script>
var bank = document.getElementById("input_1_2");
var countNum = document.getElementById("input_1_10");
bank.addEventListener("keyup", function(e) {
countNum.value = bank.value.length;
});
document.getElementById("preview").innerHTML= countNum.value;
</script>
So the user will type their "message" in #input_1_10 and i need a way to count the characters(preferably without counting spaces) and print them in #input_1_2 before the user submits the form.
** EDIT: I would also like to know how to write the value of #input_1_2 in to the paragraph with the ID of #preview. **
Thanks for looking ;)
Add an eventListener to the first input. In this case, whenever the user presses and releases a key, the length of the input will be displayed in the second input.
<form>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</form>
<script>
var bank = document.getElementById("input_1_10");
var countNum = document.getElementById("input_1_2");
bank.addEventListener("keyup", function(e) {
countNum.value = bank.value.length;
});
</script>