Checkbox in codeigniter - html

Here i am using Bootstrap for checkbox ... While i am click checkbox it checked but in the bootstrap design it was not shown ...
my Code:
<label for="success" class="btn btn-success">Success <input type="checkbox" value="" id="success" class="badgebox"><span class="badge">&check;</span></label>
My css code:
<style>
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}</style>

Controller
public function workout()
{
if($this->input->post())
{
echo "<pre>"; print_r($this->input->post());
exit();
}
$this->load->view('workout');
}
view file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.sr-only {
opacity: 0;
float: right;
}
input[type='checkbox'].tags-checkbox:checked + label > i:first-of-type,
input[type='checkbox'].tags-checkbox + label > i:last-of-type{
display: none;
}
input[type='checkbox'].tags-checkbox:checked + label > i:last-of-type{
display: inline-block;
}
</style>
<form name="form" id="form" action="<?php echo base_url(); ?>welcome/workout" method="post" >
Vehicles you have.?
<br /><br />
<div><span class='label-content'> I have a car</span>
<input name="optionshaving[]" type='checkbox' id='checkbox-1' value="bike" class='tags-checkbox sr-only'/>
<label for='checkbox-1'>
<i >✗</i>
<i >&check;</i>
</label>
</div>
<div><span class='label-content'> I have a bike</span>
<input name="optionshaving[]" type='checkbox' value="car" id='checkbox-2' class='tags-checkbox sr-only'/>
<label for='checkbox-2'>
<i >✗</i>
<i >&check;</i>
</label>
</div>
<input type="submit" name="submit" id="submit" value="submit" />
</form>
</body>
</html>
output is
Array
(
[optionshaving] => Array
(
[0] => bike
[1] => car
)
[submit] => submit
)

Related

How to show or hide a div if the div is present and has a value

<fieldset class=​"crm-public-form-item crm-group payment_options-group" style=​"display:​ block !important;​ visibility:​ visible;​">​
<div class=​"crm-public-form-item crm-section payment_processor-section" style=​"display:​ block;​">​
<div class=​"content">
​<input class=​"payment_processor_1 crm-form-radio" value=​"5" type=​"radio" id=​"CIVICRM_QFID_5_payment_processor_id" name=​"payment_processor_id">
<input class=​"payment_processor_2 crm-form-radio" value=​"3" type=​"radio" id=​"CIVICRM_QFID_3_payment_processor_id" name=​"payment_processor_id">​
</div>​
</div>​
</fieldset>​
<div id=​"crm-submit-buttons" class=​"crm-submit-buttons" style=​"visibility:​ visible;​ display:​ block;​">
​ <button class=​"crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value=​"1" type=​"submit" name=​"_qf_Main_upload" id=​"_qf_Main_upload-bottom">​…​</button>​
</div>​
I have this html block and I am bit stuck with validation. Conditions are
payment_options-group fieldset must present on this page
And at least one of the radio button is checked
Then show crm-submit-buttons div
Otherwise hide crm-submit-buttons div
I have tried the following but could not get it to work, also not sure how to define the condition payment_options-group fieldset must present on this page. This is important because "crm-submit-buttons" is controlled by other fieldset, which is not present on this page.
if( $("#payment_options-group").val().length === 1 ) {
$("div#crm-submit-buttons").show();
}
else {
$("div#crm-submit-buttons").hide();
}
Any help would be appreciated. Thanks in advance.
You can check if the length is > 0 then checkbox is checked and fieldsets is present depending on this show or hide div .
Demo Code :
console.log($(".payment_options-group").length + "--length of fielset")
console.log($("input[name=payment_processor_id]:checked").length + "--length of chekd")
//check if fieldset is prsent and checked length if > 0
if (($(".payment_options-group").length > 0) && ($("input[name=payment_processor_id]:checked").length > 0)) {
$("div#crm-submit-buttons").show();
} else {
$("div#crm-submit-buttons").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="crm-public-form-item crm-group payment_options-group" style="display:block !important; visibility: visible;">
<div class="crm-public-form-item crm-section payment_processor-section" style="display:block;">
<div class="content">
<input class="payment_processor_1 crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id">
<input class="payment_processor_2 crm-form-radio" value="3" type="radio" id="CIVICRM_QFID_3_payment_processor_id" name="payment_processor_id" checked>
</div>
</div>
</fieldset>
<div id="crm-submit-buttons" class="crm-submit-buttons" style="visibility:visible; display:block;">
<button class="crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value="1" type="submit" name="_qf_Main_upload" id="_qf_Main_upload-bottom">​…</button>
</div>
Here is a demo with checkboxes that might be easier to understand as you can uncheck to see the button disappear again:
$(".crm-submit-buttons").hide(); // hides button on load
$('.crm-form-radio').on('click', function() {
if ($('.payment_options-group').length > 0 && $('.crm-form-radio:checked').length) {
$(".crm-submit-buttons").show();
} else {
$(".crm-submit-buttons").hide();
}
})
fieldset{
width: 200px;
}
button {
margin-top: 10px;
border-radius: 4px;
background: lightblue;
display: inline-block;
padding: 5px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="payment_options-group">
<input class="crm-form-radio" value="5" type="checkbox" name="payment_processor_id">
<input class="crm-form-radio" value="3" type="checkbox" name="payment_processor_id">
</fieldset>
<div class="crm-submit-buttons"><button>Button</button></div>

Changing button background color when a certain condition has been met

I want the button to change its background color only when the input text length is 10, when I hover over it.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form class="details">
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
</form>
<button id="button" onmouseover="hovar()">Register</button>
<script src="back_end.js" async></script>
</body>
</html>
css:
#button{
font-size:20px;
margin-left: 600px;
border-radius: 8px;
}
#button:hover{
background-color: lightsalmon;
color: aquamarine;
}
javascript:
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.onmouseover.style.backgroundColor="lightsalmon"
}
else{
btn.onmouseover.style.backgroundColor="chartreuse"
btn.onmouseover.style.color="black"
}
}
But I keep getting this error in the javascript:
**Uncaught TypeError: Cannot set property 'backgroundColor' of undefined**
What am I doing wrong here?
you want to apply a "style" property to an event (onmouseover)
function hovar()
{
var phone = document.getElementById("ph_number").value;
var btn = document.getElementById("button");
if (phone.length!=10)
{
btn.style.backgroundColor="lightsalmon" // remove onmouseover
}
else
{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
I think this is what you are looking for (?):
const phone = document.getElementById("ph_number")
, btn = document.getElementById("button")
;
phone.oninput = () =>
{
if (phone.value.length != 10)
{
btn.style.setProperty('--hoverBG', 'lightsalmon')
btn.style.setProperty('--hoberColor', 'aquamarine')
}
else
{
btn.style.setProperty('--hoverBG', 'chartreuse')
btn.style.setProperty('--hoberColor', 'black')
}
}
#button {
--hoverBG : lightsalmon;
--hoberColor : aquamarine;
font-size : 20px;
margin-left : 50px;
border-radius : 8px;
}
#button:hover{
background-color : var(--hoverBG);
color : var(--hoberColor);
}
input[type="checkbox"] + label + input {
visibility: hidden;
}
input[type="checkbox"]:checked + label + input {
visibility: visible;
}
<h2>Cafeteria registration</h2>
<form class="details">
Organization:
<div id="org">
<input type="checkbox" id="cb1">
<label for="cb1">ID no : </label>
<input type="number" id="org_number" >
<br><br>
<input type="checkbox" id="cb2">
<label for="cb2">Mobile No: </label>
<input type="tel" id="ph_number" placeholder="phone 10c">
</div>
<br><br>
</form>
<button id="button">Register</button>

