I am trying to add values from 2 of my inputs to the text area. I was able to find a solution to grab one of the inputs and hope someone can help me find a way to get another one. Also, is there a way to grab another element from the page for example php echo of student's first name?
Please see the picture
I would like this to say "Hey, student_first_name, my name is last_name from university_name, let's connect.
This is the code I have
<script>
// save the location of the name field
var message_field = document.getElementById('university');
var last_name_field = document.getElementById('last_name');
//add an event listener to activate if the value of the field changes
message_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = message_field.value;
// concatenate it with the desired message
var autoFill = 'Hi ' + name + ', thank you for visiting us!';
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
<script>
// save the location of the name field
var university = document.getElementById('university_name').value;
var last_name = document.getElementById('last_name').value;
var first_name = document.getElementById('student_first_name').value;
//add an event listener to activate if the value of the field changes
message_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = message_field.value;
// concatenate it with the desired message
var autoFill = autoFill + university;
autoFill = autoFill + last_name;
autoFill = autoFill + first_name;
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
it's a little bit confuse your HTML code, but i did an HTML code and adjusted your javascript code, I hope this helps you.
PS.: You can always group your inputs and textareas inside a FORM tag
https://www.w3schools.com/html/html_forms.asp
var form = document.getElementById("myForm");
form.addEventListener("input", function () {
var name = document.getElementById('name').value;
var lastName = document.getElementById('last_name').value;
var university = document.getElementById('university').value;
document.getElementById('message').value = 'Hey, ' + name + ', my name is ' + lastName + ' from ' + university + ', let\'s connect'
});
<form id="myForm">
<div>
<input type="text" placeholder="First Name" id="name">
</div>
<div>
<input type="text" placeholder="Last Name" id="last_name">
</div>
<div>
<input type="text" placeholder="University Name" id="university">
</div>
<div>
<input type="text" placeholder="Phone Number" id="phone">
</div>
<div>
<input type="email" placeholder="Email address" id="email">
</div>
<div>
<textarea name="Message" id="message" cols="30" rows="10" placeholder="Message (optional)"></textarea>
</div>
</form>
Related
Hello I would like to ask if how to put data from firebase database into input text field?
I tried it in any text label like, Label, h1, strong or anything and they getting it but when I put it in input text field its not changing or detecting.
This is the code my input text field.
<div class="md-input">
<label>First Name<span class="text-danger">*</span></label><br>
<div class="md-input">
<input class="md-form-control" type="text" id="firstname" name="firstname" placeholder=" " required>
</div>
and this is the javascript or my firebase code to move it in the input field but nothings happening.
firebase.auth().onAuthStateChanged(function(user)
{
if(!user)
{
window.location.href = "../signin.html";
}
else
{
var dbUser = firebase.auth().currentUser.uid;
firebase.database().ref('Freelancer/' + dbUser).once('value').then(function (snapshot){
var okay = snapshot.val().name;
var okay1 = snapshot.val().email;
var okay2 = snapshot.val().pass;
var okay3 = snapshot.val().roles;
var okay4 = snapshot.val().userID;
console.log(okay);
console.log(okay1);
console.log(okay2);
console.log(okay3);
console.log(okay4);
document.getElementById("firstname").innerHTML=okay;
document.getElementById("lastname").innerHTML=okay1;
document.getElementById("phone").innerHTML=okay2;
document.getElementById("roles").innerHTML=okay3;
});
Hope someone can assist me or help me thank you!
For <input> elements, you need to use the value property when setting (or getting) the text in the field.
document.getElementById("firstname").value = okay;
I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"
You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>
First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>
I am creating a random password generator and I would like the user to be able to set the desired length of their password. I have an input field for the user to put their desired length, and I would like to store their input in a variable. I have tried several stack overflow solutions, none of which have worked.
Here is what I have right now for the HTML:
<div id = "pswrdLngth">
<div class = "text-center">
<p>Desired password length:</p>
<input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128">
</div>
</div>
and the JavaScript:
var lengthValue = document.querySelector("#lengthValue");
var passwordLength = lengthValue.value;
$(".buttonTwo").on("click", function() {
console.log(passwordLength);
} )
The console is returning an empty line when buttonTwo is clicked. I have also tried using "lengthValue.val()" for the function passwordLength, but the console error read: ".val() is not a function." Any suggestions? Thank you in advance.
const myFunction = () => {
var lengthValue = document.querySelector("#lengthValue");
var passwordLength = lengthValue.value;
console.log(passwordLength)
}
html:
<div id = "pswrdLngth">
<div class = "text-center">
<p>Desired password length:</p>
<input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128" onchange="myFunction()">
</div>
</div>
I made an onchange function which will store the value everytime the input changes.
You can add the Event Listener like this:
var lengthValue = document.getElementById("lengthValue");
var passwordLength = lengthValue.value;
document.getElementById('buttonTwo').addEventListener("click", function() {
console.log(passwordLength);
} )
This should work if the HTML for buttonTwo has an id called "buttonTwo", like this:
<input type="button" id="buttonTwo">
I used the code snippet below to pull data from Firebase database and assign it to the Name variable.
var userId = localStorage.getItem('keyName');
var dbRefName = firebase.database().ref()
.child('Web App')
.child('Users')
.child(userId)
.child('Name');
dbRefName.on('value', snap => Name.innerText = snap.val());
var Name = document.getElementById('Name');
Then, I try to assign the Name variable to value attribute of the input tag like this:
<input type="text"
id="Name"
class="form-control form-control-alternative"
placeholder="User Name"
value="Name">
But it is not working, could anyone help me?
add this line
var Name = document.getElementById('Name');
document.getElementById("Name").value = Name;
and remove value="Name" from your html
I found the answer by my self. experience the excellence. Here it is
var userId = localStorage.getItem('keyName');
var dbRefName = firebase.database().ref().child('Web App').child('Users').child(userId).child('Name');
dbRefName.on("value", function(snapshot) {
console.log(snapshot.val());
document.getElementById('Name').value = snapshot.val();
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
And the input tag should be looked like here.
<input type="text"
id="Name"
class="form-control form-control-alternative"
placeholder="User Name"
>
i have a form which user enters some data, could be checkboxes, radio buttons, textfields, etc
when user click submit button, i want to refresh the page with whatever data that was entered
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body id="ref">
<form>
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
</form>
<input type="button" onclick="c()" value="submit">
<script type="text/javascript">
function c()
{
var o = document.getElementById('ref');
o.innerHTML = '';
var n = document.createElement('p');
var nam = document.getElementById('name');
n.innerHTML = "Your name is: " + nam;
o.appendChild(n);
var a = document.createElement('p');
var ag = document.getElementById('age');
a.innerHTML = "Your age is: " + ag;
o.appendChild(a);
//how do i get the info from the form? because both nam and ag are coming up null
}
</script>
</body>
</html>
my guess this is not working is because the page refreshes then tries to fetch the element by id which is not there anymore.. whats the correct way of doing this??
You're confusing objects with their properties. Here, you're getting the HTMLInputElement instance for the "age" field:
var ag = document.getElementById('age');
But here you're using that object as though it were a simple value:
a.innerHTML = "Your age is: " + ag;
The HTMLInputElement object has a value field you can use for that:
a.innerHTML = "Your age is: " + ag.value;
Separately, you're completely destroying the page by doing this:
var o = document.getElementById('ref');
o.innerHTML = '';
...because you've given the body element the ID "ref". Completely replacing the body element completely replaces the body element, so you can't rely on objects that only exist as subordinates of that element.
The usual thing is to have an element to fill in, and (optionally) to remove the elements you no longer need. For instance (live copy):
HTML:
<form id="theForm">
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
<input type="button" onclick="c()" value="submit">
</form>
<div id="result">
</div>
(Note I moved the button into the form for convenience.)
JavaScript:
function c() {
var form = document.getElementById("theForm"),
nameField = document.getElementById("name"),
ageField = document.getElementById("age"),
result = document.getElementById("result");
form.parentNode.removeChild(form);
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
}
There, when the button is pressed, I remove the form and fill in the "result" div.
You could add the "result" div dynamically if you wanted (live copy):
HTML:
<form id="theForm">
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
<input type="button" onclick="c()" value="submit">
</form>
JavaScript:
function c() {
var form = document.getElementById("theForm"),
nameField = document.getElementById("name"),
ageField = document.getElementById("age"),
result;
result = document.createElement("div");
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
form.parentNode.insertBefore(result, form);
form.parentNode.removeChild(form);
}
You can access the fields using a briefer and somewhat more natural syntax if you change your id values to name values instead (live copy):
HTML:
<form name="theForm">
Please enter your name:<input type="text" name="name" />
Please enter your age:<input type="text" name="age" />
<input type="button" onclick="c()" value="submit">
</form>
JavaScript:
function c() {
var form = document.theForm,
nameField = form.name,
ageField = form.age,
result;
result = document.createElement("div");
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
form.parentNode.insertBefore(result, form);
form.parentNode.removeChild(form);
}
Further reading:
DOM2 Core (well-supported by most modern browsers)
DOM2 HTML
DOM3 Core (increasingly supported)
If you want to update your html using java-script only , you may use ".value" attribute of the input;
var a = document.createElement('p').value;
var ag = document.getElementById('age').value;
Usually the Form information is processed using server-side code , this is done by specifying the action attribute of the form:
<form action="processuserinfo.aspx">
...
</form>
I'm pretty sure this isn't doable javascript alone. You'll need to use a server-side language like php. Try to google php forms, and you should get some good results. :)