I created a web-to-lead form using SuiteCRM. Using the code generated by it,I further enhanced it and added a set of 4-checkboxes.
I saved it as a HTML normal page. When I open this html page in browser and it correctly display the alert and submits all the required values correctly to prescribed MySQL database table.
Here is the complete code of this html page:
<html lang='en_us'><head><base target=”_parent” /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d4090f764d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2jgjhr49146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="mello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
But my problem starts when I strips the opening & closing html codes from it. I created a 'Custom HTML' module in Joomla and pasted the code there and accessed in a article. The form takes correct shape at the front-end of website.
All the values of 3-fields viz., First Name, Last Name, Email are correctly recorded in database, but checkbox value(s) are not recorded. Even the alert is blank which occurs immediately after I click on submit/subscribe button.
I don't know why it is not working in JOOMLA 3.
MY OBJECTIVE: To have four checkboxes whose values are appended with " - " and stored in the 'list_name_c' field of database table.
What can I do to make it work?
With thanks,
RK
The problem has been solved. Java script was not working because of one more form on the final html webpage. The solution was to replace the code line var test = document.forms[0]; with the code line: var test = document.MYFORMNAME; Thanks!
Related
I work with Electron.
I have three files in my project.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/preload.js"></script>
<script src="../js/signup.js"></script>
</head>
<body>
<form action="" onsubmit="return validate()">
<label for="email"><b>Почта</b></label>
<input type="text" placeholder="Введите почту..." name="email" required>
<label for="psw"><b>Пароль</b></label>
<input type="password" placeholder="Введите пароль..." id="psw" required>
<label for="psw-repeat"><b>Подтверждение пароля</b></label>
<input type="password" placeholder="Повторите пароль..." id="psw-repeat" required>
<hr>
<p id = "terms">Создавая аккаунт, вы соглашаетесь с нашими условиями пользования и приватности.</p>
<button type="submit" class = registerbtn>Зарегистрироваться</button>
</form>
</body>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
.sign_up {
padding: 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
font-family: 'Raleway', sans-serif;
}
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: darkcyan;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
#warning {
color: crimson;
}
signup.js
function validate()
{
var password = document.getElementById(psw).value;
var password_repeat = document.getElementById(psw-repeat).value
if(password != password_repeat)
{
document.getElementById(psw).insertAdjacentHTML("afterend", "<p id = \"warning\">Пароли не совпадают!</p>")
}
}
The project itself is written in Russian. I want to use the file signup.js to check the identity of the fields "psw" and "psw-repeat", but when the program runs, nothing happens. As for the content of the fields, they are emptied when the button is clicked.
The onsubmit value should only have method call, not with "return".
So, I suggest you to use something like this:
onsubmit="validate()"
Documentation
Also, the submit button have issue with "class" css, it should look like this:
<button type="submit" class="register btn">Зарегистрироваться</button>
I am working in a website project, Which want to display what we editing in <input type="text" id="input" /> tag.
But problem is result only displaying in <div class="result"></div>.
I want to display it in <input type="text" class="reult" /> and <textarea class="result"></textarea> .
I tried many times to fix it. I also created a codepen page for it.. https://codepen.io/coderco/pen/abNNVyw . Please check codes below.
input[type=text],select,textarea{display:block;width:27em;color:#000!important;background:#fff!important;margin-top:1em;height:34px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px}
textarea{display:block;width:27em;margin-top:4em;height:125px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px;color:#000!important;background:#fff!important;margin-bottom:10px}
.result{margin-top:20px;width:20em;height:5em;float:left;font-family:arial;font-size:18px;background:#333;color:#fff;margin-right:1em;padding:10px}
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result" placeholder="Display Result Here"></textarea>
<input type="text" class="result" placeholder="Display Result Here"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/script.js"></script>
// Choose relevant input elements
var inputs = $('input,select,textarea')
// Bind a new event to the inputs
.bind("newInput", function(){
// Abbreviate
var $t = $(this);
// Log the results
$('.result')
.text( $t.val() );
});
(function scan(){
inputs.each(function() {
$t = $(this);
if ( $t.data('oldVal') !== $t.val() ) {
$t.trigger('newInput');
$t.data('oldVal',$t.val());
}
});
setTimeout(scan,100);
})();
You are over complicating things. Here is simple JS to the job.
Div element takes no value parameter, it takes inerHTML, and texatera and input takes value.
document.querySelector('#input').addEventListener('keyup', val, false);
function val() {
[...document.querySelectorAll('.result')].forEach(el => {
el.value=this.value;
el.innerHTML=this.value;
})
}
JS EXAMPLE:
document.querySelector('#input').addEventListener('keyup', val, false);
function val() {
[...document.querySelectorAll('.result')].forEach(el => {
el.value=this.value;
el.innerHTML=this.value;
})
}
input[type=text],
select,
textarea {
display: block;
width: 27em;
margin-top: 4em;
height: 34px;
font-size: 1.2em;
font-family: "sans-serif";
border: 2px solid #000;
padding: 2px 10px;
font-family: arial;
font-size: 18px;
}
.result {
margin-top: 20px;
width: 20em;
height: 5em;
float: left;
font-family: arial;
font-size: 18px;
background: #333;
color: #fff;
margin-right: 1em;
padding: 10px;
}
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result"></textarea>
<input type="text" class="result" />
If you want to do this in jQuery:
You have to use .text() or .html() for divs, and .val() for input and textarea
$("#input").keyup(function(){
let inValue=$(this).val();
$(".result").each(function(){
$(this).text(inValue);
$(this).val(inValue);
});
});
jQuery EXAMPLE:
$("#input").keyup(function(){
let inValue=$(this).val();
$(".result").each(function(){
$(this).text(inValue);
$(this).val(inValue);
});
});
input[type=text],
select,
textarea {
display: block;
width: 27em;
margin-top: 4em;
height: 34px;
font-size: 1.2em;
font-family: "sans-serif";
border: 2px solid #000;
padding: 2px 10px;
font-family: arial;
font-size: 18px;
}
.result {
margin-top: 20px;
width: 20em;
height: 5em;
float: left;
font-family: arial;
font-size: 18px;
background: #333;
color: #fff;
margin-right: 1em;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result"></textarea>
<input type="text" class="result" />
I am trying to make this website about time management for a project at school. I am trying to create a input (text box) that when the button "add task" is click it is placed (the text inside of it) in a paragraph or p2 and then the input is moved down.
This I think is the problematic section:
Sorry I have posted all the html, css, and Javascript in the html section of the code snippet
Please I really need help
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
function generateRow() {
var d = document.getEleme ntById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I think this is the problematic part
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
This image is what it looks like. As you can see the text box is where you put in the task you want or other input and then when you click the green button it will place it will place it above the current input box as a p2 and then the user is able to add another task.
I know there is a lot of extra code however, I hope you get the basic idea
Something like this
You can't name a variable as a number. You'd need to name it something else - also note you shouldn't have the var when you're using the variable.
var val = document.getElementById("first").value;
document.getElementById("p1").innerHTML = val;
Here you go.
Obviously you can't add rows because that function isn't created yet
As an advice I suggest you to use placeholder in your input instead of value.
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function generateRow() {
var d = document.getElementById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
as you can see on my snippets, I could search only for the first name e.g. full name"ABDOL JABAR BAKARI" and the first name is "abdol" and only the name "abdol" is utilize in the filter function which it must all the string inside that data attribute named "data-fullname" will filtered. any ideas, clues, help, suggestions, recommendation to make it search the whole string inside the data attribute named "data-fullname" and search also from the string inside the data attribute named "data-job"?
$(document).ready(function(){
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase();
$('.profile').hide().filter(function() {
var name = $(this).attr('data-fullname').toLowerCase();
return value.trim().length < 1 || name.indexOf(value) === 0;
}).show();
});
});
.profile{
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1{
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p{
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>
A simple change required. Instead of checking for name.indexOf(value) !== -0;, you should check for name.indexOf(value) !== -1;
$(document).ready(function(){
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase();
$('.profile').hide().filter(function() {
var name = $(this).attr('data-fullname').toLowerCase();
return value.trim().length < 1 || name.indexOf(value) !== -1;
}).show();
});
});
.profile{
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1{
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p{
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>
The problem is the condition name.indexOf(value) === 0 which matches the search term to only the start of the string.
If the searched term is not found indexOf will retrn -1, so just check the returned value is > 1 to check whether the term is present in the string like name.indexOf(value) > -1;
$(document).ready(function() {
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase().trim();
if (value) {
//do this only if a filter condition is present
$('.profile').hide().filter(function() {
var name = $(this).data('fullname').toLowerCase();
return name.indexOf(value) > -1 || $(this).data('job').toLowerCase().indexOf(value) > -1;
}).show();
} else {
$('.profile').show();
}
});
});
.profile {
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1 {
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p {
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>
I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.
This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.