Google apps script canot set values from form table - javascript

I have a html form like
<script>
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
}
</script>
<form>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td>
<input id="date" name="date" style="width:125px;" type="date" />
</td>
<td>
<input id="type" name="type" style="width:125px;" type="text" />
</td>
<td>
<input id="status" name="status" style="width:125px;" type="text" />
</td>
<td>
<input id="name" name="name" style="width:125px;" type="text" />
</td>
<td>
<input id="comment" name="comment" style="width:125px;" type="text" />
</td>
<td>
<input id="where" name="where" style="width:125px;" type="text" />
</td>
</tr>
</tbody>
</table>
</form>
<input onclick="formSubmit()" type="button" value="Submit" />
and trying to put all data to sheet but i got empty cells, if i add .value on the end of variables
form.date.value
then row do not inserting at all
function getValuesFromForm(form) {
var s1 = form.date,
s2 = form.type,
s3 = form.status,
s4 = form.name,
s5 = form.comment,
s6 = form.where,
index = 2,
sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.insertRowBefore(index).getRange(index, 1).setValues([s1,s2,s3,s4,s5,s6]);
}
But this code works as well
sheet.appendRow([s1,s2,s3,s4,s5,s6]);
What i doing wrong?

You need to read value property of input elements:
var s1 = form.date.value,
s2 = form.type.value,
s3 = form.status.value,
s4 = form.name.value,
s5 = form.comment.value,
s6 = form.where.value,

You must have a google.script.run in your HTML somewhere that calls the server side code.
https://developers.google.com/apps-script/guides/html/reference/run
google.script.run is an API that enables you to communicate from the users computer, to Google's servers.
I don't see a submit button in your code, or a <script> tag, or an onClick event. There are various ways to configure the form submission, but there needs to be a google.script.run.myServerFunctionName() call to trigger the function in the .gs Apps Script file.
You can use google.script.run directly from a SUBMIT button:
<input type="button" value="Not Clicked"
onclick="google.script.run
.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
, or an button with an HTML onclick Event Attribute:
<button onclick="myFunction()">Click me</button>
or a HTML onsubmit Event Attribute:
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
and from a SCRIPT tag:
<script>
function myFunction() {
google.script.run.doSomething();
};
</script>
You can pass the data in various ways. There are lots of ways to configure the HTML and client side code.

Solved
var rowData=[[s1,s2,s3,s4,s5,s6]];
sheet.insertRowBefore(index).getRange(index, 1,1,6).setValues(rowData);

Related

On change attribut is not initialised in thymeleaf

I have the following problem with javascript integrated into thymeleaf template.
I have the following table with different input fields which are filled up with data from a model.
Furthermore i have for each of this input field a hidden additional input field.
Idea is that when I change not hidden input tag, the hidden ones will receive the new value
<tr th:each=" item : ${products}">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:onchange="substituteOnClick()" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" th:onchange="substituteOnClick()" id="minquantityItem" name="minquantityItem" />
</td>
<td>
<form th:action="#{/deleteWarehouseItem/{id_del}/(id_del=${item.id})}" method="post" role="form" class="ui form">
<button type="submit" class="ui form" name = "itemDel" th:value="${item.id}">Löschen</button>
</form>
</td>
<td>
<form class="ui form" method="post" th:action="#{/updateItem}" >
<input type="hidden" name="productName_mvc" id="productName_mvc" value="0" th:value="${item.product.name}"/>
<input type="hidden" name="productPrice_mvc" id="productPrice_mvc" value="0" th:value="${{item.product.price}}"/>
<input type="hidden" name="quantityItem_mvc" id="quantityItem_mvc" value="0" th:value="${item.quantity}"/>
<input name="minquantityItem_mvc" id="minquantityItem_mvc" value="0" />
<input type="hidden" name="inventoryIdentifier_mvc" id="inventoryIdentifier_mvc" th:value="${item.id}"/>
<button type="submit" class="ui labeled icon button" name = "updateItem" th:text="#{management.updateItem}">
</button>
</form>
</td>
</tr>
Here is my javascript file
function substituteOnClick() {
var pN=document.getElementById("productName").value;
var pP=document.getElementById("productPrice").value;
var qI=document.getElementById("quantityItem").value;
var MqI=document.getElementById("minquantityItem").value;
document.getElementById("productName_mvc").value=pN;
document.getElementById("productPrice_mvc").value=pP;
document.getElementById("quantityItem_mvc").value=qI;
document.getElementById("minquantityItem_mvc").value=MqI;
}
As you see my problem is that for each row I need 2 buttons for different actions, since that I decided that It would be useful just to change values of hidden inputs. It is possible because I use hidden inputs only if I need to update an object and it happens mainly on change event. But my problem is that even if I write anything new in not hidden inputs, it does not influence my hidden ones. I have cheked it by not hidding one of them.
How is it possible to change values in other inputs by changing them firstly in other ones.
Best wishes
first of all, you need to remove these extra brackets from this line
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
and then in your javascript use console.log() to check whether on onchange event its fetching the change value or not like
console.log("In js function");
console.log(qI);
if you are not getting these values then Instead of onchange event add a button for each input or for all input use a single button inside form and then use the onClick function or onsubmit like this:
<form onsubmit="return substituteOnClick()">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.product.price}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" id="minquantityItem" name="minquantityItem" />
</td>
<input type="submit" name="Submit" value="Submit"/>
</form>
Let me know if this helps

