My problem is the following I have a checkbox and two text input where the user has to enter their order and for every order I want to asign a number but I do not know how to do so using javascript and HTML. I tried adding one everytime the order button is clicked but it did not seem to work
<form>
<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
</form>
var order = 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder= document.getElementById("orders");
setOrder.value = order;
order++;
}
<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
<button id="orders">Place Order</button>
var order= 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder = document.getElementById("orders");
setOrder.value = order;
order++;
}
Note that setOrder.value is stored as a string. Should you need to convert to number, use parseInt(setOrder.value).
Related
I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.
make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">
your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>
This javascript code to concatenate isn't working. I tried an alert before closure of script tag, it's displayed but the code below that I want to display the result in third or different text field.
HTML:
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
JavaScript:
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
function concate()
{
st=s+t;
document.getElementById("str3").value.innerHTML=st;
console.log(st);
document.write(st);
}
There's no function .value.innerHTML should be :
document.getElementById("str3").value = st;
Also you should get the fields value inside function and close your function definition using }, check example bellow.
Hope this helps.
function concate()
{
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
document.getElementById("str3").value=s+t;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
function concate() {
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
// this is a standard way to concatenate string in javascript
var result = s+t;
document.getElementById("str3").value=result;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3" readonly><br>
<button onclick="concate()">Concatenate</button>
here are the instructions I was given:
Include 2 textboxes for user to enter 2 numbers. Advise user to enter 0 in
the second textbox so you can display the results of division by 0. Advise
user to enter a string to see the result. The first operation is to see the
result of division by 0. The second operation is to see the result of using a
text string in a mathematical operation. Button – call the function and
display the result
my html:
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
my javascript:
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var results_shown = document.getElementById("math_results").value;
results_shown = number_1/number_2;
}
I have tried several things but havent gotten it to work. I think I may need to use parseint() but even after some reading, I still not sure how to write it into my function, or if that would be the correct thing to use. I fell like theres something i should be using but unsure. what should I be using to be able to divide number_box_1 by number_box_2?
Instead of:
var results_shown = document.getElementById("math_results").value;
results_shown = number_1/number_2;
You have to use:
document.getElementById("math_results").value = number_1/number_2;
Runnable example:
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
document.getElementById("math_results").value = number_1/number_2;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
You were storing the value of the result input instead of a reference to it, so you were just modifying a variable and not the actual value.
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var result = document.getElementById("math_results");
result.value = number_1/number_2;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
However, I would do something like this.
var box1 = document.getElementById("number_box_1");
var box2 = document.getElementById("number_box_2");
var result = document.getElementById("math_results");
var form = document.getElementById("form");
form.onsubmit = function(e) {
e.preventDefault(); // To disallow the form's submission
result.value = box1.value/box2.value;
}
label { display: block; }
<form id="form">
<label>Enter a number: <input type="number" id="number_box_1" required></label>
<label>Enter a number: <input type="text" id="number_box_2" required></label>
<label>results: <input type="text" id="math_results" readonly></label>
<div><input type="reset"> <input type="submit" value="Evaluate"></div>
</form>
You have to put the result into the .value property. Right now you are assigning it to the results_shown variable.
Also, you have to be careful with forms, or it might cause a page post which would appear to knock out the results.
You cannot have the errors like division by 0 or division by string based on the responses coming you have to manually check what is the results_shown and then output to the result input box.
But I guess this is the start point.
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var results_shown;
try{
results_shown = parseInt(number_1)/parseInt(number_2);
}catch(e){
results_shown = e;
}
document.getElementById("math_results").value = results_shown;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
I am new to JS and trying to get it so when someone enters a SSN number in a field, it gives them an alert telling them to NOT put a SSN number in there.
HTML:
<form name="card" action="#">
<input type="text" name="field" class="name social" size="60" placeholder="First and Last Name">
<input type="text" name="field" class="phone social" size="60" placeholder="Phone Number">
<input type="text" name="field" class="email social" size="60" placeholder="Email(name#example.com)">
<select class="select">
<option value="My card has not yet arrived">My card has not yet arrived
<option value="Direct Deposit">Direct Deposit
<option value="Suggest a Card">Suggest a Card
<option value="Issues with CARD.com">Issues with CARD.com
<option value="Other">Other
</select>
<textarea name="field" class="text social " cols="60" rows="5" placeholder="How can we help you?"></textarea>
<input type"submit" name="submit" class="subBtn" value="Submit" onclick="warnCC(document.card.field)">Submit</input>
</form>
JS:
<script>
function warnCC()
{
var ssn = document.getElementsByTagName("input");
// document.getElementsByClassName("social");
var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
if (ssn.value.match(pattern))
{
return true;
alert("Please Do Not Enter SSN Info Into This Form");
}
else
{
return false;
alert("yay!")
}
}
</script>
Any help on where I cam going wrong would be very helpful. I'd also prefer it was done on a "onfocusout" if anyone can give me advice on that.
getElementsByTagName and getElementsByClassName both return a list of elements. That list doesn't have a value property. Each of the items on the list has a value property, but not the list.
You'll want to loop through the list of inputs and handle each of them as appropriate, e.g.:
var list = /*...get the list using either method you have in your code...*/;
var index, input;
for (index = 0; index < list.length; ++index) {
input = list[index];
// input.value will be the value of this particular input
}
Side note: querySelectorAll has better support than getElementsByClassName (IE8 has it, for instance, but not getElementsByClassName), so if you want to get a list using a class, you're best off with:
var list = document.querySelectorAll(".the-class-here");
You should also do the alert() before returning from the function ... if you want the alert() dialog to be displayed.
I tweaked your function. You can see it inaction here: http://jsfiddle.net/tBqP2
function warnCC() {
var formElements = document.getElementsByTagName("input");
for (var k in formElements) {
// document.getElementsByClassName("social");
var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
if (formElements[k].value.match(pattern)) {
alert("Please Do Not Enter SSN Info Into This Form");
return false;
}
}
return true;
}
So i am having the next input trough and ajax call:
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ",
}
I have several text inputs with the associated name of each JSON object as follows:
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
What i want to have a value to each input. Like this:
<input type="text" name="id_u" value="1">
<input type="text" name="nombre_usuario" value="jesus">
<input type="text" name="apellido_paterno_usuario" value="diaz">
I know that i can do with jQuery with jQuery function:
$("[name=]").val();
The problem is that i have a lot of fields to complete. Si i would like to do it faster.
Any ideas?
Thanks
Try this.
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
<script>
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ"
};
for (var key in json) {
if (json.hasOwnProperty(key)) {
$("[name=" + key + "]").val(json[key]);
}
}
</script>
http://jsfiddle.net/GCy2a/