I want to pre-fill the form with current user e-mail. Mainly to prevent it, so everyone could fill it in from their email address. Unfortunately, I can't achieve the expected result, and I'm not completely sure, why.
This is what I have:
Form.html:
<form id="myForm" class="p-2 border border-light rounded bg-light" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Sides</p>
<br>
<div id="message"></div>
<input type="text" id="RecId" name="RecId" value="" style="display: none">
<div class="form-group">
<label for="form_email" >Email</label>
<input type="email" class="form-control" id="form_email" name="form_email" placeholder="Email" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<input class="btn btn-secondary" type="reset" value="Reset">
</form>
Code.gs
/*CURRENT USER */
function getUserEmail() {
var userEmail = Session.getActiveUser().getEmail();
Logger.log(userEmail);
}
JavaScript.html
//active user
google.script.run.withSuccessHandler(currentuser).getUserEmail();
function currentuser(userEmail) {
document.getElementById('form_email').value = userEmail;
};
Unfortunately it does not work. Email field still displays only placeholder and nothing happens. Can you see what can be wrong? Thanks :)
To set the default value of an input element, use the value attribute.
<input type="text" value="default value">
I changed this part
var userEmail = Session.getActiveUser().getEmail();
to
var currentuser = Session.getActiveUser().getEmail();
and all occurrences of userEmail in the same way and it helped.
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 have a form where every email is registered with #scoops.com but every time i have to enter #scoops.com i want that user just enter email name and #scoops.com auto fill and it will also show at the end of input field ? here it is my code
<div class="form-group" autocomplete="off">
<label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
<input autocomplete="nope" type="text" name="email" id="email" class="form-control input-lg"
placeholder="Enter Email" name="name" required=""/>
<span id="error_email"></span>
#if($errors->has('email'))
<div class="alert alert-danger">
{{ $errors->first('email') }}
</div>
#endif
</div>
i want something like this
Since you use Bootstrap: Try to wrap your mail input into an Inputgroup.
And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.
<div class="input-group">
<input autocomplete="off" type="text" name="email" id="email" class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
<div class="input-group-append">
<span class="input-group-text">#scoops.com</span>
</div>
</div>
Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:
<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>
<script>
function submit(inputValue) {
const email = inputValue + "#scoops.com"
// insert here the code (like a POST request) to send the 'email' constant to wherever you want
}
</script>
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
I have search input. When I write a number to find something (this is an HTTP request) I have some results but my number from input disappeared. How can I leave it?
div class="control is-expanded">
<input
name="request_id"
class="input"
placeholder="Request ID"
/>
</div>
<div class="control">
<input type="submit" name="submit" class="button is-link" />
</div>
The HTTP request in on the beckent, which I didnt write. I do only frontend. Can I change this or not?
HTML:
<form method="post" action="" onSubmit="return saveComment();">
<input type="text" name="request_id" class="input" placeholder="Request ID from Furia" />
<input type="submit" name="submit" class="button is-link" />
</form>
JavaScript:
document.getElementById("request_id").value = localStorage.getItem("comment");
function saveComment() {
var comment = document.getElementById("request_id").value;
if (comment == "") {
alert("Please enter a comment in first!");
return false;
}
localStorage.setItem("comment", comment);
alert("Your comment has been saved!");
location.reload();
return false;
}
I am attempting to create an expandable form to create on/off instructions that a user can submit times for in pairings, so my HTML defaults with one pair and the user can use a button to add additional pairs, but when i submit the form angular is only reading the first pairing, can someone point out what I am missing here? Am I appending in the extra fields improperly?
HTML
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<!-- <input type="submit" ng-click="createRecipe(recipe)" value="Generate Recipe"> -->
</form>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
</div>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
JS:
app.controller('CreateRecipeController', ['$scope', '$location', '$routeParams', 'DashFactory', function($scope, $location, $routeParams, DashFactory){
console.log("entered Create Recipe controller");
var columnCount = 1;
$scope.addColumn = function addColumn(){
columnCount++;
console.log('attempting to create column');
var d = document.createElement("div");
d.className = "inputField";
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
var d2 = document.createElement("div");
d2.className = "form-group"
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"number");
i.setAttribute('ng-model',"recipe.on"+columnCount);
i.setAttribute('value',"");
var d3 = document.createElement("div");
d3.className = "form-group"
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"number");
s.setAttribute('ng-model',"recipe.oz"+columnCount);
s.setAttribute('value',"");
s.setAttribute('readonly','readonly')
var d4 = document.createElement("div");
d4.className = "form-group"
var t = document.createElement("input"); //input element, Submit button
t.setAttribute('type',"number");
t.setAttribute('ng-model',"recipe.off"+columnCount);
t.setAttribute('value',"");
d.appendChild(f);
f.appendChild(d2);
f.appendChild(d3);
f.appendChild(d4);
d2.appendChild(i);
d3.appendChild(s);
d4.appendChild(t)
document.getElementsByClassName('timingSelect')[0].appendChild(d);
}
$scope.createRecipe = function(recipe){
console.log('recieved recipe data', recipe);
DashFactory.createRecipe(recipe)
}
}
]);
Great - Just move all your buttons inside your form tag like the code below
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
</form>
</div>
And don't add another form when you append a new input field just add all your new inputs inside the existing form and try to submit it again - This might work
Thanks - Happy Coding !!