Accessing text field inside html table in javascript

I want to access text placed inside rows of a dynamic table in javascript.
My table structure:-
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR >
<TD><INPUT type="checkbox" name="chk[]" /></TD>
<TD ><INPUT type="text" name="txt[]" /></TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
</BR>
</BR>
<INPUT type = "button" value = "Submit" onclick = "myFunction()"></BODY>
--
Thanks
if you mean to get the whole input value in the table, you can do this.
var a = document.getElementById("dataTable").getElementsByTagName("input");
so var a became an array and inside it are elements that you wanted to get the value just use loop.
var e = a.length; // get how many input inside the table
for(x=0;x<e;x++){
console.log(a[x].name+" the value inside is "+a[x].value);
}
Do you have id for specified row? If you dont have place id on row from where you want to change text and "catch" it with javascript. function is called var a= document.getElementById('ID_OF_SAMPLE_ROW').value and text is stored into variable a. This function must be called on click or something similar so you must specify when you read and from which row.
Simply grab the elements in question with .getElementsByName(), and then return their .value. You can see whether the checkbox is checked or not with .checked.
Note that .getElementsByName() returns a NodeList collection of objects, so you'll want to grab the first result with [0].
This can be seen in the following:
function myFunction() {
let chk = document.getElementsByName('chk[]')[0].checked;
let txt = document.getElementsByName('txt[]')[0].value;
let time = document.getElementsByName('time[]')[0].value;
console.log("Checkbox checked?:", chk);
console.log("Text:", txt);
console.log("Time:", time);
}
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR>
<TD>
<INPUT type="checkbox" name="chk[]" />
</TD>
<TD>
<INPUT type="text" name="txt[]" />
</TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
<BR />
<BR />
<INPUT type="button" value="Submit" onclick="myFunction()" />
</BODY>
Note that your final <input> is missing the closing /, and your </br> tags should be <br />. These have been fixed in the above example.

Javascript assign table to a variable

My goal is to create a button using javascript, that creates a table, that is the same as one I already have. Here I have a table with id="create_table_test", and a button with onsumbit function createTable().
The problem is whenever the button is executed, instead of a table I get [object HTMLTableElement] .Also tried to do it without the function getElemntById, but the result was the same. With some testing I found that this script doesn't like input types.I tried to do it with the same table, but without the input field types set and it worked out.Maybe thats the cause ?
The next thing that maybe have to be kept in mind is that I need to store the filled tables into php variables, then insert them into table.
<!DOCTYPE html>
<html>
<head>
<script>
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
</script>
</head>
<body>
<span id="create_table">
<table id="create_table_test" class="repeat_table">
<tr class="tr_test" style="border-bottom:3px solid #0066FF; font-weight:bold">
<td id="Question">
Въпрос
</td>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
<td>
True answer
</td>
<td>
</td>
</tr>
<form name="test" action="send.php" onsubmit="" method="post">
<tr>
<td>
<textarea id="question" name="question" style="width:300px; height:120px;"></textarea></td>
<td>
<textarea id="answer1" name="answer1" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer2" name="answer2" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer3" name="answer3" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer4" name="answer4" style="width:80px; height:120px"></textarea></td>
<td>
<input id="true_answer" type="radio" name="true_answer" value="A">A<br>
<input id="true_answer" type="radio" name="true_answer" value="B">B<br>
<input id="true_answer" type="radio" name="true_answer" value="C">C<br>
<input id="true_answer" type="radio" name="true_answer" value="D">D<br>
</td>
<td>
<input name="submit" type="submit" value="" class="btn"/>
</form>
</td>
</tr>
</table>
<input type="button" onclick="createTable()" value="CreateTable"/>
</span>
</body>
try this one...
function createTable() {
var table = document.getElementById("create_table_test").outerHTML;
document.getElementById("create_table").innerHTML += table;
}
Looks like you want:
document.getElementById("create_table").innerHTML += table.outerHTML;
But beware of duplicate IDs.
Just change this code from:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
to:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML = table.outerHTML;
}
This will create the same table with the same ids. You might wanna re-think your logic.

Assingning unique id and names?

I have a html table with one prototype row. Prototype row has few tds and each td has input element. I am trying to clone the row and assign unique ids and names. But in Fire fox new ids and names are assigned properly. But in IE unique ids and names are not assigned. This logic works fine in FF. But in IE7 it does not work.
html Table:
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
JQuery code:
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
});
But with the above code unique ids and names are not assigned.am i doing anything wrong here?
Thanks!
You don't needs IDs:
<label>MY Value ONE:<br /><input class="required email" type="text" name="myValue1[]" /></label>
Now you can clone this label as many times as needed, and it'll work.
On the server side, you can then access (for example in PHP) $_POST['myValue1'] as an array.
Sorry to tell you, but everything seems fine with what you did. I tried the example you gave on IE and it seems to work.
If you inspect it with Developer Tools you still see the old id? what version of IE?
here is the code I tried:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
//$(prot.find("input")[0])
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
counter++;
});
});
</script>
</head>
<body>
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
<input type="button" id="new" />
</body>
</html>

unable to add new text box on onclick() using javascript and disable an element

I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>

Categories