I created a Custom Dialog Window in Google Spreadsheet using Google App Script that looks like this:
How do I get the data from the window to my spreadsheet.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="google.script.run.testing143()">
Task Number:<br>
<input type="text" name="taskNumber" value="">
<br><br>
Task Date:<br>
<input type="text" name="taskDate" value="">
<br><br>
Customer Name:<br>
<input type="text" name="customerName" value="">
<br><br>
Customer Site:<br>
<input type="text" name="customerSite" value="">
<br><br>
<select>
<option value="status">Status</option>
<option value="complete">Complete</option>
<option value="scheduled">Scheduled</option>
<option value="reschedule">Reschedule</option>
</select>
<br><br>
Status Date:<br>
<input type="text" name="statusDAte" value="">
<br><br>
Location:<br>
<input type="text" name="location" value="">
<br><br>
Description:<br>
<input type="text" name="description" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function testing143(){
Logger.log('With Success') ///Doesn't work
var lmnt = document.getElementByName('usrname'); //Wrong
}
</script>
</body>
</html>
When I click 'submit' it takes me to an error 400 page.
I can create a function that takes the data as a parameter like:
function getNewTask(number,date,status...)
Can I use document.getElement ? If so how is that done?
Your help is sincerely appreciated!
I've taken your code and modified to work.
In Code.gs
function testing143(obj) {
Logger.log(obj);
return "hello";
}
In HTML file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm">
Task Number:<br>
<input type="text" name="taskNumber" value="">
<br><br>
Task Date:<br>
<input type="text" name="taskDate" value="">
<br><br>
Customer Name:<br>
<input type="text" name="customerName" value="">
<br><br>
Customer Site:<br>
<input type="text" name="customerSite" value="">
<br><br>
<select name="status">
<option value="status">Status</option>
<option value="complete">Complete</option>
<option value="scheduled">Scheduled</option>
<option value="reschedule">Reschedule</option>
</select>
<br><br>
Status Date:<br>
<input type="text" name="statusDate" value="">
<br><br>
Location:<br>
<input type="text" name="location" value="">
<br><br>
Description:<br>
<input type="text" name="description" value="">
<br><br>
<input type="button" value="Submit" onclick="testing143()">
</form>
<script>
function success(msg) {
alert(msg);
}
function testing143(){
var form = document.getElementById("myForm").elements;
var obj ={};
for(var i = 0 ; i < form.length ; i++){
var item = form.item(i);
obj[item.name] = item.value;
}
google.script.run.withSuccessHandler(success).testing143(obj);
}
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<form action="" method="post">
{% csrf_token %}
<label for="from_date">From Date:</label>
<input type="date" id="from_date" name="from_date" value="getDate()">
<label for="to_date">To Date:</label>
<input type="date" id="to_date" name="to_date" value="getDate()">
<input type="submit"> 
<input type="checkbox" name="new_records" value="new_records" checked>
<label for="new_records"> New Records</label> 
<input type="checkbox" name="error_records" value="error_records" checked>
<label for="error_records"> Error Records</label><br><br>
<label for="field">Choose your required field:</label>
<select name="field" id="field">
<option value="">--Please choose an option--</option>
<option value="started">Started</option>
<option value="completed">Completed</option>
</select>
</form>
<script>
function getDate(){
document.getElementById('from_date').value = new Date().toDateInputValue();
}
</script>
</body>
</html>
I have used javascript document.getElementById('datePicker').value = new Date().toDateInputValue(); to get todays value and called the function in form value value="getDate()". But I didnt get result. Is there any solution my date format is dd/mm/yyyy
There are multiple ways to do this (See: How to set input type date's default value to today?) but in order to make your example work with the minimum of changes I suggest the following.
var datePickers = document.querySelectorAll("input[type=date]"), i;
for (i = 0; i < datePickers.length; ++i) {
datePickers[i].valueAsDate = new Date();
}
<form action="" method="post">
{% csrf_token %}
<label for="from_date">From Date:</label>
<input type="date" id="from_date" name="from_date">
<label for="to_date">To Date:</label>
<input type="date" id="to_date" name="to_date">
<input type="submit"> 
<input type="checkbox" name="new_records" value="new_records" checked>
<label for="new_records"> New Records</label> 
<input type="checkbox" name="error_records" value="error_records" checked>
<label for="error_records"> Error Records</label><br><br>
<label for="field">Choose your required field:</label>
<select name="field" id="field">
<option value="">--Please choose an option--</option>
<option value="started">Started</option>
<option value="completed">Completed</option>
</select>
</form>
<!DOCTYPE html>
<html>
<body>
<form action="" method="post" enctype="text/plain">
IP Address:<br>
<input type="text" name="" placeholder=""><br>
Port:<br>
<input type="text" name="" placeholder=""><br>
Game:<br>
<input type="text" name="" placeholder="" ><br>
Type:<br>
<input type="option" name="Type" size="50"><br><br>
<select name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
I want to send this to mail when I write the right action="mailto:....." I can send only the input things, but not select tag selected option i tried any of this things separately it works but when i wanna do this with one button it doesn't works...
you can use in your HTML somthing like this :
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="email" name="email" placeholder="Email" id="Email"><br>
<input type="text" name="titre" placeholder="Title" id="Title"><br>
<textarea name="content" placeholder="Content" id="Content"></textarea><br>
<button id="send">send</button>
Now using jquery add this :
$("#send").click(function(){
var email=$('#Email').val();
var title=$('#Title').val();
var content=$('#Content').val();
document.location.href = "mailto:"+email+"?subject="+title+"&body="+content;
});
for the options tag in your select you have to know that you can only send the selected value from options inside the select tag
hope this will help you.
I am new to html coding and trying to explore html without any webservers help.
I have 2 html pages placed in a directory named 1.html and 2.html
1.html is
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="POST">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>
</body>
</html>
and
2.html is
<!DOCTYPE html>
<html>
<body>
<form action="1.html" method="POST">
First name:<br>
<input type="text" id="firstname" name="firstname">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>
</body>
</html>
I need to know, what mechanism can I use to transfer data from 1.html into 2.html without using any webserver.
means,
if I need to display firstname from 1.html into 2.html,
undersection
<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>
what code should I write?
try this one
1.html
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey" >
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse" >
<br><br>
<input type="Submit" value="Submit" >
</form>
<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="GET">
First name:<br>
<input type="text" id="firstname" name="firstname" value="">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var query = window.location.search.substring(1);
var vars = query.split("&");
var pair ="";
for (var i=0;i<vars.length;i++) {
pair = pair + vars[i].split("=")+",";
}
var arr=pair.split(",");
document.getElementById('firstname').value = arr[1];
document.getElementById('lastname').value = arr[3];
};
</script>
In my html I have a combo box which list all the available usertypes and then the input varies by what the user selects on the combo box so you can see that I have my onchange.
But my question is how would I be able to access the value of the selected combo box? Is it possible to get its selected value even it is not a part of the form? I've already tried to have only one form that is
<form action="" name="form1" method="post">
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
<div id="formpage_Chairperson" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
But when I clicked the Submit Form nothing happens. You can see that I'm choosing only what to display because different usertypes (e.g. Chairperson, Dean, etc) have also different inputs. So I make different forms for each particular usertypes. But then it throws an error ' Undefined index: usertype ' and I know that is because it's not part of the form.
So can you give me some advice on how will I be able to come up with this properly? Thank you.
Here is my html code:
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<form action="" name="form1" method="post">
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
<form action="" name="form1" method="post">
<div id="formpage_Dean" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
This is the Javascript for handling the onchange event of the combo box:
var prev = ""
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page)
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
return true;
}
function set(){
var e = document.getElementById("usertype");
var selection = e.options[e.selectedIndex].text;
pagechange(selection);
}
Not sure how you wanted to "access" it. I'm assuming you mean with the rest of the form data, so you could do something like the following:
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page) {
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
// create hidden input field and append to form
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "page");
input.setAttribute("value", topage);
page.appendChild(input);
// end of changes
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
}
return true;
}
Also, you were missing a closing bracket on your if (prev.length > 0), so I closed it right before the return true;. You may need to adjust depending on your logic.
Hope this gets you close.
I'm trying to post two different sets of mixed values. Each form will share some user submitted text like name and email.
<form method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join1"/>
</form>
<form method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join2"/>
</form>
<possible dropdown>
It would be ideal to have Dropdown select between the two forms and submit.
Well, using only html you will get a problem as a submit button only submit its own form.
It's also not valid to have forms in other forms.
However, is a trick to accomplish your goal using javascript!
With a little function you can e.g. hide all other forms than one:
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
Then you only need to add the onchange-event on your dropdown-list and hide one of the forms by default.
This would result in something like this:
<html>
<head>
<style language="css" type="text/css">
form input{display:block;width:100px;}
</style>
<script language="javascript" type="text/javascript">
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
</script>
</head>
<body>
<select onchange='showform(this.selectedIndex);'>
<option>form1</option>
<option>form2</option>
</select>
<form method="post" action="url1">
<input type="hidden" name="donate" value="food"/>
<input type="hidden" name="days" value="30"/>
<input type="text" name="cans" value="5"/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join1"/>
</form>
<form id='form2' style='display:none' method="post" action="url2">
<input type="hidden" name="donate" value="shoes"/>
<input type="text" name="pairs" value="2"/>
<input type="text" name="style" value=""/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join2"/>
</form>
</body></html>
If you don't like javascript, you would need to do that in php by using an additional form for the select-element and insert only the wanted form (or hide the others).
I already see some design issues with the way you have planned your multi-form setup, there are much better techniques to handle this - but I will try to help you using your own technique.
By using your own example, this should work for you:
<form id="join1" method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<form id="join2" method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<select id="formList">
<option value="">Select form..</option>
<option value="join1">Join1</option>
<option value="join2">Join2</option>
</select>
<button id="submitBtn">Submit</button>
And this is the javascript for making it happen (using jQuery):
$('#submitBtn').on('click',function(){
var selectedForm = $('#formList').val();
if(selectedForm){
$('#'+ selectedForm).submit();
}
});
the example is also available as a jsfiddle:
https://jsfiddle.net/k1jf4b4L/
Hope it helps a bit