i make registration form with html but when i click on button script don't work and data don't save to json file. function is work and there is alert on page but other part of code don't work why?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="submit" class="registerbtn" onclick="myFunction()">Register</button>
<script src = "script.js"></script>
</body>
</html>
function myFunction()
{
alert('work!!!')
const fs = require('fs');
var x = document.getElementById("email").value;
var y = document.getElementById("psw").value;
let student = {
name: 'dato',
password: 'rame',
};
let data = JSON.stringify(student);
fs.writeFileSync('data.json', data, finished);
function finished(err)
{
console.log('success');
}
}
Related
I'm trying to create a html pop up that will then populate a gsheet. I've basically used the same solution found here. For some strange reason though, it isn't working. When I click the submit button on the HTML pop up box after filling out all the data, it doesn't respond. I click, it doesn't close, append the data, or do anything.
The html pop up is created, but the Submit button doesn't work. I am almost sure that it is has something to do with the onClick method I am using.
Here is the code I am working with:
gs file
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('customerMenu.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Customer');
}
function customerAdd(customerForm) {
var ss = SpreadsheetApp.getActiveSpreadsheet;
var cus_db = ss.getSheetByName("customer_db");
cus_db.appendRow([" ", customerForm.name_1, customerForm.name_2, customerForm.phone, customerForm.age, customerForm.channel]);
return true;
}
html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<br>
<customerForm>
First Name:<br>
<input type="text" name="name_1">
<br>
Second Name:<br>
<input type="text" name="name_2">
<br>
Phone Number:<br>
<input type="text" name="phone">
<br>
Age:<br>
<input type="number" name="age">
<br>
How did they hear about us?:<br>
<input type="text" name="channel">
<br><br>
<input type="submit" value="Add Customer" class ="submit"
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.customerAdd(this.parentNode)" />
</customerForm>
</html>
I've scoured stackoverflow for almost every solution:
I am running two pop ups so I changed the function names based on the advice here
I tried to use the '''document.forms[0]''' method found here also didn't work
What am I missing?
onClick on Google Script working for HTML Form
GS:
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('ah2')
SpreadsheetApp.getUi().showModelessDialog(html, 'Add Customer');
}
function customerAdd(obj) {
var ss = SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet15');
sh.appendRow(["", obj.name_1, obj.name_2, obj.phone, obj.age, obj.channel]);
return true;
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form>
First Name:<br>
<input type="text" name="name_1" />
<br>
Second Name:<br>
<input type="text" name="name_2"/>
<br>
Phone Number:<br>
<input type="text" name="phone"/>
<br>
Age:<br>
<input type="number" name="age"/>
<br>
How did they hear about us?:<br>
<input type="text" name="channel"/>
<br><br>
<input type="button" value="Add Customer" onClick="addCust(this.parentNode);" />
</form>
<script>
function addCust(obj) {
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.customerAdd(obj);
}
</script>
</body>
</html>
Here I am having simple html angular form. I have three fields: Username, address and email.
I have added angular required attribute validations. This works well as expected.
But I have a requirement where when I hit Save I should only validate username and address but not email. And when I hit Submit I should validate only email.
<html ng-app="myApp">
<head>
<title>Form Demo</title>
<style>body{font-family:"Arial";background-color:#E2E2DC}</style>
</head>
<body ng-controller="AppController as ctrl">
<form name="loginform" >
UserName<input type="text" ng-model="ctrl.user.username" placeholder="Enter your name" required/><br/><br/>
Address<input type="text" ng-model="ctrl.user.address" placeholder="Enter your Address" required/><br/><br/>
Email<input type="text" ng-model="ctrl.user.email" placeholder="Enter your Email" required/><br/><br/>
<button ng-click='ctrl.submit()'>Save</button>
<button ng-click='ctrl.submit()'>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
angular.module('myApp', [])
.controller('AppController', [function() {
var self = this;
self.submit = function() {
console.log('Form is submitted with following user', self.user);
};
}]);
</script>
</body>
</html>
You could tweak your form based on what button you click make field required & optional on demand using ng-required directive
<form name="loginform" novalidate ng-submit="ctrl.submit(loginform)">
UserName
<input type="text" name="username" ng-model="ctrl.user.username" placeholder="Enter your name" ng-required="save"/>
<br/>
<br/> Address
<input type="text" name="address" ng-model="ctrl.user.address" placeholder="Enter your Address" ng-required="save"/>
<br/>
<br/> Email
<input type="email" name="email" ng-model="ctrl.user.email" ng-required="submit" placeholder="Enter your Email"/>
<br/>
<button ng-click="save=true;submit=false;">Save</button>
<button ng-click="submit=true;save=false;">Submit</button>
</form>
Demo Plunker
i try sample project which take some data in form in html file .. then pass it to spring service .. which return object successfully .. now i want to pass this object to another Html fie to Display
Form's Html File :
<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<title>Sign UP Page</title>
<script src="RigesterationController.js"></script>
</head>
<body >
<center>
<p>Enter Your User Name : <input type="text" , name="UserName" id ="UName" required /> </p>
<p>Enter Your Email : <input type="text" , name="Email" id ="email" required /> </p>
<p>Enter Your Password : <input type="password" , name="pass" id ="Pass" required/> </p>
<p>Choose Gender : <br> Male<input type="radio" name="gender" value="m" id="Gender" /> Female<input type="radio" name="gender" value="f" id="Gender"/> </p>
<p>Choose User Type :<br> Student<input type="radio" name="UserType" value="s" id="Utype" /> Teacher<input type="radio" name="UserType" value="t" id="Utype"/> </p>
<div ng-controller="SignUP">
<input type="button" name="signup" value="SignUP" ng-click="save()" />
</div>
</center>
</body>
</html>
RigesterationController.js file :
angular.module("phase2" , [])
.controller("SignUP" , function($scope , $http )
{
var dat ;
$scope.save = function() {
var email= document.getElementById("email").value;
var UName=document.getElementById("UName").value;
var Pass=document.getElementById("Pass").value;
var gender=document.getElementById("Gender").value;
var UserType=document.getElementById("Utype").value;
var Info ;
$http.get('http://localhost:8090/SignUp/'+email+'/'+UName+'/'+Pass+'/'+gender+'/'+UserType)
.then(function(response)
{
Info = response.data;
dat=Info ;
alert(dat.name) ;
window.location.href="http://localhost:8060/TheAngular_Project/StudentPage.html";
});
}
});
second Html file :
<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="RigesterationController.js"></script>
<head>
<title>Student Page</title>
</head>
<body>
<div ng-controller="SignUP">
<p><span class="name">Welcome {{dat.name}}</p>
</div>
</body>
</html>
now nothing appeared in dat.name in second html file ..
although .. in regestrationController.js ..I test dat.name in an allert and it appeared successfuly ..
thanks in advance
i found the answer by Wawy in this post..
[AngularJS - Passing data between pages
You need to create a service to be able to share data between controllers.
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
In your controller A:
myService.set(yourSharedData);
In your controller B:
$scope.desiredLocation = myService.get();
Remember to inject myService in the controllers by passing it as a parameter.
I'm trying to create an angularjs form with two fields, one text input and a select. By default, the text input is blank but the select should have a value (the first element on the select). I'm following the angularjs form docs and using a master object which on reset is copied into the page's model. Here's the thing, if I set the select to something by default it comes blank. If I do the same with the text field it displays the default value. Below you'll find my code and here's a plunker. I think it might have to do with the copy being made on the reset function but I'm printing the object to the console at that point and it looks like it's being copied. If I try to do this without the master stuff, just setting it straight to the user and not calling reset it works ok.
controller
(function(angular) {
'use strict';
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.businessUnits = [{"businessUnitId":1,"name":"Auto"},{"businessUnitId":2,"name":"Life"},{"businessUnitId":3,"name":"Health"},{"businessUnitId":4,"name":"Surety"},{"businessUnitId":5,"name":"Finance"},{"businessUnitId":6,"name":"Dwelling"}];
$scope.master.businessUnit = $scope.businessUnits[0];
$scope.master.name = "John";
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
console.debug($scope.user.businessUnit);
};
$scope.reset();
}]);
})(window.angular);
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example33-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required="" />
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
<select class="form-control" ng-model="user.businessUnit" ng-options="unit as unit.name for unit in businessUnits" required></select>
Gender:
<input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female
<br />
<input type="checkbox" ng-model="user.agree" name="userAgree" required="" />
I agree:
<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" />
<br />
<div ng-show="form.$submitted || form.userAgree.$touched">
<div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
</div>
<input type="button" ng-click="reset(form)" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
</body>
</html>
Add the following code to your <select>
ng-init="user.businessUnit = businessUnits[0]"
It should look like this:
<select class="form-control" ng-model="user.businessUnit" ng-init="user.businessUnit = businessUnits[0]" ng-options="unit as unit.name for unit in businessUnits" required></select>
I use HTMLServices with google.script.run calls with form in args and i try to get the image from my form input file field and store it in my drive.
I get the value of all the fields correctly except the photodata field.
photodata contain the string "FileUpload" instead of a blob.
I have tested with .getBlob for the same result.
Server Side :
function setUsager(form) {
var blob = form.photodata;
Logger.log(Utilities.jsonStingify(blob);
DriveApp.getFolderById('0B2DdOMvW2Q84N0s4a21LM05wbms').createFile(form.usagerId,blob);
obj = new {};
obj.photo = file.getUrl();
return obj;
}
on click Handler
function onUsagerEditFormSubmit() {
loading(true);
var form = this.parentNode;
google.script.run.withSuccessHandler(showUsager)
.withFailureHandler(showError)
.setUsager(form);
}
And the form :
<form name="usager-edit" id="usager-edit" method='post' enctype="multipart/form-data">
<div class="hidden">
<input type="text" name="type" id="type" value="USAGER" readonly="readonly" />
<input type="text" name="usagerId" id="usagerId" readonly="readonly" />
</div>
<div class="field-container">
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">
</div>
<div class="field-container">
<label for="prenom">Prenom</label>
<input type="text" name="prenom" id="prenom">
</div>
<div class="field-container">
<label for="photo">Photo</label>
<input class="file" type="file" name="photodata" id="photodata" accept='image/*'>
<div id="prev-photo" name="prev-photo"></div>
<div class="clear"></div>
</div>
<input class="myButton" onClick="onUsagerEditFormSubmit" type="button" name="save" id="save-button" value="Sauvegarder" />
</form>
You are using the wrong createFile method overload.
You are using createFile(name, content), when you should use createFile(blob).
...
var file = DriveApp.getFolderById('****************************').createFile(blob);
...
You must define file in order to make: obj.photo = file.getUrl();.
Also you can change the following:
...
<input class="myButton" onClick="onUsagerEditFormSubmit" type="button" name="save" id="save-button" value="Sauvegarder" />
...
by:
...
<input class="myButton" onClick="onUsagerEditFormSubmit(this.parentNode)" type="button" name="save" id="save-button" value="Sauvegarder" />
...
and
function onUsagerEditFormSubmit() {
loading(true);
var form = this.parentNode;
google.script.run.withSuccessHandler(showUsager)
.withFailureHandler(showError)
.setUsager(form);
}
by:
function onUsagerEditFormSubmit(form) {
loading(true);
google.script.run.withSuccessHandler(showUsager)
.withFailureHandler(showError)
.setUsager(form);
}
Slight changes:
...
Logger.log(Utilities.jsonStingify(blob);
...
obj = new {};
...
by:
...
Logger.log(Utilities.jsonStringify(blob));
...
var obj = {};
...