Home
Contact
Latest Posts
How to create unique slug or url in Laravel
How to get user IP address using PHP
Highlighting the matching Keywords in Search Results using PHP
How to Restrict/Block User Access from IP Address in Laravel
How to Copy Text to Clipboard using JavaScript or jQuery
How to Crop Image in PHP and JavaScript before Uploading
How to Create Stopwatch using JavaScript, HTML and CSS
Add more Fields in jQuery and Remove it Dynamically
How To Disable Date only using JavaScript
Eloquent model Accessors and Mutators in Laravel
Category
laravel 9
Laravel Crud
Laravel Basic
Laravel SEO
Laravel 9 Pagination
Laravel Import Export
Javascript
Basic Js Intro
Advanced Javascript
Design Snippet
Boostrap 4
E-Commerce Design
Custom Design
Design Template
Bootstrap 5
Ajax form submition
Send data to Google sheet
Interview Questions
Laravel Interview Questions
PHP interview Questions
Wordpress Interview Questions
jQuery Interview Questions
jQuery
jQuery disable keys
Form Validation
jQuery Beginner's Guide
Wordpress
Wordpress Custom Code
Cheatsheet
PHP
File Handling in PHP
PHP Prepared Statements
SEO
Tools
CSS Box Shadow Generator
CSS Box Shadow Example
Wordpress Custom Post Type Generator Tool
Search
Ctrl + /
3
Brad Diesel
Call me whenever you can...
4 Hours Ago
John Pierce
I got your message bro
4 Hours Ago
Nora Silvester
The subject goes here
4 Hours Ago
See All Messages
15
15 Notifications
4 new messages
3 mins
8 friend requests
12 hours
3 new reports
2 days
See All Notifications
submit data from html form to google sheet using ajax
Run
Go back to tutorial
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-6"> <h3 class="text-center mt-5"> google sheet form</h3> <form id="frmSubmit" method="POST"> <div class="mb-3"> <label for="Name" class="form-label">Name</label> <input type="text" class="form-control" id="" name="name" required=""> </div> <div class="mb-3"> <label for="Email" class="form-label">Email </label> <input type="email" class="form-control" name="email" required=""> </div> <div class="mb-3"> <label for="Mobile" class="form-label">Mobile</label> <input type="tel" class="form-control" id="" name="mobile" required=""> </div> <div class="mb-3"> <label for="Message" class="form-label">Message</label> <textarea name="message" class="form-control" style="width: 100%;"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> <div id="msg"></div> </form> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> jQuery('#frmSubmit').on('submit', function(e) { e.preventDefault(); jQuery('#msg').html('Please wait...'); jQuery('#btnSubmit').attr('disabled', true); jQuery.ajax({ url: 'https://script.google.com/macros/s/AKfycbz9Pc6hWgexMQQ2sBI29JE_m17beoVf0Ox6nFugg7mDMWo_qShFBdWWgcMmpiejAfaq/exec', type: 'post', data: jQuery('#frmSubmit').serialize(), success: function(result) { jQuery('#frmSubmit')[0].reset(); jQuery('#msg').html("Thank You"); jQuery('#btnSubmit').attr('disabled', false); } }); }); </script> </body> </html>
OOps! You are currently offline.