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>
Related
I am really new to google script and HTML and I am trying to create a program that accepts multiple inputs from a user using a HTML form, and when the user clicks submit, the data is stored inside a variable and can be used inside a .gs file from a .html . I have gotten the form to work but whenever I clicked "Submit" nothing occurs. After some troubleshooting, I think the problem is at my form_data() function. What I would like to know is how to compile the data inputs from the form and send it to my runsies() fucntion. Thank you in advance! Here is my HTML code below:
const ui = SpreadsheetApp.getUi();
function onOpen() {
ui.createAddonMenu()
.addItem('New Entry', 'newEntry')
.addToUi();
};
function newEntry() {
var html = HtmlService.createHtmlOutputFromFile("input")
.setWidth(750)
.setHeight(550);
//Display the dialog
var dialog = ui.showModalDialog(html, "External Organisations");
};
function runsies(info){
//Display the values submitted from the dialog box in the Logger.
Logger.log(info);
};
<html>
<head>
<!--Set the font of the form-->
<style>
body {font-family:Courier;}
</style>
</head>
<!--Main body design of the form-->
<body>
<!--Create text boxes for user input-->
<form action="" method="get" class="form-example">
</script>
<div class="form-example">
<label for="name"><b>Organisation: </b></label><br>
<input type="text" name="name" id= "txt1" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="email"><b>Email: </b></label><br>
<input type="text" name="email" id="txt2" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="phone"><b>Phone: </b></label><br>
<input type="text" name="phone" id="txt3" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="poc"><b>Point of Contact: </b></label><br>
<input type="text" name="poc" id="txt4" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="susmi"><b>SUSMI Contact: <b></label><br>
<input type="text" name="susmi" id="txt5" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="stats"><b>Status: <b></label><br>
<input type="text" name="stats" id="txt6" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="note"><b>Notes: </b><br><textarea rows="5" cols="50" id="multiLineInput" style="border:2px solid black;border-radius:3px">
</textarea></label><br><br>
</div>
<input type="button" value="Submit" onclick="form_data()">
<input type="button" value="Close" onclick="google.script.host.close()" />
<!--Once user clicks submit, compile info and send it to main .gs code-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function form_data(){
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
google.script.run.withSuccessHandler().runsies(info);
closeIt()
};
function closeIt(){
google.script.host.close()
};
</form>
</body>
</html>```
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
Your array is just a bunch of element id's if you want the data use `document.getElementById().value for the text boxes
Read about client to server communication google.script.run
javascript reference
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 have a sitekey and I want to reproduce the captcha locally. However, when I open the html it says invalid domain for sitekey.
this is the code in my html file:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="you cannot see this link">
<input type="text" placeholder="productcode_size" name="pid">
<input type="text" placeholder="productcode" name="masterPid">
<input type="hidden" value="1" name="Quantity">
<input type="hidden" value="" name="x-PrdRtt" id="captcha_val">
<input type="hidden" value="Add To Bag overlay" name="layer">
<input type="hidden" name="ajax" value="true">
<br>
<br>
<br>
<br>
<div style="opacity: 0.3" class="g-recaptcha" data-sitekey="you cannot see this sitekey"></div>
<br>
<div class="contionue-shopping-wrapper">
<form class="co-formcontinueshopping" action="You cannot see this link" method="post" id="dwfrm_cart_d0ffhvzsobkp">
<fieldset>
<button class="rbk-button-red button-primary bp-black right" type="submit" value="Continue Shopping" name="dwfrm_cart_continueShopping">
<span>Continue Shopping</span>
</button>
</fieldset>
</form>
</div>
</form>
<script>
check = setInterval(function() {
v = document.getElementById('g-recaptcha-response').value
if (v.length > 0) {
var r = '&x-PrdRtt='+v+'"">ATC Link</a>';
document.getElementById('captcha_val').value = v
var sz = document.getElementById('sz').value;
var pid = '?ajax=true&pid='+sz;
document.getElementById('hack').innerHTML = '<a href="'+document.forms[0].action+pid+r;
clearInterval(check);
}
}, 400)
</script>
</body>
</html>
Please can someone help me fix this? I want to be able to complete the captcha locally to extract the captcha response.
According to this page https://developers.google.com/recaptcha/docs/start
If you would like to use "localhost" for development,
you must add it to the list of domains.
so simply add "localhost" (or "127.0.0.1") , that should work for you.
I have dynamically populated value coming from an external js file. The value is working just fine when I call it in the HTML page but I'm stuck on how to have an input field display this value.
Here is my HTML:
<form action="../mail.php" method="POST" class="location-form">
<div class="device-details">
<h2>Device: iPhone5</h2>
<h2>Repair Cost: <span id="result">0</span></h2>
</div>
<input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
<input name="cost" type="hidden" id="cost" value="" maxlength="20">
<div class="submit-btn">
<input type="submit" value="Submit Request" />
</div>
</form>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("sum");
</script>
at the top, in the div "device-details", the h2 "repair cost" is populating the value just fine, no issues. But I cannot seem to populate the last input with this value.
<input name="cost" type="hidden" id="cost" value="(need the value here)" maxlength="20">
I need the value of the input field to mimic the value of the repair cost at the top in order to send that value to an email address.
I've tried inserting the following into the value and it didn't work
value="<span id='result'>0</span>"
I've tried creating a variable in php and then putting the variable into the value field, and it did not work
<?php
$my_var = '<span id="result">0</span>';
?>
value="<?php echo '$my_var'); ?>"
I've also tried:
value="<?php echo htmlspecialchars($my_var); ?>"
these last two just returned the actual HTML code
<span id="result"></span>
instead of the populated value.
Try this one.
<!DOCTYPE html>
<html>
<body onload="abc()">
<form action="../mail.php" method="POST" class="location-form">
<div class="device-details">
<h2>Device: iPhone5</h2>
<h2>Repair Cost: <span id="result">0</span></h2>
</div>
<input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
<input name="cost" type="hidden" id="cost" value="" maxlength="20">
<div class="submit-btn">
<input type="submit" value="Submit Request" />
</div>
</form>
<script>
function abc(){
document.getElementById("result").innerHTML=localStorage.getItem("sum");
document.getElementById("cost").value = localStorage.getItem("sum");
}
</script>
</body>
</html>