How to display the html div so that after form submit the error messgae is displayed automatically

I have a form that validates whether the username and password is correct or not but it does not show the error messages unless i click on the form again.The form is inside a html div tag, I want to know how to style the div with css so that the error messages can be displayed automatically after form submit. Here is my code
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<form action="/" charset="UTF-8" method="post">
<div class="error-message alert-danger">
<span>Sorry, unrecognized username or password.Have you forgotten your password?</span>
</div>
The error message is not displayed automatically after inserting wrong input and so I would be grateful if you can tell me how to style the div using css to make it visible after submitting wrong input
If you want to do it without js, you could use
:valid
:invalid
CSS pseudo class and style the border of the input accordingly.
You could also attach a pattern to the validation.
Check: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
For checking wheather username and other filed are empty or not, you have to just add required inside the tag like <input type="text" name="full-name" id="full-name" placeholder="Name" required /> An for validation visit https://www.w3schools.com/js/js_validation.asp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #eee;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
color: #222;
}
#form {
max-width: 700px;
padding: 2rem;
box-sizing: border-box;
}
.form-field {
display: flex;
flex-wrap: wrap;
margin: 0 0 1rem 0;
}
label, input {
width: 70%;
padding: 0.5rem;
box-sizing: border-box;
justify-content: space-between;
font-size: 1.1rem;
}
label {
text-align: right;
width: 30%;
}
input {
border: 2px solid #aaa;
border-radius: 2px;
}
.error-message {
flex: 0 0 100%;
margin-left: 30%;
color: red;
}
<form method="post" action="/" id="form" class="validate">
<div class="form-field">
<label for="full-name">Full Name</label>
<input type="text" name="full-name" id="full-name" placeholder="Name" required />
</div>
<div class="form-field">
<label for="email-input">Email</label>
<input type="email" name="email-input" id="email-input" placeholder="test#gmail.com" required />
</div>
<div class="form-field">
<label for="password-input">Password</label>
<input type="password" name="password-input" id="password-input" required />
</div>
<div class="form-field">
<label for=""></label>
<input type="submit" value="Sign Up" />
</div>
</form>
If you can use jquery, and if you want customise your kind of error,
like, if you enter, 'map', derive' or 'glossary, you have different message.
If you enter '???' or anything else you'll have your message 'Sorry, unrecognized...'
You can use :
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {background-color: red;}
#div2 {background-color: blue;}
#div3 {background-color: black;
color: white;}
#error {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<!-- form action="/" charset="UTF-8" method="post" -->
<input type="text" placeholder="ENTER COMMAND" />
<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.Have you forgotten your password?</span></div>
<script>
$(document).ready(function() {
// Hide both <div> by default
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
// Check on keydown
$('input').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
if (value == 'map') { // If input value is div1
$('#div1').slideDown();
} else if (value == 'derive') { // If input value is div2
$('#div2').slideDown();
} else if (value == 'glossary') { // If input value is div3
$('#div3').slideDown();
} else if (value != '') { // If input value is wrong
//$('#error').html(value + " is an incorrect input value");
$('#error').slideDown();
}
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {background-color: red;}
#div2 {background-color: blue;}
#div3 {background-color: black;
color: white;}
#error {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<form action="submit_form.php" method="post" id="form_1" charset="UTF-8" >
<input id="submit_form" type="text" placeholder="ENTER COMMAND" />
</form>
<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.Have you forgotten your password?</span></div>
<script>
$(document).ready(function() {
// Hide both <div> by default
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
// Check on keydown
$('input').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
if (value == 'map') { // If input value is div1
$('#div1').slideDown();
} else if (value == 'derive') { // If input value is div2
$('#div2').slideDown();
} else if (value == 'glossary') { // If input value is div3
$('#div3').slideDown();
} else if (value != '') { // If input value is wrong
//$('#error').html(value + " is an incorrect input value");
$('#error').slideDown();
}
}
});
});
$('#submit_form').addEventListener('click', function (event) {
// Prevents form from submitting
event.preventDefault();
$.ajax({
type: "POST",
url: "submit_form.php",
dataType: "json",
data: $('#form_1').serialize(),
success: function (json) {
$('.message_center').html('');
if(json['success']) {
$('.message_center')
.html('<div class="row">'+
' <div class="col-md-12">'+
' <div class="alert alert-success alert-dismissible">'+
' <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
' <h4><i class="icon fa fa-check"></i> Success!</h4>'+
' '+json['success']+''+
' </div>'+
' </div>'+
' </div> ');
}
if(json['error']) {
var html='';
$.each( json['error'], function( key, value ) {
html += value+'<br>';
});
$('.message_center')
.html('<div class="row">'+
' <div class="col-md-12">'+
' <div class="alert alert-warning alert-dismissible">'+
' <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
' <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
' '+html+''+
' </div>'+
' </div>'+
' </div> ');
}
}
});
});
</script>
</body>
</html>

