In the following code, I wanted the button "Add Lines" to:
run the function 'MoreRentals_fromSidebar' from code.gs in the SpreadsheetApp
then "google.script.host.close();" to close the sidebar
When I try to stack the commands, nothing happens. If I try to invoke the submitForm function to run the two commands, nothing happens (although I thought this was working last week and has now stopped).
Any suggestions would be appreciated.
<!DOCTYPE html>
<script>
function getDataFromHtml(idData) {
if (!idData)
idData = "mydata_htmlservice";
var dataEncoded = document.getElementById(idData).innerHTML;
var data = JSON.parse(atob(dataEncoded));
return data;
}
function initialize() {
var data = getDataFromHtml();
// I would have expected to be able to accept the two parameters but whichever is coded second does not get set.
//document.getElementById("myAgency").innerText = data.agency;
//document.getElementById("myRow").innerText = data.row;
// My workaround is to create the header of the sidebar to contain the agency and the line number
var arr = data.first.split("##");
document.getElementById('myTitle').innerText = arr[0]+"\n# line "+arr[1];
//alert(arr[0]+"\n\n"+arr[1]); // used for debugging
}
window.onload = initialize; //Note that there is no "()". It must be this way for this to work!
</script>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
//alert('in submitForm: '+document.getElementById("RentalLinesForm");
google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));
google.script.host.close();
}
</script>
</head>
<body>
<h1 id="myTitle" ></h1>
<form id="RentalLinesForm">
<label for="numLines">Number of lines to add</label>
<input type="text" id="numLines" name="numLines"><br><br>
<div>
<label for="location">Where to place the new lines:</label><br>
<input type="radio" id="above" name="location" value="above">
<label for="above">Above line</label><br>
<input type="radio" id="below" name="location" value="below">
<label for="below">Below line</label><br>
<input type="radio" id="bottom" name="location" value="bottom">
<label for="bottom">At bottom</label>
<br><br><input type="button" value="Add Lines" onclick="google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));">
<br><br><input type="button" value="DONE" onclick="google.script.host.close();">
</form>
</body>
</html>
Related
I am trying to write a simple Regex Checker function that takes the user input and checks it against certain criteria. Only problem is, I can't get the user input to be passed into the new variable to begin the checking.
Can someone help me understand why I'm not seeing the user input in the log? I just want to be able to see the user input in the console so I can continue writing the code I need. EDIT-I know it is set to ALERT at the moment and not console.log-
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
function regexChecker () {
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
Thanks in advance.
Just assign values of first and last inside the function cause these two lines invoke when the page loads so have null or empty string values. You must reassign them.
function regexChecker () {
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
I have a Google Apps Script web app which has a form attached, for example:
<form id="form">
<input type="range" min="0" max="3" name="mb1" value="0">
<input type="range" min="0" max="3" name="mb2" value="0">
<input type="range" min="0" max="3" name="mb3" value="0">
etc...
<input id="submit" type="submit" style="display: none" onclick="this.value='Submitting ...'; google.script.run.withSuccessHandler(formSubmitted) .writeForm(this.parentNode); return false;">
</form>
The Code.gs file has a writeForm(form) function, which can access the form input values like so:
var mb1 = form.mb1;
var mb2 = form.mb2;
etc...
However, this approach is inefficient with many such inputs (I have around 80). Much better would just be to get the values when they're being processed in a loop, like so:
for(var i = 0; i <= 80; i++) {
var formItemID = "mb"+i;
console.log(form.formItemID);
}
However, this of course does not work, as it looks for form inputs with the id "formItemID". I've taken a look at some functionality of the HTMLFormElements class which should be being sent, but Apps Script doesn't seem to implement this fully, and I can't find documentation of the form.ItemName property. Is there a way to achieve this functionality without calling for each form input separately?
You could always just loop through the form elements and get the input values. This will send an array to the server.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="form" name="form">
<input class="range" type="range" min="0" max="3" value="0">
<input class="range" type="range" min="0" max="3" value="0">
<input class="range" type="range" min="0" max="3" value="0">
<br>
<input id="button" type="button" onclick="onClick()">
</form>
<script>
function onClick() {
var form = document.getElementById("form");
var vals = [];
for( var i=0; i<form.elements.length; i++ ) {
if( form.elements[i].className === "range" ) {
vals.push(form.elements[i].value);
}
}
google.script.run.getForm(vals);
}
</script>
</body>
</html>
Server side, Your form is sent as a object with key as input name and value as input values. Your form will look like:
{
mb1:0,
mb2:1,
mb3:0
}
To access the values, You can use form.mb1 as you've used or form['mb1']. To use variables as keys, always use the bracket [] notation
for(var i = 0; i <= 80; i++) {
var formItemID = "mb"+i;
console.log(form[formItemID]);//Note bracket notation
}
Or without a for loop,
var valuesArr = Object.keys(form).map(function(key){return form[key];})
Alright I could use a small tip here:
I have a form with two buttons, one has to submit the form and the other one has to reset the complete form.
The text - field keeps its value after every submit, but I would like to clear it completely with the reset button
<form method="post">
<input type="text" name="text" value="Clear Me Please">
<button type="submit" name="submit">Submit</button>
<button type="reset" name="reset">Reset</button>
</form>
I have a input field, submit button and a reset button. Upon submiting the form the user input will be inserted as value, because I dont want to lose the input. Now, when I type something into the field I can reset the form as planed, but after submiting the value now stays as supposed, but pressing the reset button resets the input to the value.
Example: I type in "TEXT", press Reset, gets reseted to "". Type "TEXT2", press Submit, gets submited, put in as value, field has now "TEXT2" written in. Replace "TEXT2" with "TEXT3", press Reset, now field contains "TEXT2" instead of "". I hope this is explaination enough.
may a little bit more you have to do
But his may help-Using Jquery
Edited Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
document.getElementById("myForm").reset();
$('#input').attr("value", "");
});
});
</script>
</head>
<form id="myForm" method="post">
<input type="text" name="input" id="input" value="<?= $_POST['input'] ?>"><br>
<button type="submit">Submit</button>
<input type="button" id="btn" value="Reset">
</form>
Orginal Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
values= $('#fname').val();
document.getElementById("myForm").reset();
$('#fname').attr("placeholder", values);
});
});
</script>
<head>
<form id="myForm">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" id="btn" value="Reset form">
</form>
jsfiddle linkhere
I have a form where I have disabled the submit button. This button only gets enabled if I select a value of the dropdown. But I got a strange issue in IE and Chrome: if I press enter in the textbox, the form gets submitted (even though my submit button is disabled).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Form Submit</title>
</head>
<body>
<div>
<form method="post" action="/distributor-locations-global/index.html?qa=Y" >
<input type="hidden" value="" id="filter-url" name="filter_url">
<input type="hidden" value="SKF Distributor" id="filter_type" name="filter_type">
<input type="hidden" value="Y" id="filter_type" name="identifier">
<div class="field country-field full">
<select id="country" name="country" class="custom replaced" title="Sweden">
<option value="">Select location *</option>
<option value="1042">Albania</option>
<option value="1043">Algeria</option>
<option value="1064">Benin</option>
</select>
</div>
<div class="field zip-field full">
<input type="text" id="zip" name="zip" class="ui-disabled styled-text" >
</div>
<div class="button"><input type="submit" disabled="disabled" value="Show results" class="button styled-button"></div>
</form>
</div>
</body>
</html>
Submit button is not only way to submit the form, if you want to set some restrictions of form submit you have to use js function like this
add onsubmit="return validate();" in your form tag
e.g. <form method="post" action="/distributor-locations-global/index.html?qa=Y" onsubmit="return validate();">
add appropriate javascript function
<script>
function validate()
{
if (check_what_you_need_here==true) {
return true;
}
return false;
}
</script>
now each time form will be about to submit it will go to validate method, and only after it passes validation form will be send
you could disable the enter key on the form by using the below code in your header:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
So I wrote this code so that every time someone clicks the submit button, a javascript
function, called check, will see if the text area is empty. If it is not, then the form will be submitted.
This is my code. Why isn't it working?
<form method=post name='form_post' id='form_post' action='SUBMITIT.PHP'>
<textarea id=message name=message class=post onfocus=this.className='post_focus';
placeholder='Share your thoughts' maxlength=500></textarea>
<br>
<button onclick='check()' id=button name=button>Post</button>
</form>
<script type="text/javascript">
function check()
{
if(!document.textArea.message.value=="")
{
document.forms["form_post"].submit();
}
}
</script>
Thanks!
EDIT: I finally got it to work. Here's a template if you are having a similar problem.
<!--The form-->
<form action="mypage.php" method="post" name="myForm" id="myForm">
<textarea name=myTextArea id=myTextArea>
</textarea>
</form>
<br>
<button onclick='check()'>
Post
</button>
<!--The script that checks-->
<script type="text/javascript">
function check(){
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); };
var textAreaValue=document.getElementById('myTextArea').value;
var trimmedTextAreaValue=textAreaValue.trim();
if(trimmedTextAreaValue!="") {
document.forms["myForm"].submit();
}
}
</script>
The following woks, and it also wipes unnecessary spaces, the form will only submit when given a character
<form action="yourpage.php" method="post" onsubmit="return check(this)">
<textarea id="message"></textarea>
<input type="submit" value="Post" />
</form>
<script>
function check(form){
if (form.message.value.trim() == ""){
return false
}
}
</script>
This is the most simple way to do this, and the advised one.
You could simply add "required" to the textarea field in HTML.
Note: Although the question is quite old, I am adding the answer for the future references.