here is my code. i have created a button and on click event i want to display form but my form is not displaying.
gives an error " Uncaught SyntaxError: Invalid or unexpected token"
<input id="Result" name="display" type="button" value="Cost Report" onclick= document.getElementById("form id").style.display="block";
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" style="display: block;">Results</form>
</div>
When binding events to element, they should be wrapped by " or '.
<input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form id").style.display="block";' style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" style="display: none;">Results</form>
</div>
Try this. you should add single quotes onclick='document.getElementById("form id").style.display="block";'
<input id="Result" name="display" type="button" value="Cost Report" onclick= 'document.getElementById("form id").style.display="block";'
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div> <form id="form id" style="display: none;">Results</form></div>
fiddlelink
There should not be any space in id's, as id for a DOM element is unique. So please change your form id to something like id="form-id".
Also set form display:none.
<input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form-id").style.display="block";'
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div> <form id="form-id" style="display: none;">Results</form></div>
you can use ng-show and make your form visible on click and viceversa
<input id="Result" name="display" type="button" value="Cost Report" onclick= "showForm=!showForm"
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" ng-show="showForm">Results</form>
</div>
Related
I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>
You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.
You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>
Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>
you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)
After submitting the buttons, it doesn't redirect to another page. Can someone please help to find the error in this code and why my buttons typ1 and cod does not redirect to the location which I already given.
<?php
include("connect.php");
include("common.php");?>
<html>
<head>
<script>
function cd()
{
document.getElementById('credit').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('net').style.display='none';
document.getElementById('cash').style.display='none';
}
function db()
{
document.getElementById('debit').style.display='block';
document.getElementById('credit').style.display='none';
document.getElementById('net').style.display='none';
document.getElementById('cash').style.display='none';
}
function ns()
{
document.getElementById('net').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('credit').style.display='none';
document.getElementById('cash').style.display='none';
}
function cs()
{
document.getElementById('cash').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('credit').style.display='none';
document.getElementById('net').style.display='none';
}
function validate(inputtxt)
{
var card1 = /^(?:3[47][0-9]{13})$/;
if(inputtxt.value.match(card1))
{
return true;
}
else
{
alert("Not a credit card number!");
return false;
}
if(card1.length!=16)
{
alert("Only 16 digits are allowed");
return false;
}
}
</script>
<style>
.d2
{
border: 1px solid black;
font-size: 30px;
color: white;
background-color: #242222;
padding: 15px 15px 15px 50px;
font-family: Arial;
font-style:;
}
.tab{
width:100%;
height: 400px;
padding:25px 10px 10px 25px;
font-size: 25px;
padding:15px;
border:1px solid black;
border-collapse:collapse;
}
#credit
{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#debit{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#net{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#cash{
width:600px;
height:100%;
padding :25px 15px 15px 15px;
font-size: 20px;
float: left;
}
.card{
border: 1px solid black;
}
</style>
</head><body>
<form method="post">
<?php
if(isset($_SESSION['sum']))
{
$s1=$_SESSION['sum'];
echo "
<div class='d2'> Make Payment</div>
<div>
<table class='tab'><tr><td><button name='cr' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;width:300px;background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' class= 'c1' onclick='cd()'>Credit Card</button>
<br/>
<button name='dr' class='d1' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;width:300px;background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' onclick='db()'>Debit Card</button>
<br/>
<button name='nb' class='n1' style='padding: 14px 20px 14px 20px;font-size:15px;color:white; width:300px; background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' onclick='ns()'>Net Banking</button>
<br/>
<button name='cash' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;background-color:#373535;width:300px; cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;'onclick='cs()'>Cash On Delivery</button>
</td>
<td ><div id='credit' > <h2>Pay using Credit</h2>
<hr>
<label>Card number :</label> <span class='card'><input type='text' name='cardno' placeholder='Card number' required='true'/></span>
<br/>
<br/>
<label>Expiry Date:</label> <input type'text' name='month' placeholder='MM' required='true'/>
<input type'text' name='year' placeholder='YY' required='true'> <input type'text' name='cvv' placeholder='CVV' required='true'/>
<br/>
<br/>
<button type='submit' name='typ1' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'>
<center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='debit' style='display:none' > <h2>Pay using Debit Card</h2>
<hr>
<label>Card number :</label> <input type='text' name='cardno' placeholder='Card number' required='true'/>
<br/>
<br/>
<label>Expiry Date:</label> <input type'text' name='mm' placeholder='MM' required='true'>
<input type'text' name='yy' placeholder='YY' required='true'> <input type'text' name='cvv' placeholder='CVV' required='true'>
<br/>
<br/>
<button type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'><center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='net' style='display:none'> <h2>Pay using Net Banking</h2>
<hr/>
<label>Select Bank:</label><input type='radio' value='ICICI'>ICICI <input type='radio' value='HDFC'>
HDFC <input type='radio' value='Axis'>Axis
<br/>
<br/>
<label>Account number :</label> <span class='card'>
<input type='text' name='cardno' placeholder='Enter your Account number' required='true'/>
</span>
<br/>
<br/>
<button type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'><center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='cash' style='display:none'> <h2>Pay using Cash On Delivery</h2>
<hr width=100%/>
<button name='cod' type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'>
Place COD Order</button>
<br/>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
</td>
</tr>
</table>
</div>
";
}
?>
</form></body></html>
<?php
if(isset($_POST['typ1']))
{
$_SESSION['s2']=$_SESSION['sum'];
$card=$_POST['cardno'];
$mon=$_POST['month'];
$yr=$_POST['year'];
$cv=$_POST['cvv'];
$_SESSION['card']=$card;
$q7="select * from bank where card_no=$card";
$qry6= mysql_query($q7);
while($r7=mysql_fetch_array($qry6))
{
$m=$r7[3];
$y=$r7[4];
$c=$r7[5];
$money=$r7[6];
if($mon==$m && $yr==$y && $cv==$c)
{
header("location:redirect.php");
}
else{
echo "<script>alert('Your details doesnot match');</script>";
}
}
}
if(isset($_POST['cod']))
{
header("location:cod.php");
}
?>
you didn't write which page form submit.
<form method="post"><!-- action="isWhere" -->
Also you can write your code like this. I think this way is better than your wrote.
<?php
if(isset($_SESSION['sum']))
{
$s1=$_SESSION['sum'];
?>
<form method="post" action="isWhere">...</form>
<?php
}
?>
I have looked at a lot of these pages and questions with this. I have found the right answer but I cannot figure it out to save my life. I want to do something very similar to the second question, but I cannot figure out how to do it.
Style input element to fill remaining width of its container
What I am trying to do is have all the input stretch the whole way to the other side, but they are just stopping at the end of the form section. I feel that the form is my issue and not the input boxes. How do I get the form to stretch to the width of its parent. I have attached the whole code now to see if that helps.
<style>
div.modal-header{background-color: #1A2930; color: white; }
div.modal-footer{ background-color: #1A2930; color: white; }
div.modal-body{ background-color: #F0F0F0; color: #0A1612; width: 100%; }
div.movement-modal-form{ width: 100%; }
label
{
float: left;
font-size: 20px
}
span{
display: block;
overflow: hidden;
width: 100%
}
input
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
color: black;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px
}
textarea
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
width : 100%
}
</style>
<div id="movement-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">❌ </button>
<h4 id="modal-title" class="modal-title">{{#i18n}}inventory.modify.button.new-movement{{/i18n}}</h4>
</div>
<div class="modal-body">
<form id="movement-modal-form"
>
{{>inventory/partials/movement-id-field-modal}}
{{>inventory/partials/product-fields-modal}}
<br/>
<p>
<!--This is #4-->
<label id="movement-lable" for="movement-date">{{#i18n}}inventory.modify.table.movement-date{{/i18n}}</label>
<input id="movement-date" class="movement-date" type="date" required>
</p>
<br/>
<p>
<!--This is #5-->
<label for="store-from">{{#i18n}}inventory.modify.table.store-from{{/i18n}}</label>
<br/>
<br/>
<select id="store-from" class="store-from"required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--this is # 6-->
<label for="store-from-current-quantity">{{#i18n}}inventory.movement.modal.store-from-current-quantity{{/i18n}}</label>
<input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--This is # 7-->
<label for="store-to">{{#i18n}}inventory.modify.table.store-to{{/i18n}}</label>
<select id="store-to" class="store-to" required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--8-->
<label for="store-to-current-quantity">{{#i18n}}inventory.movement.modal.store-to-current-quantity{{/i18n}}</label>
<input id="store-to-current-quantity" class="product-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--9-->
<label for="movement-quantity">{{#i18n}}inventory.modify.table.quantity-requested{{/i18n}}</label>
<input id="movement-quantity" class="movement-quantity" type="number" step="1" min="1" pattern="\d*" required>
</p>
<br/>
<!--10 Notes-->
{{>inventory/partials/note-field-modal}}
<input type="submit" style="display: none">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" style="float: left">{{#i18n}}inventory.modify.button.cancel{{/i18n}}</button>
<button id="movement-modal-submit" type="button" class="btn btn-success" style="float: right">{{#i18n}}inventory.movement.modal.button.save{{/i18n}}</button>
</div>
</div>
It looks like your modal-body.width value isn't working like you intend. I'm not sure if your question is clear, but it looks like you want the input to be the width of the modal-body.
If that is the case, then you could just set the width on the movement-date class to 100%. This will set the width of the input element to be 100% width of the parent element, in this case, the modal-body.
div.modal-body{
background-color: white;
color: black;
margin: 20px 0 20px 0;
padding: 15px;
width: 500px;
overflow: hidden;
}
input.movement-date {
background-color:lightgray;
border: solid 2px #6E6E6E;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px;
}
<div class="modal-body">
<form id="movement-modal-form">
<p>
<label id="movement-lable" for="movement-date"></label>
<input id="movement-date" class="movement-date" type="date" required/>
</p>
</form>
</div>
My knowledge of listeners is new. I understand what they're for but not 100% on how to set them up. I'm working on a basic project that needs a listener so that when a blank form is submitted it will highlight the text boxes red. The red boxes will then go away when the text is typed into the boxes. I believe I have everything setup but the listeners. Feel free to correct if im wrong but im looking for assistance with a couple steps. I know that im close or at least feel that this is the only step I dont quite understand yet:
Set up a listener on the form’s submit event so that the code prevents submission of the form (preventDefault()) if either the title or description field is left blank or the accept license box is not checked, but otherwise submits the form.
Enhance the JavaScript so that blank fields trigger a change in the appearance
of the form (using the style defined earlier).
Add another listener to the fields so that when the user types into a field
(changed event) JavaScript removes the red color you just added.
Here is my code:
function isBlank(inputField){
if(inputField.type=="checkbox"){
if(inputField.checked)
return false;
return true;
}
if (inputField.value==""){
return true;
}
return false;
}
function makeRed(inputDiv){
inputDiv.style.backgroundColor="#AA0000";
inputDiv.parentNode.style.backgroundColor="#AA0000";
inputDiv.parentNode.style.color="#FFFFFF";
}
function makeClean(inputDiv){
inputDiv.parentNode.style.backgroundColor="#FFFFFF";
inputDiv.parentNode.style.color="#000000";
}
window.onload = function(){
var mainForm = document.getElementById("mainForm");
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
requiredInputs[i].onfocus = function(){
this.style.backgroundColor = "#EEEE00";
}
}
mainForm.onsubmit = function(e){
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
if( isBlank(requiredInputs[i]) ){
e.preventDefault();
makeRed(requiredInputs[i]);
}
else{
makeClean(requiredInputs[i]);
}
}
}
}
/* general text formatting */
h1, h2, h3, nav, footer {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
font-size: 85%;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 90%;
margin: 0 auto;
}
table tbody td{
/* border: 1pt solid #95BEF0; */
line-height: 1.5em;
vertical-align: top;
padding: 0.5em 0.75em;
}
legend {
background-color: #EBF4FB ;
margin: 0 auto;
width: 90%;
padding: 0.25em;
text-align: center;
font-weight: bold;
font-size: 100%;
}
fieldset {
margin: 1em auto;
background-color: #FAFCFF;
width: 60%;
}
form p {
margin-top: 0.5em;
}
.box {
border: 1pt solid #95BEF0;
padding: 0.5em;
margin-bottom: 0.4em;
}
.rectangle {
background-color: #EBF4FB;
padding: 0.5em;
}
.centered {
text-align: center;
}
.rounded, .rounded:hover {
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
border-radius: 5px;
text-align: center;
color: white;
background-color: #8c9cbf;
padding: 0.5em 0 0.5em 0;
margin: 0.3em;
width: 7em;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
}
.rounded:hover {
background-color: #7f8dad;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Chapter 6</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="css/Lab5.css" />
<script type="text/javascript" src="script/Lab5.js"></script>
</head>
<body>
<!-- <form method="get" action="" id="mainForm"> "Your original line of code replaced with your line of code from Lab 4 -->
<form method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80" class="required" />
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61" class="required">
</textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" class="required">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: </label><br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: </label><br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: </label><br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: </label><br/>
<input type="time" name="time" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
On submit (object is your form):
object.onsubmit = function(){
//things you want to happen on form submit
};
In order to listen to inputs (object is an input field), try this:
object.oninput = function(){
//things that happen during input
};
PS: This will be much easier using jQuery.
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.