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>
Related
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 4 years ago.
I have an input for in my HTML code, and I want to capture the input as a variable in javascript.
HTML:
<form id="answer">
Answer: <input type="text" answer="response"><br>
<input type="button" value="Submit" onclick="answerInput()"> <br><br>
</form>
Javascript:
var answer = document.getElementById('answer').value;
I would expect this to return the value of what was put in the field before submit was hit, but it returns undefined. I need someone to be able to put in a value (in this case a number) and have that number be available as a variable.
Thank you for being patient, I'm new to all this and teaching myself.
Put the id answer on the input tag not on the form tag
function answerInput()
{
var answer = document.getElementById('answer').value;
console.log(answer)}
<form>
Answer: <input type="text" id="answer" answer="response"><br>
<input type="button" value="Submit" onclick="answerInput()"> <br><br>
</form>
Your form has the id of "answer". Your input has no id.
Javascript checks the element with the id of "answer" for its "value" property, but the form does not have a value property, so it returns undefined.
So you can just move id="answer" from the form tag to the input tag to get your desired result.
This question already has an answer here:
Learning Regular Expressions [closed]
(1 answer)
Closed 4 years ago.
I have an input field on a registration screen where the user has to enter his user id which is generally 6 characters long. First 2 characters are always alphabets, and the following characters are mostly numbers. (eg. ab123c or xy5678)
How can I check in the input field with jquery / javascript that user only enters in above format before hitting submit.
<input type="text" maxlength="6" name="uid" id="uid" placeholder="enter user id here">
You can validate your input using regex
regex = /^[a-z]{2}[a-z0-9]{4}$/i ;
regex = /^[a-z]{2}[a-z0-9]{4}$/i ;
console.log('ab1234', regex.test('ab1234'));
console.log('abc234', regex.test('abc234'));
console.log('ab1d34', regex.test('ab1d34'));
console.log('ab12e4', regex.test('ab12e4'));
console.log('ab12yz', regex.test('ab12yz'));
console.log('2b1234', regex.test('2b1234'));
console.log('a11234', regex.test('a11234'));
You don't need javascript or jquery. Can use HTML. w3c School
<input type="text" maxlength="6" name="uid" id="uid" placeholder="enter user id here" pattern="[a-zA-z]{2}[a-zA-Z0-9]{4}">
Thanks for the update Barmar, not used it before.
Update:
First I don't know why this is closed. The question isn't about learning regular expression, it's about implementation. Aurelien provides the right answer if you want to use jQuery, mine is if you don't want to use jQuery or javascript. Zohaib ljaz doesn't address the core issue of implementation.
Second: Most of the comments aren't helpful, he does provided examples and it has max-length in the code so of course 6 is the max.
Try this
$('form').on('submit', function(e){
e.preventDefault();
if($('#uid').val().match(/^[a-zA-Z]{2}[a-zA-Z0-9]{4}$/)){
$(this).submit()
}
else {
//Do your error logic here
}
}
This question already has answers here:
How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?
(7 answers)
Closed 5 years ago.
I would like to fill an input without having to select it with my mouse before. Just using javascript and not Jquery .
What I mean is that they user just have ton type his answer and it goes directly into the input. Here is my HTML.
<input id="inputresponse" name="response" type="text" value="" />
I have searched everywhere but I can't find a clue. I guess we should use either keyup or keypress, but I can't find how.
Your help is highly appreciated, thanks !
Use Autofocus on HTML tag as -
<input id="inputresponse" name="response" type="text" autofocus>
Another Way, You can use js also -
window.onload = function() {
var input = document.getElementById("inputresponse").focus();
}
<input id="inputresponse" name="response" type="text">
This should work:
$('#inputresponse').focus();
Just setting this on your page will automatically focus on the input element and anything typed will be added within.
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;
I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:
I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.
I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input
I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.
Heres what the form looks like:
<form action="submit.php" method="post">
Enter Title:<input type="text" name="title" size="20"><BR>
Enter Class Code:<input type="text" name="class" size="20"><BR>
Enter Base Number:<input type="text" name="base" size="20"><BR>
Enter Dash Number:<input type="text" name="dash" size="20"><BR>
<input type="submit" value="Submit">
Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.
Thomas
From what I'm understanding this should do what you describe.
$('#yourForm input').bind('keyup', function(e) {
var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
$('#preview').html(docNum);
});
For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.
http://jsfiddle.net/nuY2M/
Include this html where you want the document number preview to display:
Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>
Add this script to populate the values:
function updateDocNumPreviewPart(fieldName)
{
var preview = document.getElementById(fieldName + "Preview");
var field = document.forms[0][fieldName];
preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
updateDocNumPreviewPart("class");
updateDocNumPreviewPart("base");
updateDocNumPreviewPart("dash");
}
Finally, add some code to your form fields to call the script:
<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />