Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So i'm trying to make damage calculator, where user writes the following variables: Level, military rank, strength and weapon level. But the problem seems i can't to send variables to javascript and the document write doesn't send anything out. Can you check the code and help me?
Regards
<form id="form">
Your level:<input type="number" name="level"><br>
Your strength: <input type="number" name="str"><br>
Your military rank: <input type="number" name="mr"> <br>
Your weapon(no weapon=0) <input type="number" name="wep"><br>
<input type="submit" value="Submit">`
</form>
<script type="text/javascript">
var level = document.getElementById('level').id;
var str = document.getElementById('str').id;
var mr = document.getElementById('mr').id;
var wep = document.getElementById('wep').id;
hit = ((level*4)+str)*(1+(mr/20))*(1+(wep/10));
document.write(hit);
You don't want to get the id of the element:
document.getElementById('level').id
You want to get it's value:
document.getElementById('level').value
Also, in order to use getElementById, your element needs to have an id:
<input type="number" name="level" id="level">
Alternatively, without changing the markup, you can use getElementsByName and grab the first element in the returned collection:
document.getElementsByName('level')[0].value
Your problem is that you are referencing your tag's id, when you never gave it one:
Your level:<input type="number" name="level"><br>
Should have:
Your level:<input type="number" name="level" id="level"><br>
Your JS aslo is not asking for the value. Just the object itelf. It should be:
var level = document.getElementById('level').value
Then you're script will work.
You are using getElementById but have not defined any Id values.
With the current html markup you can use getElementsByName() instead. The method returns an array of matched elements.
forexample,
var str = document.getElementsByName('str')[0].value;
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
So, I have this html form which the user fills up with his/her info. There is the mobile number field.
I´d like to add the country code automatically, but hidden from the user (since it´s going to be just a local - geographic - marketing action, it´s a fixed code), so I can receive the mobile number with the country code added directly to the database.
All I need is that the form (or JS) adds the value "11" to the beginning of the mobile number without the user noticing it. The user writes "321-456789" and I will receive "11321456789".
How to code that?
Thanks!
You can use JS to prepend (kudos to Stephen P's amazing vocabulary) "11" to the value of the input field like so:
function append11(){
var mobilenumber = document.getElementById("phonenumber");
var front = document.getElementById("front").value;
mobilenumber.value=front+mobilenumber.value;
}
<input type="number" id="phonenumber"><input type="number" value="11" id="front" hidden><button onclick="append11()">
Append 11
</button>
In the example above, whatever you input, after clicking the 'Append 11' button, will add "11" to the front of the value. You can configure this to submit a form like so:
function append11(){
var mobilenumber = document.getElementById("phonenumber");
var front = document.getElementById("front").value;
mobilenumber.value=front+mobilenumber.value;
alert(mobilevalue.value);
}
<form action="something" method="GET">
<input name="phonenumber" type="number" id="phonenumber"><input type="number" value="11" id="front" hidden><button onclick="append11()">
Submit
</button>
</form>
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 3 years ago.
I'm very inexperienced so I'm sorry if this is a stupid question.
I was wondering if it's at all possible to code something on a site that takes an input and "uses" it elsewhere - what I'm going for is an input box that asks for a name, and the name given will appear in place of some sort of "name" variable. For example, if you entered your name as "Bob", something like "Hello (name)" would appear as "Hello Bob".
I haven't really seen anything that gives instruction on how to do this, which makes me wonder if it's even possible.
I've been trying to handle the input box itself, and so far it looks like this:
<body>
<form>
<label for="namebox">Name:</label>
<br>
<input type="text" id="uname" name="name" value="Namehere">
<br>
<button>Submit</button>
</form>
<p id="namebox"></p>
<script>
document.getElementById("namebox").innerHTML = "uname";
</script>
</body>
The output of this currently is being sent to a nonexistent page ending in "/?name=(whatever name value is inputted)".
Also, if this does work, would the change to the "name" variable only occur on the page with the input form, or would it carry to all pages on the site?
Thank you for any help.
<script>
document.getElementById("namebox").innerHTML = "Hello" + document.getElementById("uname").value
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a form that has the following fields:
<div>
<input name="department" type="radio" value="1" required >
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
What I would like to be able to do is to display different checkboxes and comment text fields ONLY if the radio button for "Band" is checked. If this is unchecked then, the checkboxes should go away. I found several examples online, but for some reason I can't get them to work. The problem must be that I do not know Javascript or JQuery :( Any help would be appreciated.
I have tried different things that I have seen on stackOverflow and other websites, but I am so clueless about Javascript that I can't get it to work.
I've created a commented fiddle to help you accomplish what you ask, but also clue you in on what's actually going on. I recommend really diving into JavaScript/JQuery with the many resources available online, but for now, I hope my comments will help get you started.
The main takeaway here, is we use JavaScript to "listen" to whether or not the input in question is selected, not selected—based on that value, we can dictate what our view will look like—in this case, hiding or showing element(s).
JS
$(function () {
// Create selectors for relevant DOM elements
var $Department = $('input[name="department"]');
var $BandSelected = $('#BandSelected');
// Create a function that you pass
// the value of the input element in question.
// Return TRUE/FALSE based on equality to 2,
// the `value` associated with the 'Band' input
function isBandsSelected(val) {
return val == 2;
}
// Attach an event listener on `click' of inputs
$Department.click(function () {
// Assign a variable to the function that determines if the input
// we click on is 'Band' (has a value of 2)
var showBand = isBandsSelected($(this).val());
// If `showBand` returns TRUE, show our `BandSelected` div
if (showBand) {
$BandSelected.show();
// If `showBand` returns FALSE, show our `BandSelected` div
} else {
$BandSelected.hide();
}
});
});
Markup
<div>
<input name="department" type="radio" value="1" required>
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
<div id="BandSelected" class="hidden">
Band is selected
</div>
Demo Fiddle: http://jsfiddle.net/4x1ybqyv/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Let's say I have an input field like this:
<input type="text" id="input" value="This is my value">
How can I get the attribute value? In jQuery, I can easily get it with:
$('#input').val() //-> This is my value
How do I do so using pure JavaScript?
You can get the value by targeting the ID.
Where inputID is the ID of your input or textarea:
document.getElementById('inputID').value;
You can also do it by targeting the name attribute.
Where inputID is the Name of your input or textarea:
document.getElementsByName('inputID')[0].value;
The element must have an ID
<input type="text" id="text-field-id" value="A test!">
And then you do this:
var value = document.getElementById('text-field-id').value;
You can use getElementById() , to get value use value property
<input type-"text" id="text" />
var text=document.getElementById('text').value;
Fiddle Demo
Try this
document.getElementById("input-id").value
Yes you are right, everything that is written in jQuery can be written in pure Javascript
var value = document.querySelector('#yourInput').value;
You can use this :
<input type="hidden" id="yourID" name="msg" value="" style="display:none"/>
var Msg="abc";
document.getElementById('yourID').value = Msg;
This question already has answers here:
JavaScript getElementByName doesn't work
(4 answers)
Closed 9 years ago.
I need to make "readonly" a text field by place javascript code inside external JS file. I can't modify html directly because the page is located on remote server..but I can interact by adding code in external JS who is located on my own host.
The html is this:
<form id="newunitform" class="left" action="page.php" style="width:600px" method="post">
<fieldset>
<ul>
<li>
<label for="add">
<input type="text" value="" name="add">
<input type="hidden" value="" name="remove">
<input type="hidden" value="105" name="resource_id">
<input type="hidden" value="" name="editid">
</li>
</ul>
<label for="submit"> </label>
<input class="button" type="submit" value="Add name" name="submit">
</fieldset>
</form>
I tried several combination such this:
document.getElementByName('add').readOnly=true;
or this:
var add = document.getElementByName('add');
add.readOnly = true;
or this:
document.getElementById('newunitform');
document.getElementByName('add').readOnly=true;
but none work.
As Rocket Hazmat suggests in the comment to your question, you should use
document.getElementsByName('add')[0].readOnly=true;
document.getElementsByName('name')
returns an array. You need to use brackets or .item() to point to your element.
I suggest you using this one, in my opinion it is a better solution:
var newUnitForm = document.getElementById('newunitform');
newUnitForm.add.readOnly = true; //or newUnitForm['add'], it's the same
That's true -- it's either getElementById (single element) or getElementsByName which access all the elements in the DOM that have the name you're looking for.
Once you change Element to Elements you should be able to set the readOnly attribute.
You could also try, document.getElementByNames('someElement').disabled = true; but be careful if there are multiple elements with the same name.
Also -- because syntax like this has tripped me up any number of times, if a function doesn't work as expected, I'll make sure I'm getting the object I think I'm getting by alerting some aspect of the element.
e.g. alert(document.getElementsByName('someElement').length) or alert(document.getElementsByName('someElement').name)
Good luck
If you know there is only one element named "add", you can try something like this:
var elem = document.getElementsByName("add")[0];
elem.setAttribute("readonly", "true"); // or elem.readOnly = true;
If you know there is only one element named "add" inside the "newunitform" form, use LightStyle's suggestion:
var elem = document.getElementById("newunitform").add;
elem.setAttribute("readonly", "true"); // or elem.readOnly = true;
In any case, make sure the snippet is executed after the element in question has been rendered (e.g. you could place it in body's onload method.