scope into variable - Javascript - javascript

I have a text box that passes the user input into a $scope. I need to pass this further along into a firebase query, but im having trouble getting the variable to register the input stored in $scope. Code:
$scope.array = [];
$scope.addListItem = function(quote){
$scope.array.unshift(quote);
console.log(quote)
this.customQuote = null;
};
var prefix = 'tags/'
var userInput = console.log($scope.array)
var search = prefix + userInput
firebase.database().ref('products').orderByChild(search).equalTo(true).once('value', function(products)
And the html:
<form ng-submit="addListItem(customQuote)" name="customQuoteForm">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="placeholder content" ng-model="customQuote" required>
</label>
<button class="button button-small" ng-disabled="customQuoteForm.$invalid">
Submit
</button>
</div>
</form>
Thanks in advance!

Whatever you name the model in the html, you need to name it in the javascript.
I see you named it ng-model="customQuote". So you should access it as $scope.customQuote in the javascript.
Also you are initializing the model as null. Don't do that, instead declare it like this:
$scope.customQuote = "";

Solved it by simply moving the variable and firebase query inside the function..
$scope.addListItem = function(quote){
$scope.array.unshift(quote);
console.log(quote)
var tag = quote
var text = 'tags/'
var search = text + tag
console.log(search)
firebase.database().ref('products').orderByChild(search).equalTo(true).once('value', function(products) {};

Related

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

How to take user's form input and use it for event element?

How do I take the input in the forms, and apply them to the events "Name" and "TheirName" ?
Tried various codes from users that didn't work.
I'm trying to get the inputs of "name" and "theirname" to apply to the elements with blanks (____) when I click the Fill Names button
function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", "Name");
document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", "Their Name");
document.getElementById("theirname").innerHTML = res;
}
<form>
<p>Name<br><input type="text" name="name">
<br>
</p>
<p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>
When you do str.replace("_____", "Name"); you're passing the literal string Name to the replace function when instead you want to get the value of the textbox. You can use document.querySelector() for that:
function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", document.querySelector('input[name="name"]').value);
document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", document.querySelector('input[name="theirname"]').value);
document.getElementById("theirname").innerHTML = res;
}
<form>
<p>Name<br><input type="text" name="name">
<br>
</p>
<p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>

How do I pass a dataset attribute dynamically using user input?

I have a text input box where a user inputs what data-* they want to look for in the DOM. I get this user input on a button click then do a little bit of parsing. How would I get the value of the entered text to be the final part of the HTMLElement.dataset selector?
//HTML for text input
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>
//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);
I have read this from MDN Developers but can't figure it out. It looks like you have to pass the data attribute in camel case but might not be able to do it via a variable?
Thanks in advance.
When you need to access an object property via a variable, you need to use array-bracket syntax.
In the example below, type "data-test" into the text box and then hit TAB.
// Get a reference to the input
var specificSelector = document.getElementById("specificSelector");
var a = document.getElementById("a"); // Test element
// Set up an event handler for when the data is changed and the
// input loses focus
specificSelector.addEventListener("change", function(){
// Extract the custom name portion of the data- attribute
var parsedSelector = specificSelector.value.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
// Pass the string (stored in the variable) into the dataset object
// of another element to look up the object key.
var aData = a.dataset[parsedSelector];
console.log("aData: ", aData);
});
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<div id="a" data-test="test2"></div>

Get value input form

I would like to retrieve the password value type for the display in the console.log .
I use a html form with ng-model="passwd" to retrieve the value.
And I then uses a controller with $scope.passwd=null; to retrieve the input field.
For now, $scope.passwd remains null in google chrome => Console
'use strict';
angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform){
$scope.passwd = null;
$scope.startSmartconfig = function(passwd){
var onSuccess = function(success){
$scope.passwd = passwd;
};
var onFail = function(){};
$ionicPlatform.ready(function(){
$window.cordova.plugins.Smartconfig.startSmartconfig(onSuccess, onFail, $scope.passwd);
console.log('Password = ' + $scope.passwd);
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="wifi_form" class="simple-form">
<div class="list input-fields">
<label class="item item-input" show-hide-container>
<span class="input-label">Password : </span>
<input type="password" name="password" ng-model="passwd" id="passwd" show-hide-input>
</label>
</div>
</form>
<div class="startWifi">
<button class="button button-full button-balanced" ng-click="startSmartconfig()">Start</button>
</div>
Someone an idea to edit the entered value ?
Thank you
Replace $scope.passwd = null; to $scope.passwd = '';
You are using ng-click="startSmartconfig()" and passing nothing but in controller, you have used $scope.startSmartconfig = function(passwd){ so this code will not work.
Set controller function to $scope.startSmartconfig = function(){ and another thing is angularjs is two way binding means when you add value in input text with ng-model="passwd", it also bind the textbox value to $scope.passwd.
I am not aware of $window.cordova thing but what I observed is you didn't pass passwd in ng-click="startSmartconfig()" in html and you are assigning the passwd to $scope.passwd which will be undefined.
And no need to pass passwd in function. You can directly get updated value in $scope.passwd

Pass Model to Controller to Change in Controller

Here is my situation, I have this HTML:
<input type="text" ng-model="inputModel" />
<div class="button-container">
<button type="button" ng-click="setValue(inputModel)"></button>
</div>
<input type="text" ng-model="inputModelTwo" />
<div class="button-container">
<button type="button" ng-click="setValue(inputModelTwo)"></button>
</div>
And my view controller:
$scope.setValue = function (valueToSet) {
valueToSet = "Some value.";
};
I need to be able to "connect" the input fields and their buttons and I'm doing this by having the respective button pass the respective input field's model to the controller to be modified. The problem is that when I click the button the function fires off and valueToSet is changed but the change isn't reflected back in the view! What am I missing?
If you are trying to dynamically pass in your models as a function parameter, you'll need to access a PROPERTY on the models by using dot notation.
Try defining the models in the controller like so:
$scope.inputModel = {};
$scope.inputModelTwo = {};
$scope.inputModel.text = 'hey';
$scope.inputModelTwo.text = 'ho';
Then pass in the entire model to the function as you were already doing.
Inside the function, alter the property that you desire (in this case 'text'), like so:
$scope.setValue = function (valueToSet) {
console.log(valueToSet);
valueToSet.text = "Some value.";
};
JSFiddle

Categories