Submit Form Data to Google Spreadsheet in another tab (sheet) - php

I have a website here having two Forms. One under RESERVE VIP TABLE and another in the footer where it says JOIN OUR NEWSLETTER. I've used the following code to submit data from the FORM to Google Sheets. Question is that the first form is working fine but how can I submit the data from Newsletter section to Google Sheets in a separate Tab named "Subscribe"?
Newsletter HTML:
<form method="POST" name="google-sheet">
<input type="text" name="subscribeEmail" placeholder="Your Email Address">
<div class="gold-button small">
<button type="submit">Submit →</button>
<span class="bttn-border left virticle"></span>
<span class="bttn-border right virticle"></span>
<span class="bttn-border top horizontal"></span>
<span class="bttn-border bottom horizontal"></span>
</div>
</form>
Script I'm using for Reservation Form:
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbzJA2cZGROFNCwLuPnJjECW21zXMZs8nT4Xo0Nzjy5ETlOVQ3gHgyjE3wzzmHky_0I_/exec'
const form = document.forms['google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.catch(error => console.error('Error!', error.message))
})
</script>

If it were me, I'd have to tackle it like this:
HTML:
<form action="https://script.google.com/macros/s/[SCRIPT ID]/exec" method="post">
<input type="text" name="subscribeEmail" placeholder="Your Email Address">
<div class="gold-button small">
<button type="submit">Submit →</button>
<span class="bttn-border left virticle"></span>
<span class="bttn-border right virticle"></span>
<span class="bttn-border top horizontal"></span>
<span class="bttn-border bottom horizontal"></span>
</div>
</form>
Apps Script:
function doPost(e) {
var ss = SpreadsheetApp.openById("SHEET ID");
var sheet = ss.getSheetByName("Subscribe");
// or use getRange().setValue() if something specific
sheet.appendRow([e.parameter.subscribeEmail])
}
Reference:
Run Google App Script from web page

Related

Can't get mottie jQuery keyboard work on popup box

I'm trying to make work mottie jquery keyboard on a popup window. The keyboard works as expected in main page but doesn't appear on the popup. I'm pretty sure i'm doing something wrong but cannot figure it out.
Main page is like this
<script>
$(function(){
$('#key').keyboard()
});
</script>
</head>
<body>
<div class="page">
<div id="example" class="k-content">
<div id="scheduler"><a href="test.php">
<button role="button">CONFERMA</button></a><input type="text" id="key">
Here, the keyboard is working correctly in the input #key
I cannot focus the keyboard here:
<div data-container-for="title" class="k-edit-field"><input type="text" class="k-input k-textbox" name="title" title="Ospite" required="required" data-bind="value:title"></div>
Tried to use the class "k-input k-textbox" (each one, both) but keyboard not work. Could be a problem of script path?
Working code
<script>
$(function(){
$('#key').keyboard()
});
</script>
</head>
<body>
<div class="page">
<div id="example" class="k-content">
<div id="scheduler"><a href="test.php">
<button role="button">CONFERMA</button></a><input type="text" id="key">
Not working code
<div data-container-for="title" class="k-edit-field"><input type="text" class="k-input k-textbox" name="title" title="Ospite" required="required" data-bind="value:title"></div>
No errors, just the keyboard not appear.
I've figured it out, not sure why but i got the keyboard with a button:
<script>
function myFunction() {
var x = document.getElementsByClassName("k-textbox");
$('.k-textbox').keyboard()
}
</script>
<button type="button" onclick="myFunction()" style="float:right;">ASSEGNA</button>
If i press the button it works

Error in my JQuery validation

Hello i have error in my Jquery validation, the code dont do nothing, can anybody help me?
<script>
// When the user submits the form,
// Check what answer they picked
// And tell them if they're correct
// submit
$("#form").on("submit", function(event) {
event.preventDefault();
var $answer = $("#unit_name");
var answer = $answer.val();
console.log(answer);
if (answer === "") {
$("#result").text("Preencha corretamente o nome da unidade.");
} else if(answer.length < 3 ) {
$("#result").text("O nome da unidade é demasiado pequeno.");
}
});
</script>
This is the code of the form implemented
<div class="pure-u-1">
<h3 align="center">Insert</h3>
</div>
<div class="form-group">
<label class="control-label" for="unit_name"Name concept:</label>
<div class="input-group">
<input class="form-control" placeholder="Insert name" id="unit_name" name="unit_name" type="text" />
</div>
</div>
<input type="hidden" name="state" value="insert">
<input type="submit" value="Insert">
<br><br>
</div>
</form>
This div will show message to the users.
First think I noticed is that the label tag doesn't have a closing ">". It isn't in the HTML code, but does the form tag have an id of "form"?
The two lines var $answer... and var answer... could be combined to
var answer = $('#unit_name').val();
Lastly, in your html code, do you have a div (or other tag) with an id="result"? If so, is it hidden? If it is hidden, after setting your message, you will need to un-hide it.

