Using Google Sites/Scripts: Send Input Values from a Form to a Support Email Address - forms

Disclaimer- I AM A BEGINNER. If there is not a simple answer here, I will gladly review the correct tutorial, etc. But I've been looking for a couple days and I can't quite get this.
Use Case:
AS A: visitor viewing a Google Site
I WANT TO: fill out a form and select Submit
SO THAT: the information entered will populate an email and be sent to a specific address.
What I've done:
Created emailForm.html:
<html>
<body>
<script>google.script.run.processForm(document.getElementById('myForm'));
</script>
<div>
<form id='myForm'>
Subject:<input name='emailSubject' type='text'>
<br><br>
Body: <textarea name='emailBody' type='text'></textarea>
<br><br>
Add an Attachment: <input name='emailFile' type='file'>
<br>
<input type='button' value="Submit ZD Ticket" onclick='google.script.run.formSubmitReply()'>
</form>
</div>
</body>
</html>
Created sendEmail.gs: (NOTE: Script is incomplete. I have added my comments)
function doGet() { // This function creates the form on the google site for the customer to use
return HtmlService.createHtmlOutputFromFile('emailForm.html')
}
function formSubmitReply() { // This function is ran on the "Submit" button is selected and sends the email
var subject = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getInput('emailSubject')
var body = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailBody')
var attachment = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailFile')
MailApp.sendEmail ('support#support.com', 'subject, body + attachment,
{name:'Support Request'});
}
​
My Assumptions:
I don't think I need to access any DB and I'm trying to avoid using a Google Spreadsheet. I just want to send the input values straight from the form to an email address.
I read one tutorial that suggested Logging the form values and then call that. But I don't know how to call the appropriate input from the form OR have those inputs added to the email. Sample function from Tutorial:
function processForm(theForm) {
Logger.log( // What goes here?
);
}
THANKS ALL for Any help!

You need to pass the form in to the call from your client code. You can retrieve the form using document.getElementById or simply make use of the fact that the parent of the button is the form, so you can reference it via this.parentNode. Try changing the html like this:
onclick='google.script.run.formSubmitReply( this.parentNode )'
Then in your server code you can use it all:
function formSubmitReply(theForm) {
var subject = theForm.emailSubject;
var body = theForm.emailBody;
var file = theForm.emailFile;
MailApp.sendEmail ('support#support.com', subject, body, {attachments: file});
}

When you have a form, the submission goes to a URL, so here is what you have to do
Modify the form code so that you
Write a doPost(e) method in your apps script code - this is where you will send out the email.
Publish your script as a web app and take the URL and replace the someURL in step 1 with the URL of the web app.

Related

Use Google static maps in email

I am trying to map the below on Google static maps. however, the locations are not showing up when I use individual lat & log they work ... could you please help?
<img src = "https://maps.googleapis.com/maps/api/staticmap?&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C-21.1406555,149.1868439&markers=color:green%7Clabel:G%7C-23.8640118,151.2430725
&markers=color:red%7Clabel:C%7C-19.3205890,146.7620640
&key=AIzaSyAbiWesdtKxt-XXHaZRr56a5N_kCndduK0"/>
Follow this link Send google static map via email same like your question here by another user.Hope this will help.
yes in using PHP and JavaScript you can pass static map URL and pass it through form submission and use in email
Get current location/ Coordinates through JavaScript
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=17&size=500x250&sensor=false&key=API_KEY&maptype=roadmap&markers=icon:http://maps.google.com/mapfiles/ms/icons/red-dot.png|"+latlon;
//here pass the value to input field
document.getElementById("map_image").value = img_url;
Inside form take input with id=map_image and type hidden than submit form and handle post request on next page
<input name="map_image" id="map_image" type="hidden" value=""/>
than for handling after submission of form
$map_image_url = $_POST['map_image'];
than you can use this as img in email template

How to reuse codeigniter form on multiple pages

