setting form input to a value in firebase - javascript

Another Questions here,
I am trying to copy an input (or a value) from an input on my form to fire values,here is my code :
<script>
var dataBase = new Firebase ('https://yjyc-signup.firebaseio.com/Entries');
var fName = document.getElementById('name');
var eMail = document.getElementById('email');
var submitBtn = document.getElementById('submit');
//var phoneNumber = document.getElementById('phonenumber');
var nameRef = dataBase.child('Name');
var emailRef = dataBase.child('Email');
//var phonenumberRef = dataBase.child('phone number');
submitBtn.addEventListener('click', function(){
dataBase.push({ 'name': 'hello', 'Email': 'Email', 'Phone number': 'phonenumber' });
//nameRef.set(fName.value);
//emailRef.set(eMail.value);
//phonenumberRef.set(phoneNumber.value);
swal("Thanks Alot!", "Thank you for signing up, a representative will be in touch with you shortly", "success")
});
</script>
as you can see the 'name': is harcoded to hello , but I am looking to link it to the value of the name input at the form.
any suggestions?
Thank you so much for you help.

To set the dynamic value instead of hardcoded one you just need to use variables. Based on your code something like this should do the trick:
dataBase.push({ 'name': document.getElementById('name').value, 'Email': document.getElementById('email').value, 'Phone number': document.getElementById('phonenumber').value });

Related

how to join some text before user input text with jQuery

Hey How Can I Add Lines In User Input Texts Like
Name: User Input Value
Ex :- Name: John Doe
This Code Worked But Not That I Want
$(document).ready(function () {
$('#confirm-btn').on('click', function () {
var form = $('.shamweel-custom-form').not('#ContactForm1_contact-form-email-message');
var vals = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
var billingInputData = vals.join(',' + '\n');
$('#ContactForm1_contact-form-email-message').val(billingInputData);
});
});
It Gives
John Doe,
Johndoe#gmail.com,
Etc
But I Want It to Work Like
Name: John Doe,
Email: johndoe#gmail.com,
Etc.

Firebase Data Not Saving to Database

I'm having a problem attempting to add data to Firebase. Disregard the vars I don't use as I am trying different things and have commented out stuff I am not using at the moment.
But essentially, what I want to do is save this data to Firebase as follows:
A user enters his name and age in input boxes and then hits submit.
Once he/she hits submit, the function addFB() runs and ideally would create a child called users, and then under that, create a new child with the newly typed in userName (the User's name from the input box), and store his name and age in that child.
However, nothing is going to Firebase from this. Please help. Thanks in advance!
<h2>Add</h2>
<input type=text" id="userName">
<input type="number" id="userAge">
<button id="btUpdateMessage" margin-bottom="20px" onclick="addFB()"> Update</button>
<script>
var lblCurrentMessage = document.getElementById('lblCurrentMessage'),
userName = document.getElementById('userName'),
btUpdateMessage = document.getElementById('btUpdateMessage'),
userAge = document.getElementById('userAge'),
rootRef = new Firebase('https://********.firebaseio.com');
var usersRef = rootRef.child('users');
function addFB() {
usersRef.child(userName).set({
Name: userName,
Age: userAge
});
userName.value = '';
userAge.value = '';
}
*rootRef = new Firebase('https://********.firebaseio.com');*
The above code is not correct. This is the old method.
Just check the below code. This will help you.
function addFB() {
var userName = document.getElementById('userName'),
userAge = document.getElementById('userAge');
firebase.database().ref('users/' + userName).set({
Name: userName,
Age: userAge
});
}
What about this?
var rootRef = Firebase('https://********.firebaseio.com');
var contactsRef = rootRef .child('users');
function addFB() {
contactsRef.child(userName)
.push({
userName: document.getElementById('userName').value,
userAge: document.getElementById('userAge').value
});
Name.value = '';
Age.value = '';
}

How do I get a input value on ExtJS 6.0

I wonder how do I get the input value from the form in ExtJS.
I have tried several ways "see comments", but none of them gave me a value, i get an error mostly - "undefined".
Another thing that is unclear is where is form name defined ?
Here's my code:
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'Convert Roman characters to Arabic',
height: 150,
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Enter Roman Character',
name: 'char'
}
],
buttons: [
{
text: 'Submit',
handler: function() {
//var form = formPanel.getForm();
//var value = form.findField('char');
//var form = this.up('form'); // get the form panel
//var value = Ext.getCmp('char').getValue();
// var field = Ext.getCmp('char');
Ext.Msg.alert('Success', "value");
}
}
]
});
});
In the end the application should alert the inputed value.
Thanks in Advance.
text: 'Submit',
handler: function(btn) {
Ext.Msg.alert('Success',btn.up('form').down('[name=char]').getValue());
//var form = formPanel.getForm();
//var value = form.findField('char');
//var form = this.up('form'); // get the form panel
//var value = Ext.getCmp('char').getValue();
// var field = Ext.getCmp('char');
There are multi ways to get value of char field.
1) To get value like this as you used, you have to give id property for this field :
{
fieldLabel: 'Enter Roman Character',
name: 'char',
id : 'char' // or give any name
}
now used below code to get value
var field = Ext.getCmp('char');
var value = field.getValue();
2) You can also use itemId property same :
{
fieldLabel: 'Enter Roman Character',
name: 'char',
itemId : 'char' // or give any name
}
now used below code to get value
var field = Ext.ComponentQuery.query('#char')[0];
var value = field.getValue();
3) another way, you can get value from form values;
var form = this.up('form'),
formValues = form.getForm().getValues();
charValue = formValues.char;