Submiting a form from a single page webapp using Ajax Call

Does anyone know about a good tutorial where submiting a form from a sing page is explained? I have a few page views in my html code and one of them is a form with three fields (Name, Email and Message) what I am trying to achieve is to submit the form data via Ajax without using a process.php directly.
This is the Form:
<section class="hidden" id="view-forms">
<header>
<button class="left arrow" data-vin="view-home" data-sd="sr">
<div class="label">All Contacts</div>
</button>
<h1>Message</h1>
<button class="right bold green" data-vin="view-done" data-sd="sl">
<div class="label">Send</div>
</button>
</header>
<div class="scrollMask"></div>
<div class="scrollWrap">
<div class="scroll">
<div class="content">
<input placeholder="Name" type="text" />
<input placeholder="Email" type="email" />
<textarea placeholder="Your Message" rows="5"></textarea>
</div>
</div>
</div>
</section>
This is the confirmation page after message has been sent:
<section class="hidden" id="view-done">
<header>
<h1>That's it!</h1>
<button class="right bold" data-vin="view-home" data-sd="popout">
<div class="label">Done</div>
</button>
</header>
<div class="scrollMask"></div>
<div class="scrollWrap">
<div class="scroll">
<div class="content">
<h2>Message sent!</h2>
</div>
</div>
</div>
</section>
Please, let me know if any of you have already implemented something like this. Thank you.
You could submit to the same PHP page. You just need an if statement to separate the code that generates the page from the code that submits your form. That being said, you should probably just create a second PHP script to handle the form submission. If you wanted to implement it using the if statement, I would add a piece of information to your GET/POST request which would be something like:
'formSubmission='+true
Okay, for the more details, look at this tutorial, it goes over the basics. In your case, try this (NOTE: I haven't tested any of this). Also, add an ID to each of the elements (I assumed they would be the same as your current name attributes and that the textarea would have the ID message).
function()submitForm(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var message = document.getElementById('message').value;
var requestData = 'name='+name+'&email='+email+'&message='+message+'&formSubmission='+true;
//I'm assuming that you're using a POST request (this depends on the length of the message
var AJAXObj = new XMLHttpRequest();
//don't forget to replace currentURL.php with the name of the page that will handle the submission
AJAXObj.open('POST', 'currentURL.php', true);
AJAXObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
AJAXObj.send(requestData);
AJAXObj.onreadystatechange = function (){
var AJAXObj = event.target;
if(AJAXObj.readyState == 4 && AJAXObj.status == 200){
var responseText = AJAXObj.responseText;
//things that you might want to do with your responseText
}
}
}
Now here's the PHP:
if(isset($_POST['formSubmission'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
//code that handles the form data that has now been passed to PHP
}
Just a thought, don't submit to the same PHP page that you're currently on. Create a new file and paste the code into that. It'll be cleaner.

Bootstrap Wizard Plugin with a PHP multi-page form?

I have a PHP form that is split into 3 separate PHP pages. The first page submits the form info which is then processed by a third party API. The returned (validated) results are then presented in the second PHP page along with a form for further processing.
My question is whether or not there is a way I can integrate this process into the BootStrap Wizard Plugin with its tab structure.
e.g. Fill and submit form by clicking on 'next' and have the Wizard plugin move to tab 2. showing the the next PHP page which has been processed.
<!-- Wizard -->
<section class="wizard">
<!-- Wizard navigation -->
<ul>
<li>Registration</li>
<li>Next step</li>
<li>Confirmation</li>
</ul>
<!-- Wizard progress bar -->
<div class="progress progress-line progress-striped">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- Wizard content -->
<div class="tab-content">
<div class="tab-pane" id="step1">
<h3>This is first step</h3>
<form method="post" action="myform.php?api=form&step=1">
<input type="text" name="phonenumber" id="phonenumber" />
<input type="submit" value="continue" class="btn btn-primary" />
</form>
</div>
<div class="tab-pane" id="step2">
<h3>Second step content</h3>
<form method="post" action="myform.php?api=form&step=2">
<input type="text" name="faxnumber" id="faxnumber" />
<input type="submit" value="continue" class="btn btn-primary" />
</div>
<div class="tab-pane" id="step3">
<h3>This is third final step (completed)</h3>
<p>Form Process Complete</p>
</div>
<!-- Wizard pager -->
<ul class="wizard pager">
<li class="previous">Previous</li>
<li class="next">Next</li>
<li class="next finish">Finish</li>
</ul>
</div>
</section>
<!-- /Wizard -->
<script src="/js/jquery.bootstrap.wizard.js"></script>
<script>
$(document).ready(function() {
$('.wizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var wizard = $('.wizard');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
wizard.find('.progress-bar').css({width:$percent+'%'});
// If it's the last tab then hide the next button and show the finish instead
if($current >= $total && $total != 0) {
wizard.find('.pager .next').hide();
wizard.find('.pager .finish').show().removeClass('disabled');
} else {
wizard.find('.pager .next').show();
wizard.find('.pager .finish').hide();
}
}});
});
</script>
So what I'm trying to achieve is for the first form to show it's results in the second tab of the wizard.
Yes you can, I would suggest using the bwizard.js and bwizard.css plugin. And add a button to a form, now u going to have to call the action using ajax and not using an actual input of type submit. Using jQuery, on success of "btn_submit" you will taget the 2nd tab to focus to by giving each tab an I'd, or u can use page inspector and target the default I'd of each tab, which if I remember correctly used to be #step1 etc.

PHP or JQuery or CSS (in wordpress)- Show Div when Table data is displayed

I am using the Flexible Map plugin on a wordpress site. The plugin has a form that allows the user to enter their 'from address' to get directions to the location displayed on the map. The form does not have an ID or class (and I am not able to add one).
I would like the user to be able to print the directions once the form is submitted, but I don't want the print button to show up until after the directions have displayed from the user pressing the submit button.
The directions are displayed in a table, so I was thinking I could use JQuery to say that when the table is displayed, then show the print div.
I'm thinking it's something like this, but I'm not sure how to format it based on a table (because the form does not have an ID):
jQuery(document).ready(function($) {
$('#idOfYourForm').on("submit", function () {
$('#print').show();
});
});
Any suggestions are appreciated!
EDIT Here is the code that is generated once the directions submit button is pressed:
<div id="my-dir-div" style="float: left; direction: ltr;">
<form>
<p>
<input type="text" name="from">
<input type="submit" value="Get Directions">
</p>
</form>
<div jstcache="0">
<div class="adp-warnbox" jsdisplay="warnings.length" jstcache="1" style="display: none;">
<div class="warnbox-c2" jstcache="0"></div>
<div class="warnbox-c1" jstcache="0"></div>
<div class="warnbox-content" jscontent="$this" jsselect="warnings" jstcache="5"></div>
<div class="warnbox-c1" jstcache="0"></div>
<div class="warnbox-c2" jstcache="0"></div>
</div>
<div jseval="setupPanelStep(this, $waypointIndex)" jsvalues="$waypointIndex:0;" jsselect="legs[0].start_address" jstcache="2">
<table id="adp-placemark" class="adp-placemark" jstcache="0">
<tbody jstcache="0">
<tr jstcache="0">
<td jstcache="0">
<img jsvalues=".src:markerIconPaths[$waypointIndex]" jstcache="14" src="http://maps.gstatic.com/mapfiles/markers2/icon_greenA.png">
</td>
<td class="adp-text" jscontent="$this" jstcache="12">211 South Elson Street, Kirksville, MO 63501, USA</td>
</tr>
</tbody>
</table>
</div>
<div jsvalues="$legIndex:$index;" jsselect="legs" jstcache="3" jsinstance="*0">
<div class="adp-legal" jscontent="copyrights" jstcache="4">Map data ©2013 Google</div>
</div>
</div>
<div id="print">
<input id="print" class="printbtn" type="button" value="Print Directions" onclick="return pop_print()">
<script type="text/javascript">
function pop_print(){
w=window.open(null, 'Print_Page', 'scrollbars=yes');
w.document.write(jQuery('div#my-dir-div').html());
w.document.close();
w.print();
}
</script>
</div>
I think you can try this (only if the table with id adp-placemark is available on the page then show it)
$(function(){
if($('#my-dir-div table#adp-placemark').length) $('#print').show();
});
Or, this one
$(function(){
if($('#my-dir-div table#adp-placemark td.adp-text').length) $('#print').show();
});

Categories