I have an AngularJS form, I have the restriction of not editing the already developed code, Now I have to add pre-populated default values to each field of the form.
I am trying to select form with
var x = $(".form-group");
Loop through the form for each child elements
var x = $(".form-group")
$(x).each((index, value) => console.log(value.children))
I will put default values to an array
var defaulttext = ["a", "b", "c", "d", "e", "f"];
then assign values to fields as
$(value.children).val(value);
Below is the full code:
var x = $(".form-group");
var defaulttext = ["yogeesh", "yogeesh#gmail.com", "88616649678"];
$(x).each(defaulttext , function (index, value){
$(element.children).val(defaulttext[index]);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="inputdefault">Name</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Email ID</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<div class="form-group">
<label for="inputlg">Phone Number</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
</div>
</body>
</html>
But I am getting an error in the console as:
b.apply is not a function
It looks like you're trying to mix two things:
$(x).each(callback)
which iterates over the DOM elements in $(x), and
$.each(defaulttext, callback)
which iterates over the array. You can't do them both in one call.
$(x).each() just takes one argument, a callback function. You can't put defaulttext in there before the function, it will try to use that array as the callback.
However, the first argument to the callback is an index, so you can use that to refer to the other thing you want to access.
var x = $(".form-group");
var defaulttext = ["yogeesh", "yogeesh#gmail.com", "88616649678"];
$(x).each(function(index, value) {
$(value).children().val(defaulttext[index]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="inputdefault">Name</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Email ID</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<div class="form-group">
<label for="inputlg">Phone Number</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
Also, children is a jQuery method, so you should call it on the result of $(element), not inside the call.
And you don't need to write $(x). x is already a jQuery object, you don't need to call $() again, that will just make a new copy of the object.
Related
I'm trying to create a user input where the user can choose a stock Symbol, a Start Date, End Date and Interval. I would then like for this information to be passed along the javascript function api to retrieve information about that specific stock such as open, high, low, close, etc. The javascript function is working when I call the api function, but I'm not sure if I'm using the right code on HTML to use the user input and then passing this input onto the api() function on javascript once the user presses the "Execute" button
Javascript:
import yahooFinance from 'yahoo-finance2';
let symbolNew = document.getElementById("symbol").value;
let periodStart = document.getElementById("period1").value;
let periodEnd = document.getElementById("period2").value;
let intervalNew = document.getElementById("interval").value;
async function api(symbol, start, end, val) {
const query = String(symbol);
const queryOptions = { period1: new Date(start), period2: new Date(end), interval: String(val) };
let result = await yahooFinance.historical(query, queryOptions);
let resultWithSymbol = result.map((item) => ({ ...item, symbol: query })); //... is called the spread operator - it concatonates things
console.log(resultWithSymbol);
return resultWithSymbol;
};
api(symbolNew, periodStart, periodEnd, intervalNew);
HTML:
<!DOCTYPE html><p>API</p>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="../dist/bundle.js"></script>
<title>Document</title>
</head>
<body>
<div class="symbol">
<p id="symbol"></p>
<label for="name">Symbol (4 characters):</label>
<input type="text" id="symbol" name="symbol" required
minlength="4" maxlength="4" size="10" placeholder="Exemplo: TSLA">
</div>
<div class="interval">
<label for="name">Interval: (1d, 1wk or 1mo):</label>
<input type="text" id="interval" name="interval" required
minlength="2" maxlength="3" size="10" placeholder="Exemplo: 1d">
</div>
<div class="period1">
<label for="name">Start Date:</label>
<input type="text" id="period1" name="period1" required
minlength="10" maxlength="10" size="20" placeholder="Exemplo: 2021-08-20">
</div>
<div class="period2">
<label for="name">End Date:</label>
<input type="text" id="period2" name="period2" required
minlength="10" maxlength="10" size="20" placeholder="Exemplo: 2021-08-25">
</div>
<div class="button">
<input type="button" name="buttonExecute" value="Execute" onclick="api(document.getElementById('symbol'),document.getElementById('period1'),document.getElementById('period2'),document.getElementById('interval'))"></input>
</div>
</body>
</html>
I'm aware that Node js doesn't recogniz "document." so I'll be using Webpack or Bable to get the input of the api() function onto the HTML
Thank you in advance
'value' (document.getElementById('symbol').value;) is missing in the HTML onclick event.
I am trying to create a simple form using Javascript, but I am facing an issue while trying to display somethings on the console. The issue here is that whenever I click on the submit button, Nothing is displayed on the console despite giving the command e.preventdefault(). At present I want the text Hello to be displayed on console when it satisfies the condition, but even though the condition is satisfied, nothing is displayed.
Herewith attaching the Javascript and HTML code for the same
const passlength = 10;
const firstname = document.getElementById("firstname");
const lastname = document.getElementById("lastname");
const emailid = document.getElementById("emailid");
const password = document.getElementById("pass");
const confirmpassword = document.getElementById("passconfirm");
const phonenumber = document.getElementById("phno");
const form = document.querySelector(".mainform");
function testfunc() {
console.log(type(emailid));
}
function checkpass(pass) {
if (pass>=passlength) {
console.log("Hello");
}
else{
console.log("Out");
}
}
form.addEventListener('submit',function(e){
e.preventDefault();
checkpass(password);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register with us</title>
</head>
<body>
<div class="mainform">
<form>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname"><br>
<label for="emailid">Email ID:</label>
<input type="email" id="emailid" name="emailid"><br>
<label for="pass">Enter password:</label>
<input type="password" id="pass" name="pass"> <br>
<label for="passconfirm">Confirm password:</label>
<input type="password" id="passconfirm" name="passconfirm"> <br>
<label for="phno">Phone number:</label>
<input type="number" id="phno" name="phno">
<br> <br>
<input type="submit" value="Submit" id="submit">
</form>
</div>
</body>
</html>
The problem is in your If statement. You are comparing a number with an HTML element. You still need these two.
.value returns the value of the html element
https://www.w3schools.com/jsref/prop_text_value.asp
.length returns the length of a string
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/length
This is how you compare two numbers, as you intended.
So your new IF condition must be:
(pass.value.length>=passlength)
I'm new to coding and I wanted to make data entry more uniform in my worplace. And so I have been trying to create a html form in a sidebar and submit the resulting data to a speadsheet.
I have my form and my sidebar working but no matter what I try or which tutorial I follow I can't seem to wrap my head around how to get the data from the html form to my spreadsheet.
Here is the .gs
function onOpen(){
SpreadsheetApp.getUi()
.createMenu('Menu CFC')
.addItem('Ajout','showSidebar')
.addToUi();
showSidebar();
}
function showSidebar(){
var html = HtmlService.createHtmlOutputFromFile('menuCFC')
.setTitle('Mon menu CFC')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function formCFCSubmit(form_data){
var sheet = spreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.([form_data.nom,form_data.numéro])
}
and here is a simplified version of my html form for testing purpose.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form name="formAjoutCFC">
<div class ="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class ="block form-group">
<label for="Numéro">Numéro</label>
<input type="text" name="numéro" id="numéro" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div calss="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC").addEventListener("submit", //not sure about the #
function(e)
{
e.preventDefault();
google.script.run.formCFCSubmit(this);
);
</script>
</body>
</html>
Any help would be welcome as I'm out of my depth at the moment ^^
You are doing all right #Lugh, very close to your goal indeed. But you need to take care of some things:
Your showSideBar function is alright too.
On your formCFCSubmit(form_data) you have errors:
The class you want to call from is SpreadsheetApp not (s)preadsheetApp.
sheet.([form_data.nom,form_data.numéro]) is not an existing method.
// For testing purposes, you can paste the data in ranges "A1" and "B1" for example:
function formCFCSubmit(form_data){
var sheet = SpreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.getRange('A1').setValue(form_data.nom);
sheet.getRange('B1').setValue(form_data.numero);
// Notice accent removed from numero!
// Putting accents in code will give you headaches sooner than later...
}
On your menuCFC.html:
Here is where most of your trouble is coming from...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<!-- Notice 'id'! That's what the # in the query selector is referencing. Not name -->
<form id="formAjoutCFC">
<div class="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class="block form-group">
<label for="Numero">Numéro</label>
<input type="text" name="numero" id="numero" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div class="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC")
.addEventListener(
"submit",
function(e) {
e.preventDefault();
google.script.run.formCFCSubmit(this);
}
);
</script>
</body>
</html>
Now the script in your sidebar, can get the form by id, and when submitted execute the formCFCSubmit function that does what you want it to with form_data.
Keep on coding!
Notes:
You should read official documentation now that you are into coding.
Read about the SpreadsheetsApp class from Apps Script's Spreadsheet service to find out which functions you can use to tailor to your need.
I have the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.
<script>
window.onload = function(){
var val = document.getElementById('value1').innerHTML;
document.getElementById('result').innerHTML = val;
};
</script>
Any ideas?
You have to use .value property of the input field instead of innerHTML. so it would be:
var val = document.getElementById('value1').value;
and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.
You can try adding a button with onClick event to execute this function in place of using window.onload
HTML controls you are working on are textboxes, so they have a value property, not innerHTML.
Use this:
var val = document.getElementById('value1').value;
document.getElementById('result').value= val;
You can't get the value of an input element using the innerHTML attribute. Use value instead:
var val = documento.getElementById('value1').value;
Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.
The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<button onclick="printOutput()">Click</button>
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
Then in your script.js you would have,
function printOutput(){
var val = document.getElementById('value1').value;
document.getElementById('result').innerHTML = val;
}
when the submit is clicked to put that value in the output
You have chosen wrong event window.onload, also you need .value instead of .innerHTML
Option 1: using jQuery, as you already have the import
$(function() {
$('input[type="submit"]').on('click', function(e) {
$('#result').val($('#value1').val());
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
Option 2: using plain js
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
document.querySelector('#result').value = document.querySelector('#value1').value;
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
<script>
$( document ).ready(function() {
setTimeout(function(){
var val = document.getElementById('value1').innerHTML;
var generateHere = document.getElementById("result");
generateHere.innerHTML = val;
}, 2000);
});
</script>
I have the following application and have been having issues on getting the application to display the object values beside the form. Its showing the divs and styles correctly but no values. Anyone see why that could be?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Employee Directory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/application.css">
<script src="js/angular.min.js"></script>
<script src="js/application.js"></script>
<script src="js/dataService.js"></script>
</head>
<body ng-app="MyApp">
<div class="container">
<h1>Employee Directory</h1>
<hr>
<div id="form-container">
<h3>Add an Entry</h2>
<form role="form">
<div class="form-group">
<label for="name">Employee:</label>
<input type="text" name="name" class="form-control" ng-model="employeeName">
</div>
<div class="form-group">
<label for="name">Street:</label>
<input type="text" name="street" class="form-control" ng-model="employeeStreet">
</div>
<div class="form-group">
<label for="name">City:</label>
<input type="text" name="name" class="form-control" ng-model="employeeCity">
</div>
<div class="form-group">
<label for="name">State:</label>
<input type="text" name="state" class="form-control" ng-model="employeeState">
</div>
<div class="form-group">
<label for="name">Zip Code:</label>
<input type="text" name="zipcode" class="form-control" ng-model="employeeZipCode">
</div>
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
</form>
</div>
<div id="employee-list">
<div ng-repeat"employee in employeesArray" class="employee">
<div class="employee-header">
<span class="glyphicon glyphicon-user"></span><strong>{{employee.employeeName}}</strong><button ng-click="deleteName()" class="cancel">X</button>
</div>
<div class="employee-footer">
<address>
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
</address>
</div>
</div>
</div>
</div>
</body>
</html>
application.js
angular.module("MyApp", []).controller("DBController", function ($scope, dataService) {
$scope.employeeName;
$scope.employeeStreet;
$scope.employeeCity;
$scope.employeeState;
$scope.employeeZipCode;
$scope.employeesArray = dataService.getEmployees();
$scope.addEmployee = function() {
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
}
$scope.deleteEmployee = function(deletedEmployee) {
dataService.removeEmployee(deletedEmployee);
} });
dataService.js
angular.module("MyApp").service("dataService", function() {
var employeesArray = [{employeeName:'Joe Smith', employeeStreet:'12345 West 123nd Terrace', employeeCity:'Canton', employeeState:'Ohio', employeeZipCode:'12345'}];
this.getEmployees = function() {
return employeesArray;
}
this.addEmployee = function(employee) {
employeesArray.push(employee);
}
this.removeEmployee = function(employee) {
employeesArray.splice(employeesArray.indexOf(), 1);
}
});
Couple of things wrong in your code. First:
<body ng-app="MyApp">
bootstraps your view with the MyApp module, but you have no controller declarations, so your controller code isn't running. Change it to:
<body ng-app="MyApp" ng-controller="DBController">
Second,
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
is wrong, because your controller doesn't declare a scope function called addName. It's addEmployee, so the correct code is:
<input type="submit" ng-click="addEmployee()" class="btn btn-default btn-primary" value="Add Entry">
Finally,
<div ng-repeat"employee in employeesArray" class="employee">
is missing an equals sign. The correct code is:
<div ng-repeat="employee in employeesArray" class="employee">
With those three things corrected, you'll start to see some results (check out this plunk to see them right away).
Edit:
The next problems in your code are here:
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
Because you're manipulating the employeesArray by calling push and then calling addEmployee with the result of the push. This is a problem, because your getEmployees call returns a reference to the array, and what you are manipulating in the push call is in fact the internal state of DataService. Hence the duplicate effect. Instead, if you do this:
var employee = {
"employeeName": $scope.employeeName,
"employeeStreet": $scope.employeeStreet,
"employeeCity": $scope.employeeCity,
"employeeState": $scope.employeeState,
"employeeZipCode": $scope.employeeZipCode
};
dataService.addEmployee(employee);
you'll rid yourself of the duplicate record. Finally, your bindings in the ng-repeat look like this:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
note that the last two bindings don't reference the employee in your ng-repeat, but instead refer to the ng-models in the parent scope. Change that to:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}