if statement is not returning expected result

If the user enters the string 'secret' in the password field, it should display the text in the last else statement. It is only returning the statement in the first else. Can someone explain why?
var pword = document.getElementById('password'); //create event listener on password field's blur event
pword.addEventListener('blur', passwordCheck, false);
var messageField = document.createElement('div');
messageField.setAttribute('id', 'forMessage');
var fieldPassword = document.getElementById('password');
//get form id to create parentNode for message field
var form = document.getElementById('form');
//append form to add message field div
form.appendChild(messageField);
//add message to messageField
var paragraph = document.createElement('p');
function passwordCheck(){ //check to make sure the password is equal to the string "secret"
if (fieldPassword !=='secret'){
var wrongPassword = document.createTextNode('That is not the right password');
paragraph.appendChild(wrongPassword);
messageField.appendChild(paragraph);
}else{
var correctPassword = document.createTextNode('Good... That is the right password');
paragraph.appendChild(correctPassword);
messageField.appendChild(paragraph);
console.log('made it');
}
}
fieldPassword is the input element, not the value, so try:
fieldPassword.value !== 'secret'
Instead of:
fieldPassword !== 'secret'
Look what you did:
var pword = document.getElementById('password');
then again
var fieldPassword = document.getElementById('password');
Why? - pword and fieldPassword are same objects.
Anyway, to the point. The expression fieldPassword !== 'secret' will always be true because fieldPassword is a DOM element, and not a string.
If you had something like <input type="password" id="password">, then you could get the clear password text from the value property of the input element.
What you probably want to do is in the line of if(fieldPassword.value !== 'secret')

dynamically check form field values javascript

Is it possible to check the form field values dynamically with javascript only.
For example if I have form field for username and when the user enters their chosen username it checks whether this username is available and pops up an alert box or shows a message on the screen based on the result.
all of this is done without clicking any button. and the data is stored in an array.
Thanks in advance. Im trying to achieve this only by using javascript.
var username = document.getElementById('username');
var goBtn = document.getElementById('check');
var output = document.getElementById('output');
var usernames = ['bob', 'sally', 'alice', 'roy', 'kate', 'phil'];
function showResult() {
output.innerHTML = usernames.join(', ');
}
function checkUsername() {
if (usernames.indexOf(username.value) < 0) {
usernames.push(username.value);
username.value = '';
} else {
alert('That username is already taken. Try again.');
}
showResult();
}
goBtn.onclick = checkUsername;
showResult();
<label for="username">Name:</label>
<input id="username" name="username" placeholder="username">
<button id="check">Go</button>
<div id="output"></div>
may be this is what you want
// usernameArray contains all the usernames that can't be used
var usernameArray = ['username1','username2','username3'];
// i'm using .kyup() method to get a dynamic result so whenever the user type a letter or
// something else (just one caracter) we check that value against our usernameArray list
$('#username').keyup(function(){
var value = $(this).val();
if(usernameArray.indexOf(value) >= 0){
alert('sorry, try another username ');
}else{
alert('good, you can use this username it is available');
}
});

Categories