I have a simple search form I want to reuse across multiple pages in my codeigniter application. For example, right now I have a search form in the sidebar and I'm planning on displaying that sidebar on the index, about, and other pages.
I want to have the form validation display errors on the same page the users submits the form from.
For example:
User is on About page.
User submits form with invalid data
User sees error in the sidebar on the About page
and
User is on Index page.
User submits form with invalid data
User sees error in the sidebar on the Index page
But I'd like to reuse that form validation logic. I just want it to display the error on whichever page the user posted from.
Any ideas how to do that? Sorry for the noob question, I'm pretty new to CI.
Here you have to think globally.
Step.1 : Make one view file : display.php
which contains :
<div id = "main">
<div id = "header">
[load header file here]
</div>
<?php
if(validation_errors() != '') {
?>
<div id = "error">
<?=validation_errors()?>
</div>
<?php
}
?>
<div id = "content">
<?=$page?>
</div>
<div id = "footer">
[load footer file here]
</div>
</div>
Step.2 : About us Page.(controlller)
.... Your data ....
at end of controller function
$data['page'] = 'aboutus';
$this->load->view('display',$data);
With regards to your comment on the above question you could use Flash data
With the assumption that you have the session library loaded, here is a helper function.
function last_page($page = null){
$ci = get_instance();
if($page === null)
return $ci->session->flashdata('last_page');
$ci->session->set_flashdata('last_page', $page);
}
then you can call last_page('about'); at the top of the about page, and then when you want to find out what the last page you were on was you can just call last_page(); with no params.
In the User Guide, there's different ways to configure sets/groups of rules. Then you can simply have something like:
if ($this->form_validation->run('signup') == FALSE)
{
$this->load->view('myform');
}
else
{
$this->load->view('formsuccess');
}
Which will run your "signup" group of validations. To me, this is the cleanest way to achieve reusable validation rules.
This is a perfectly valid question.
I'm not a PHP expert, nor a CI expert, but the fact is sometimes you want to post to a controller that didn't create the view from which you're posting. Which means posting back to itself is not going to work.
I came across this post on the Ellislab forum:
http://ellislab.com/forums/viewthread/217176/
On this page, There are 2 methods of going about it. Both of which use flashdata and both of which are totally valid, IMHO.
The first: create a helper function
http://ellislab.com/forums/viewreply/1003010/
The second: extend the CI_Form_Validation Class.
http://ellislab.com/forums/viewreply/1047536/
The second is the way I went as it seems cleanest although some may argue whether the form validation class should know anything about flash data.

question about CodeIgniter urls

I am using an application (a blog) written using the CodeIgniter framework and would like to search my blog from my browsers location bar by adding a string to the end of my blogs url like this:
http://mysite.com/blog/index.php/search...
As you can see in the example above I am not really sure how to format the rest of the url after the search part so I am hoping someone here might be able to point me in the right direction.
This is what the form looks like for the search box if that helps at all.
form class="searchform" action="http://mysite.com/blog/index.php/search" method="post">
<input id="searchtext" class="search_input" type="text" value="" name="searchtext">
<input type="submit" value="Search" name="Search">
</form>
Thx,
Mark
Since your form is posting to http://mysite.com/blog/index.php/search, I'm assuming this 'search' controller's default function is the one your are attempting to submit your data to. I think that the easiest way to do this would be to just grab the post data inside of the controller method you're posting to. Example:
function search()
{
$search_params = $this->input->post('search_text');
}
Then you would have whatever the user input stored as $search_params, and you can take actions from there. Am I misunderstanding what you're asking?
It seems like you're kind of discussing two different approaches. If you wanted to make a request to
mysite.com/blog/index.php/search&q=what_I_am_looking_for
This is going to call the search controllers default method (which is index by default). If you wanted to use the URL to pass parameters like that you would go to your function in the search controller and do:
print_r($this->input->get('q'));
This will print out "what_am_I_looking_for".
An easier approach in my opinion would be to:
1. Create a view called "search_view" with the HTML content you pasted above, and have the form "action" http://www.mysite.com/blog/index.php/test/search
Create a controller called "Test" that looks like the following:
class Test extends CI_Controller {
function search()
{
$search = $this->input->post('searchtext');
print_r($search);
}
public function display_search()
{
$this->load->view('search_view');
}
}
Visit http://www.mysite.com/blog/index.php/test/display_search in your browser. This should present you with the form you placed in search_view.php. Once the form is submitted, you should be sent to the search function and print out the variable $search, which will have whatever text you submitted on that form.
If this isn't what you were looking for then I am afraid I do not understand your question.

