I have a form created in the HTML-Service of GoogleScript.
I'd like the user to input some values in this form.
After that I'd like the user to press the submit button and "work" with the user-input.
My question now is how I can get on the user-input the user put into the form in the HTMLService Pop Up Window.
I already added the and also added a submit-button to this form.
But when I click on this nothing happens.
Here is the code of the html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function formSubmit() {
google.script.run.Wertezeigen(document.forms[0]);
}
</script>
<body>
<p>Dieses Formular erzeugt ein neues Triage Dokument und speichert es mit den eingegebenen Werten in xyz ab.</p>
<form id="Triage_Template">
<table style="undefined;table-layout: fixed; width: 460px">
<colgroup>
<col style="width: 110px">
<col style="width: 350px">
</colgroup>
<tr>
<td>Gebäude:</td>
<td><input type="text" name="gebaude"></td>
</tr>
<tr>
<td>Prozessbereich:</td>
<td><input type="text" name="prozessbereich"></td>
</tr>
<tr>
<td>Straße:</td>
<td><input type="text" name="straße"></td>
</tr>
<tr>
<td>Objekt:</td>
<td><input type="text" name="objekt"></td>
</tr>
<tr>
<td>Defekt:</td>
<td><input type="text" name="defekt"></td>
</tr>
</table><br>
<input type="button" onClick="formSubmit()" value="Submit" />
</form>
</body>
</html>
Function in Code.gs:
function Wertezeigen(form) {
var vorname_test = form.gebaude;
alert(vorname_test);
}
What I'm trying right now is quite simple:
I want to show the input of the input-box "gebaude" in the form as an alert when the user clicks on submit.
You need to give each form input a unique ID:
<input type="text" name="gebaude" id="gebaude">
Since you're trying to show this in your HTML page once you've clicked submit, use return instead of alert:
return form.gebaude;
Change your form submit button to the following code:
<input type="submit" id="submit" value="Submit"
onclick="this.value='Submitting...';
google.script.run.withSuccessHandler(formSubmitted)
.Wertezeigen(this.parentNode);
return false;">
</form>
<div id="output"></div>
Then include this script just before the end of your HTML code:
<script>
function formSubmitted(status) {
document.getElementById('Triage_Template').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
Related
I want to ask you how to call the REST Service from cordova application. I use the MongoDB as stored data. I want to add data from index.html to MongoDB. I can access the url localhost:28017/AlitaDB/test/ from browser and display data from MongoDB.
Here the code index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Manage Contact</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.8.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#submit").click(function insertContact(){
$.post("http://localhost:28017/AlitaDB/test/",
$("#insertContact :input").serializeArray(),
function(json){
if(json== null || json == 'undefined')
alert("Insert failed");
else
alert("Insert successful");
});
alert('asdas');
return false;
});
});
</script>
</head>
<body>
<h3>Insert Contact</h3>
<form id="insertContact">
<table>
<tr>
<td>Contact Id</td>
<td><input type="text" name="contactId" /></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastName" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><input type="submit" id="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
MongoDB requires you to write a RESTful Interface to use their database as they do not provide one, although there are some wrappers/plugins available (Does MongoDB have a native REST interface?). An alternative service is offered by www.Parse.com. I'm not affiliated, but I'm looking to use their schemaless database offering.
AngularJS example code to create a GameScore record with some data:
$http({
url: 'https://api.parse.com/1/classes/GameScore',
method: 'POST',
headers: {
'X-Parse-Application-Id': 'APPLICATION_ID',
'X-Parse-REST-API-Key': 'REST_API_KEY',
},
data: {"score":1337,"playerName":"Ian Brown","cheatMode":false}
});
Taken from CURL example at https://www.parse.com/docs/rest#summary
I created a form (below) to collect a single input.
<?php foreach($products as $product) { ?>
<?=form_open('','data-id="'.$product['product_id'].'"')?>
<tr class="<?=$product['product_id']?>">
<td>
<?=$product['product_name'];?>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<!--single input-->
<input type="text" class="typeahead clean form-control" data-id="<?=$product['product_id']?>" autocomplete="off" name="<?=$product['product_id']?>">
</div>
</div>
</td>
<td>
<div class="text-center">
<!--submit button-->
<button type="submit" class="font-tiny capitalized no-underline btn btn-primary btn-sm"> <i class="fa fa-check font-medium"></i> Submit</button>
</div>
</td>
</tr>
</form>
<?php } ?>
The code looks ok above and when I view page source, but when I inspect element the form is closed right away. Like this:
<form action="http://merchantfuse.localhost:8888/company/add/batch_pending" data-id="7" method="post" accept-charset="utf-8"></form>
The form is not working properly, when I submit it, the value submitted is from another input located in the header. Does anyone have any idea as to why this might be happening? Thanks
The opening and closing table html tags (<table> </table>) need to be inside your form tags. It is not valid html to split a table with a form so the browser ends the form straight away, see Is a form valid over a tr
This will give you:
<form>
<table>
<tr>
<td>
<div>Cell content</div>
</td>
</tr>
</table>
</form>
I need the form html like below:
<form>
<div class="es_form_txt">Name</div>
<div class="es_form"><input type="text" value="" class="email1"></div>
<div class="clear1"></div>
<div class="es_form_txt">Gender</div>
<div class="es_form">
<input type="radio" value="" name=""> Male
<input type="radio" value="" name=""> Female
<input type="radio" value="" name=""> Other
</div>
<div class="clear1"></div>
<div class="es_form_txt">Country Code</div>
<div class="es_form"><input type="text" value="" class="email1"></div>
<div class="clear1"></div>
<div class="es_form_txt">Phone</div>
<div class="es_form"><input type="text" value="" class="email1"></div>
<div class="clear1"></div>
<div class="clear1"></div>
<div class="es_form"> </div>
<div class="es_form"><input type="button" class="button" value="Update"></div>
<div class="clear"></div>
</form>
I tried all sorts of solution in here not working! Could anyone point me in right direction?
I find that when I need to display specific HTML when using Zend_Form the most reliable solution is usually to use the ViewScript decorator.
Build a normal form using Zend_Form.
<?php
//application/forms/Search.php
class Application_Form_Search extends Zend_Form
{
public function init()
{
$this->setMethod('POST');
//assign the view script to the decorator, this can also be done in the controller
$this->setDecorators(array(
array('ViewScript', array(
'viewScript' => '_searchForm.phtml'
))
));
// create new element
$query = $this->createElement('text', 'query');
// element options
$query->setLabel('Search Keywords');
// add the element to the form
$this->addElement($query);
//submit element
$submit = $this->createElement('submit', 'search');
$submit->setLabel('Search Site');
$submit->setDecorators(array('ViewHelper'));
$this->addElement($submit);
}
}
Then build the actual script used to render the form.
<!-- ~/views/scripts/_searchForm.phtml -->
<article class="search">
<!-- set the action and the method -->
<form action="<?php echo $this->element->getAction()?>" method="<?php echo $this->element->getMethod()?>">
<table>
<tr>
<!-- you can render individual decorators. -->
<th><?php echo $this->element->query->renderLabel()?></th>
</tr>
<tr>
<td><?php echo $this->element->query->renderViewHelper()?></td>
</tr>
<tr>
<!-- or you can render a complete element -->
<td><?php echo $this->element->search?></td>
</tr>
</table>
</form>
</article>
This currently renders as:
<article class="search">
<form action="/video/index/display" method="post">
<table>
<tr>
<th>
<dt id="query-label">
<label for="query" class="optional">Search Keywords</label>
</dt>
</th>
</tr>
<tr>
<td>
<input type="text" name="query" id="query" value="" placeholder="Movie Title" size="20">
</td>
</tr>
<tr>
<td>
<input type="submit" name="search" id="search" value="Search Video Collection!">
</td>
</tr>
</table>
</form>
</article>
Some experimentation will be required to get exactly the output you require.
I have tried jqtouch and I have trouble getting a form with php to work in Safari. Nothing happens when I press submit in Safari but It works in Explorer. I tried to change input type from submit to button but it didn't help. How should I change my code?
<?php
function test1()
{
if (isset($_POST['submit'])){
$test = $_POST['test'];
echo $test;
}
}
?>
<form action="#" method="post" class="form">
<table>
<br />
<tr>
<td><label for="test">Test:</label></td>
</tr>
<tr>
<td><input type="text" name="test"></td>
</tr>
<tr>
<td><br /><input type="submit" name="submit" class="submit" value="Press"></td>
</tr>
</table>
</form>
I have the following html:
<table>
<tr>
<td>
<input type="button" id="btnAdd" value="Add" />
<input type="hidden" id="hdnID" value='209' class="hdn" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnAdd" value="Add" />
<input type="hidden" id="hdnID" value='210' class="hdn" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnAdd" value="Add" />
<input type="hidden" id="hdnID" value='211' class="hdn" />
</td>
</tr>
</table>
I have a jQuery click event for the add buttons.
$("#btnAdd").click(function ($e) {
// Need selector here that can find the hidden field (see above) that is found
// in the same td as the button that was clicked. For example, if the Add button
// in the 2nd row was clicked then I need to find the hidden input that has
// the value of '210'.
// Doesn't work... not sure why
var hdn = $(this).siblings().next();
});
Thanks in advance for helping me through a thick moment...
Maybe something like this would work?
("#btnAdd").click(function ($e) {
var hdn = $(this).parent().next().children('td input');
});