How to put data from firebase database into input text field? - javascript

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;

Related

How to add values from previous input to textarea

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>

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.

How do I set the value of a variable to the user input in an input field?

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">

Javascript onKeyUp condition doesnt work when speed typing

my simple html file code
Site Name: <input id="name" type="text" onkeyup="myFunction1(event,this)">
URL : <input id="url" type="text">
javascript code
function myFunction1(event,t){
var nameval= document.getElementById("name").value;
var urlval= document.getElementById("url").value;
var namelen = nameval.length;
var urllen = urlval.length;
var res = nameval.substring(1, namelen);
if(res.length == urllen){
document.getElementById("url").value = t.value;
}
else{
alert("string lengths are not matching");
}
}
what i want to do when user type Site Name in textbox, same text should reflect to URL textbox if name and url text boxes have same text lenghts . but when i speed type site name, my if condition fail after typing few characters and it goes to else block. i dont know why this happening. can anyone help me to improve this code?
Using the onkeyup event isn't your best option for what you are trying to do. You can use the oninput event instead. Here's the modified HTML:
Site Name: <input id="name" type="text" oninput="myFunction1(event,this)">
URL : <input id="url" type="text">

gs function passing 'undefined' to jsfunction (Dynamic Form Update)

I'm having a problem with a dynamically updated form in Google Apps Script. The form is in an HTML template (say index.html) as follows:
<form id="login">
<p>Enter username and password below, or use the links to the right for more services:</p>
<input type="text" placeholder="username" id="username" name="username" />
<input type="password" placeholder="password" id="password" name="password"/>
<input type="button" value="Login" onclick="google.script.run.withSuccessHandler(form_login).processForm(this.parentNode)" id="login_button" />
</form>
There is also a div designated for the output:
<div id="output">test value</div>
And a javascript function to update said div:
function form_login(msg) {
var div = document.getElementById('output');
div.innerHTML = div.innerHTML+msg;
}
The function within the gs file that deals with this is as follows:
function form_login(formObject) {
//connect to users spread sheet
var userssheet = SpreadsheetApp.openById("SPREADSHEET-ID-STRING");
//get variables handed over and existing on page
var username = formObject.username;
var pass = formObject.password;
//get where data range in spreadsheet
var searchrange = userssheet.getActiveSheet().getDataRange();
//check if username exists and return password (change to check if password and username are correct and)
if (find(username, searchrange)) {
var enteredpassword = searchrange.getCell(find(username, searchrange),4).getValue();
var message = (username+" Found! Password is "+enteredpassword); //get password value
} else {
var message = (username+" Not Found!");
}
//check if password entered is correct
if (enteredpassword) {
if (enteredpassword==pass) {
message = message + "Correct Password";
} else {
message = message + "Incorrect Password";
}
}
return message;
}
(Obviously I'm still building the functionality).
The problem, which will probably turn out to be an obvious oversight on my part, is with the gs function. Whatever it returns is outputted as 'undefined' into the HTML. Even when i change return message; in the function to something like return "hello";, I still get undefined appended to the output div (I tried using toString(); in the javascript function, but that didn't change anything).
Any ideas? What am I missing?
Found out what the problem was, and as I assumed, it was a mistake on my side. The button action (which I copied then edited from developers.google.com/apps-script/guides/html/communication#forms was:
onclick="google.script.run
.withSuccessHandler(form_login)
.processForm(this.parentNode)"
The problem was that I forgot to change processForm to the new gs function name: form_login. I changed it (to do_form_login, and changed the function name in the code to avoid confusion with the javascript code), and it worked like a charm (:
Note: Thanks Sandy for the help, you made me scrutinize the code and find out this mistake.

Categories