How can I submit a DOM table to php?

I have a <table> in a web page that I populate using JavaScript code like this:
var cellBarcode = row.insertCell(1);
var textNode = document.createTextNode(barcode);
cellBarcode.appendChild(textNode);
var cellItemName = row.insertCell(2);
var textNode = document.createTextNode(itemName);
cellItemName.appendChild(textNode);
I need to save its data to my database... So I need to know how I can submit it to php... Is it possible...? If yes, please provide some sample codes that are easy to understand for a beginner like me... thanks...
Yes, you can submit this information to a server-side script, but not without extra JavaScript code.
The extra JavaScript code would collect the information in the table (either from the DOM you've built, or by accessing the same data you used when building the table) into a string, which can then be sent to the server using one of standard ways.
Since you've used the term "submit", I'm assuming you want to send the table's data as part of an HTML <form> submission, you can put the generated string in an <input type="hidden"> element.

Programmatically submitting a form while using AjaxForm

I wanted to find a way to upload a single file*, in the background, have it start automatically after file selection, and not require a flash uploader, so I am trying to use two great mechanisms (jQuery.Form and JQuery MultiFile) together. I haven't succeeded, but I'm pretty sure it's because I'm missing something fundamental.
Just using MultiFile, I define the form as follows...
<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">
The file input button is defined as...
<input id="photoButton" "name="sourceFile" class="photoButton max-1 accept-jpg" type="file">
And the Javascript is...
$('#photoButton').MultiFile({
afterFileSelect: function(){
document.getElementById("photoForm").submit();
}
});
This works perfectly. As soon as the user selects a single file, MultiFile submits the form to the server.
If instead of using MultiFile, as shown above, let's say I include a Submit button along with the JQuery Form plugin defined as follows...
var options = {
success: respondToUpload
};
$('#photoForm').ajaxForm(options);
... this also works perfectly. When the Submit button is clicked, the form is uploaded in the background.
What I don't know how to do is get these two to work together. If I use Javascript to submit the form (as shown in the MultiFile example above), the form is submitted but the JQuery.Form function is not called, so the form does not get submitted in the background.
I thought that maybe I needed to change the form registration as follows...
$('#photoForm').submit(function() {
$('#photoForm').ajaxForm(options);
});
...but that didn't solve the problem. The same is true when I tried .ajaxSubmit instead of .ajaxForm.
What am I missing?
BTW: I know it might sound strange to use MultiFile for single-file uploads, but the idea is that the number of files will be dynamic based on the user's account. So, I'm starting with one but the number changes depending on conditions.
The answer turns out to be embarrassingly simple.
Instead of programmatically submitting using...
document.getElementById("photoForm").submit();
... I used...
$("#photoForm").submit();
Also, since I only need to upload multiple files on occasion, I used a simpler technique...
1) The form is the same as my original...
<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">
2) The file input field is basically the same...
<input id="photoFile" "name="sourceFile" style="cursor:pointer;" type="file">
3) If the file input field changes, submit is executed...
$("#photoFile").change(function() {
$("#photoForm").submit();
});
4) The AjaxForm listener does its thing...
var options = {
success: respondToUpload
};
$('#photoForm').ajaxForm(options);