Why can't I get the value of this text input field? - javascript

I have a div, which contains a text input field:
<div id="age" class="fullScreen">
<input type="text" id="age" class="textInput" placeholder="Please enter age..." />
<button type="button" onclick="submitAge()">Submit</button>
</div>
submitAge() looks like this:
function submitAge() {
var ageVal = document.getElementById("age").text;
alert(ageVal);
}
But in Google Chrome and Webkit Nightly I see an alert with the text "undefined" (I can't test in any other browsers because the page contains web-sockets).
The chrome developer tools show this:
I assume that the problem is that the input is not in a form, but I don't want it to be in a form because I will be submitting the data via websockets.
Do I have to put it in a form or is there a better solution?
Thanks.

You have redefined the id "age". Rename either your div or input and you should be fine.

Try:
function submitAge() {
var ageVal = document.getElementById("age").value;
alert(ageVal);
}

var ageVal = document.getElementById('age').value;
alert(ageVal)
Note the .value instead of text

Change:
var ageVal = document.getElementById("age").text;
to
var ageVal = document.getElementById("age").value;

You <div> has the id of age. This is going to return either the div or an array of HTMLElements. Get a unique id of the input and you will be golden

Try
document.getDocumentById("age").value;

Related

Javascript Alert is not displaying

I working on a simple JavaScript code and having some trouble getting my alert to display from my code. From what I understand the script should cause an alert box to pop up and display.
Here is the HTML:
The problem is you have not assign any id or anything to get the value. Here is the code ,please try this.
<input type = "text" value = "" id="input1" name="" >
<input type = "text" value = "" id="input2" name="" >
<button onClick="add()"> Add </button>
function add()
{
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
alert(parseInt(input1) + parseInt(input2));
}
You need to specify ID in the input tags then try to call the alert using JS.

I try to pass the content of a paragraph element into a field of a contact form using Javascript

So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.

Changing the value of a input box in HTML within a script

Statement In JS HTML5 I have a input box defined as
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
I want to change the value of these within a script.
Question: What HTML5 command will allow me to change the value of id="Numerator"?
Example
var k = 2
(insert command here to change id="Numerator" to value k)
I know how to pull the value using
document.getElementbyID("Numerator").value
but I cannot figure out how to change the value of that id....
any help would be appreciated and I could not find that value...
You have a typo in your getElementbyID. It should be getElementById:
var k = 2;
document.getElementById("Numerator").value = k;
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
Try This:-
document.getElementById("Numerator").value = "My value";
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
var el = document.getElementbyID("Numerator");
el.setAttribute("ID", "your-new-id");
You can use like this
document.getElementById('Numerator').value = "Set Value To textbox using javascript";

Editing html input element from javascript bugs out

I have this input field in html:
<input id="title" type="text" class="" />
A button will allow the user to randomize the value of the input field by calling a js function.
var title = document.getElementById("title");
title.removeAttribute("value");
title.setAttribute("value",random_name);
If the user wants to change the value auto-asigned by my function (aka random_name), he can simply type something else in the input field.
All works fine until now, however if the user changes his mind and clicks the randomize button again, the function is called and "value" attribute is modified, but the user still sees the last thing he typed and not the new random value.
Is there a way to fix this or maybe a workaround?
Just do title.value = random_name
You can set an input's value by element.value = "desired_value". If you use that, it works.
http://jsfiddle.net/f4gVR/2/
<input id="title" type="text" class="" />
<input type="button" class="" onclick="randomValue()" value="Random" />
function randomValue() {
var title = document.getElementById("title");
title.value = Math.random(); // assign random_name to title.value here
}
if it's your random_name bugging out, you should post the code. Try this first. Just replace Math.random() with random_name.
you need to use title.value = random_name; instead of title.setAttribute("value",random_name);
Fiddle: http://jsfiddle.net/4dhKa/

Javascript to html tag ~ passing a variable

So my question is, how do I pass variables to javascript functions through html input boxes?
Like, let's say I have a function:
function Call(number, text, callerID, CallerIDName, PassCode)
How would I make an input box in html so that when the user submits a value into the box, it would set the variable for that corresponding box?
All help is appreciated, thanks!
Try something like this...
Name: <input type="text" id="number"><br>
Text: <input type="text" id="text"><br>
Caller Id Name: <input type="text" id="CallerIDName"><br>
Passcode: <input type="text" id="Passcode"><br>
<script>
function Call() {
var number = document.getElementById("number").value;
var text = document.getElementById("text").value;
var CallerIDName = document.getElementById("CallerIDName").value;
var Passcode = document.getElementById("Passcode").value;
//do something here...
}
</script>
<button onclick="Call();">Click to Call</button>
Let's say you have an input tag for the "number" parameter:
<input type="text" id="number" />
You can then obtain the value of the field like this;
document.getElementById("number").value
You can find a few examples here. Let me know if I misunderstood your question.

Categories