Styling up hidden input

I'm trying to style up a hidden input field, but I'm not getting it quite right.
It may sound strange trying to style up an input box that's hidden - reason being is that the text in those fields are shown upon clicking the submit button, and I'd like to change the font and colour so it matches the rest of the page.
Code below (I have just removed the company details in URLs)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onsubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span><input type="text" name="extensionField_Name" /><br /><br>
<span>Email:</span><input type="text" name="extensionField_Email" /><br /> <br>
<span>Phone number:</span><input type="text" name="extensionField_PhoneNumber" /><br /><br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br />
<option value="Chat_Csq7">General</option>
</select><br><br />
<input type="submit" value="Submit" /><input type="hidden" name="author" value="Customer" /><br />
<input type="hidden" name="title" value="ccx chat" /><br />
<input type="hidden" name="extensionField_h_widgetName" value="ChatGeneral" /><br />
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg"><br />
<input type="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>
you can use this class:
.Hidden{
display:none;
}
and you can call this class for all objects that you need to hide.
1) Add a class to those hidden inputs (let's call it "hiddenField")
2) Add whatever styles like this
.hiddenField{
font-color:red;
font-size:12px;
}
3) Call something this to make them visible
if(document.getElementById(id).getAttribute('type') == 'hidden') {
document.getElementById(id).setAttribute('type', 'text');
}
Instead use normal text box with class "hidden" having style display: none. This will hide the text box.
You can make it visible by setting display back to initial using JavaScript like
document.getElementsByName('author')[0].style.display = 'initial';
Snippet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
/* Use this code to display the element */
document.getElementsByName('author')[0].style.display = 'initial';
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
/* Use this to hide the input text box */
.hidden {
display: none;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onSubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span>
<input type="text" name="extensionField_Name" />
<br/>
<br>
<span>Email:</span>
<input type="text" name="extensionField_Email" />
<br/>
<br>
<span>Phone number:</span>
<input type="text" name="extensionField_PhoneNumber" />
<br/>
<br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br/>
<option value="Chat_Csq7">General</option>
</select>
<br>
<br/>
<input type="submit" value="Submit" />
<input type="text" class="hidden" name="author" value="Customer" />
<br/>
<input type="text" class="hidden" name="title" value="ccx chat" />
<br/>
<input type="text" class="hidden" name="extensionField_h_widgetName" value="ChatGeneral" />
<br/>
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="text" class="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg">
<br/>
<input type="text" class="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="text" class="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="text" class="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>

Stylesheet for .html document not imported

I have this form I created in HTML (called form.html) written in google apps script and I also have a stylesheet (CSS) to go with that. All is working well when I have the CSS in the same HTML-file as the form. However if I want to put my stylesheet in a separate HTML-file (called Stylesheet.html) and then include it in the form.html by using a scriplet
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
or even creating an 'include' function:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
and then in form.html
<?!= include(Stylesheet) ?>
..it doesn't seem to work. What's even worse the scriplet shows up on the form.
Maybe there is something basic I am overlooking, but I can't wrap my head around this. Any ideas ?
Here is the code so far...
function doGet() {
return HtmlService.createHtmlOutputFromFile('Formulier')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
function materiaalLijst(afdnum) {
return SpreadsheetApp.openById('1l6MKG61GHMFSZrOg04W4KChpb7oZBU9VKp42FPXmldc')
.getSheetByName('RESERVATIE')
.getDataRange()
.getValues()
.map(function (v) {
return v[Number(afdnum) - 1]
})
.splice(1);
}
//work in progress
function processForm(form) {
Logger (form); //array containing form elements
}
<style>
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on every browsers */
resize: vertical;
}
</style>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<form id="myForm">
<!-- Text input field -->
<div>
<label for="name">Naam:</label>
<input type="text" id="name" placeholder="Voornaam + naam" required>
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" required>
</div>
<div>
<label for="Afdeling">Afdeling:</label>
<input type="radio" id="1" name="Afd" value="Oostende">Oostende
<input type="radio" id="2" name="Afd" value="Brugge">Brugge
<input type="radio" id="3" name="Afd" value="Westhoek">Westhoek
</div>
<div>
<label for="datepicker">Datum:</label>
<input type="date" id="resdatum" required>
</div>
<div>
<label for="timepicker">Uur:</label>
<input type="time" id="restijd" required>
</div>
<div>
<label for="Frequentie">Frequentie:</label>
<input type="radio" name="freq" value="éénmalig" required>éénmalig
<input type="radio" name="freq" value="meermaals">voor meerdere weken
</div>
<div>
<label for="Materiaal">Materiaal:</label>
<select id="materiaal" name="materiaalselectie" required>
<option value="notSel">Kies..</option>
</select>
</div>
<div>
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" id="verzenden" name="verzenden" class="verzenden" value="Reservatie verzenden" >
</div>
<div id="output"></div>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("input:radio[name=Afd]").click(function() {
go(this.id);
});
function go(idAfd) {
google.script.run.withSuccessHandler(showList).materiaalLijst(idAfd);
}
function showList(things) {
var list = $('#materiaal');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<option value="' + things[i] + '">' + things[i] + '</option>');
}
}
//below is work in progress...
$('#myForm').submit(function(e) {
e.preventDefault();
var arr =[];
//var fields = $( ":input" ).serializeArray();
$.each( $( ":input" ).serializeArray(), function( i, field ) {
arr.push( field.value);
});
var json = JSON.stringify($('#myForm').serializeArray());
google.script.run.processForm(arr);
alert(arr);
})
</script>
The result with CSS IN the form.html
and here is the CSS in a separate .html file and included
in form.html with
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
You're doing this right:
Your css file must be an HTML file, as those are the only type supported by HtmlService. If you look at the starter scripts, you'll find that they have Stylesheet.html, with content:
<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
...
</style>
You know the google css is working if your sidebar or dialog looks pretty much like google stuff - same font, same text size. To have an action button be blue, you need to add the appropriate class to it, class="action".
Why isn't yours working?
Get ready for a face-palm moment...
You're using scriptlets, part of the Html Service templated HTML. They require interpretation, which is not done by HtmlService.createHtmlOutputFromFile(). (That's why you see the scriptlet line literally.)
Instead, you need to read the file containing scriptlets as a template, and then .evaluate() it.
function doGet() {
return HtmlService.createTemplateFromFile('form')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
To display the google-themed action button, include the Apps Script CSS and add "action" class:
<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="Reservatie verzenden" >
How about to name it Stylesheet.css?
And try to include it via normal HTML in the header.
<link rel="stylesheet" href="Stylesheet.css" type="text/css">
HTH