Can anyone help with a script which has stopped working:
It's a html/css form created (last year) to get the responses on a google spreadsheet alongside the the files uploaded within a folder. It was working fine until beginning of this year, but it doesn't anymore. I mean as usual, I run a function + deploy app, I get the link and the form appears, but upon submission I get nothing, blank page and the spreasheets doesn't contain anything.
Thanks a lot for your guidance.
Here are my codes:
Form.html
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">
img {
display: block;
margin-left: auto;
margin-right: auto;
width:500px;
height:170px;
;
}
form {
width:450px;
padding:30px;
margin: auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
h2 {
width:450px;
padding:30px;
margin: auto;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 10px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
input[type="button"],
input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
input[type="button"]:hover,
input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
</style>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<img src="http://www.greenman-advertising.com/wp-content/uploads/2013/08/header_problemSolving_03.jpg">
<form id="myForm" runat="server">
<h1>Job application<span>Apply now and get the opportunity to join us!</span></h1>
<section> <span>1</span>Personal details</section>
Full name: <input type="text" name="name" placeholder="First name & Last name"/><br/>
Date of birth: <input type="text" name="birth" placeholder="dd/mm/yyyy"/><br/>
Nationality: <select name="nationality">
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select><br/>
Marital status: <select name="marital">
<option>...</option>
<option>Married</option>
<option>Single</option>
</select><br/>
Please state the age of your children who will be registered in our school: <input type="text" name="children" placeholder="Example: 5;9;12 or 0"/><br/>
<section> <span>2</span>Experiences and qualifications</section>
Years of experience: <select name="years">
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>10+</option>
</select><br/>
Highest qualification obtained: <input type="text" name="qualification" placeholder="Example: Degree, Master, .."/><br/>
Educational qualification obtained: <input type="text" name="educational" placeholder="Example: QTS,PGCE,CELTA, .."/><br/>
English language level: <select name="profiency">
<option>...</option>
<option>Fluent English proficient</option>
<option>Advanced</option>
<option>Intermediate</option>
<option>Early intermediate</option>
<option>Beginner</option>
</select><br/>
<section> <span>3</span>Position applied for</section>
Subject: <select name="subject">
<optgroup label="Teaching">
<option>...</option>
<option>Arts</option>
<option>Biology</option>
<option>Chemistry</option>
<option>Computer Science</option>
<option>English</option>
<option>Math</option>
<option>Physics</option>
<option>Science</option>
<option>Social Studies</option>
</optgroup>
<optgroup label="Other">
<option>...</option>
<option>Principal</option>
<option>Deputy principal</option>
<option>Educational spervisor</option>
</optgroup>
</select><br/>
Grade level ( or Section): <select name="grade">
<option>...</option>
<option>Higher grades</option>
<option>Lower grades</option>
<option>IGCSE</option>
<option>AS</option>
<option>A2</option>
<option>SAT</option>
</select><br/>
<section> <span>4</span>Contact details</section>
Email: <input type="email" name="email" placeholder="example#domain.com"/><br/>
Phone number: <input type="text" name="phone" placeholder="[+]code country/phone number"/><br/>
Skype: <input type="text" name="skype" placeholder="username"/><br/>
<section> <span>5</span>Attachments</section>
CV (pdf/doc/docx only): <input type="file" name="myFile"/><br/>
Qualification (scan): <input type="file" name="myFile2"/><br/>
Other qualification (scan): <input type="file" name="myFile3"/><br/>
Passport (scan): <input type="file" name="myFile4"/><br/>
<input type="submit" value="Apply"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" /><br/>
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Code.gs
var submissionSSKey = '1urIXPV2NdsqTJ5zXJb1_t_EdsY7Kuh3VcSBJ4cnPIEg';
var folderId = "0B0lYW3YSUvX2ZDc0WnhJdFhkQk0";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var birth = template.birth = theForm.birth;
var nationality = template.nationality = theForm.nationality;
var marital = template.marital = theForm.marital;
var children = template.children = theForm.children;
var years = template.years = theForm.years;
var profiency = template.profiency = theForm.profiency;
var qualification = template.qualification = theForm.qualification;
var educational = template.educational = theForm.educational;
var subject = template.subject = theForm.subject;
var grade = template.grade = theForm.grade;
var email = template.email = theForm.email;
var phone = template.phone = theForm.phone;
var skype = template.skype = theForm.skype;
var fileUrl = template.fileUrl = doc.getUrl();
var fileUrl2 = template.fileUrl = doc2.getUrl();
var fileUrl3 = template.fileUrl = doc3.getUrl();
var fileUrl4 = template.fileUrl = doc4.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 18).setValues([[name,birth,nationality,marital,children,profiency,years,qualification,educational,subject,grade,email,phone,skype,fileUrl,fileUrl2,fileUrl3,fileUrl4]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Thanks.html
<div>
<h2>Thank you <?= name ?>, <br>your application has been received.</h2>
</div>
Yes, something has recently changed. The default sandbox mode is now IFRAME. Your doGet() function does not designate a sandbox mode, so it now defaults to IFRAME. This has changed the behavior of your form. You have an <input> tag that is a button of the submit type. This causes the form to issue either a GET or POST request when the form is submitted. That causes the screen to go blank, and is probably interfering with the google.script.run.myfunction() call to the server. Change the input button type from submit to button.
Currently:
<input type="submit" value="Apply"
Change to:
<input type="button" value="Apply"
I modified the code for the function named toggle_visibility
if(e.style.display !== 'none')//Modified this line
Was:
if(e.style.display === 'block')
The style could be many different settings. If it's inline for example, then that would break the code. But if it's !== "none", then if it's anything but none, then it's obviously being displayed.
Here is a link to a shared Apps Script file:
Link to Shared Apps Script File
Following your advice, I've visited this page Migrating to IFRAME Sandbox Mode
and made the following change:
function doGet() {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
and I changed the type to "button" but nothing is happening: it keeps at "Uploading. Please wait..." for ever
Related
I have a web app that takes a user input and outputs the result to the lower part of the main page. There are two pairs of form tags--a main form and a secondary form. I want the output produced by the main form to show above the secondary form.
The secondary form does not output anything. It is a button that says "Show All Folders". See screenshot. I want the result where the red arrow is pointing to.
#!C:\Python\Python38-32\python.exe
import cgi
import os
import re
print("Content-Type: text/html")
print()
input = cgi.FieldStorage()
print("""
<head>
<title> Search </title>
<script type="text/javascript">
function showHide() {
var div = document.getElementById('hidden_div');
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<style type="text/css">
body{
font-size: 16px;
color: #333;
font-family: 'Roboto', sans-serif;
background: #BBDEFB;
}
h1{
font-size: 30px;
background: #2196F3;
padding: 5px;
top: 0px;
width: 99%;
height: 50px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-radius: 12px;
color: #E3F2FD;
}
#mainForm form{
background: #E3F2FD;
padding: 25px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
#secondaryForm form{
background: #E3F2FD;
padding: 5px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
.result_1{
font-size: 15px;
color: #333;
padding: 10px;
background: #cccccc;
border-radius: 1px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
.result_2{
font-size: 13px;
color: #333;
padding: 2px;
background: #f2f2f2;
border-radius: 1px;
}
input[type=text]{
background-color: #42A5F5;
color: #E3F2FD;
border: none;
font-weight: bold;
font-size: 14px;
padding: 8px 20px 8px 12px;
margin: 8px 0;
height: px;
border-radius: 8px;
}
input[type=submit]{
background-color: #42A5F5;
padding: 8px 20px;
border: none;
font-weight: bold;
font-size: 14px;
color: #fff;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
div.a {
text-align: right;
}
</style>
""")
print("""<body>
<h1><center>SEARCH FILES</center></h1>
<div id="mainForm">
<form action="search_sample.py">
Enter Value to Search<br>
<input type="text" name="user_input"><br>
<br>
Select File Type<br>
<input type="radio" name="operator" value="o_file" checked> O File <br>
<input type="radio" name="operator" value="l_file"> L File <br>
<br>
<input type="submit" value="Submit"><br>
</form>
</div>
<div id="secondaryForm">
<form name="showfolders" onsubmit="showHide(); return false;">
<input type="submit" value="Show All Folders" name="show_folder" />
</form>
</div>
""")
# Begin Python script
my_dir = "C:/Users/xstah/OneDrive/Documents/sample_txt/"
# Get all folders
print('<div id="hidden_div" style="display:none">')
for root, dirs, files in os.walk(my_dir):
for file in files:
if file.endswith(".dat"):
filename2 = os.path.join(root, file)
filepath_split = os.path.normpath(filename2)
path_list = filepath_split.split(os.sep)
hostname = path_list[6]
foldername = path_list[7]
print('<div class="result_1">{}</div>'.format('<b>'+ hostname + '</b>'))
print('<div class="result_2">{}</div>'.format(foldername))
print('</div>')
# User input & selection
user_input = input["user_input"].value
operation = input["operator"].value
# End Python script
print("</body>")
Try to make div between main and secondary forms there and do innerHTML or innerText by js.
I have one field in the first page and user will enter the 1 digit number in it. After entering the number that field will hide and display the next field called as Fullname with the button but when I clicked on the button my page refreshed and it goes to the first page.
I need when the user entered the Fullname and clicked on the button then next filed will display which is called Password.
I have a different button in each field.
Would you help me in this?
style
#password_form, #mobile_form{
display: none;
}
HTML
<div class="yoursection">
<form name="user-confirmation">
<label>Code no</label>
<input type="text" name="code" id="code" placeholder="code" maxlength="1">
</form>
</div>
<div class="active_form" style="display: none;">
<!--Name form********************************************************-->
<form id="name_form" action="#" method="post" >
<label>Full name</label>
<input type="text" name="fullname" id="fullname" placeholder="Full name">
<input type="submit" name="submit" value="Continue to Password" id="continue_to_password">
</form>
<!--password form********************************************************-->
<form id="password_form" action="#" method="post">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="password name">
<input type="submit" name="submit" value="Continue to mobile no" id="continue_to_mobile">
</form>
<!--mobile form********************************************************-->
<form id="mobile_form" action="#" method="post">
<label>Mobile number</label>
<input type="text" name="mobile" id="mobile" placeholder="mobile no">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
</div>
<!--active form-->
Script
/*on key up calling ajax*/
$("#code").keyup(function () {
$("form[name='user-confirmation']").submit();
});
/*Checking code */
$(function () {
$('form[name="user-confirmation"]').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'test4.php',
data: $('form[name="user-confirmation-code"]').serialize(),
success: function (data) {
if (data.trim() === 'true') {
$('.yoursection').hide();
$('.active_form').show();
} else {
$('#red-color').html(data);
}
}
});
});
});
/*When clicked on button*/
$('#continue_to_password').on('click', function () {
$('#name_form').hide();
$('#password_from').show();
});
$('#continue_to_mobile').on('click', function () {
$('#password_from').hide();
$('#mobile_form').show();
});
test4.php
This is for demo
<?php
echo "true";
?>
Remove the form tag, change the code as follows:
$("#code").keyup(function () {
$.ajax({
type: 'post',
url: 'test4.php',
data: $(this).val(),
success: function (data) {
if (data.trim() === 'true') {
$('.yoursection').hide();
$('.active_form').show();
} else {
$('#red-color').html(data);
}
}
});
});
});
Note: this will trigger the ajax each time you press a key in the #code field
Change your input to buttons have only one form for the login
$("#code").keyup(function() {
$('.active_form').show();
//$.ajax({
// type: 'post',
// url: 'test4.php',
//data: $(this).val(),
//success: function(data) {
// if (data.trim() === 'true') {
// $('.yoursection').hide();
// $('.active_form').show();
// } else {
// $('#red-color').html(data);
// }
// }
// });
});
/*When clicked on button*/
$('body').on('click', '#continue_to_password', function(e) {
$('#name_form').hide();
$('#password_form').show();
});
$('#continue_to_mobile').on('click', function() {
$('#password_form').hide();
$('#mobile_form').show();
});
.active_form,
#password_form,
#mobile_form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yoursection">
<label>Code no</label>
<input type="text" name="code" id="code" placeholder="code" maxlength="1">
</div>
<form class="active_form">
<!--Name form********************************************************-->
<div id="name_form">
<label>Full name</label>
<input type="text" name="fullname" id="fullname" placeholder="Full name">
<button type="button" id="continue_to_password">Continue to Password</button>
</div>
<!--password form********************************************************-->
<div id="password_form">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="password name">
<button type="button" id="continue_to_mobile">Continue to mobile no</button>
</div>
<!--mobile form********************************************************-->
<div id="mobile_form">
<label>Mobile number</label>
<input type="text" name="mobile" id="mobile" placeholder="mobile no">
<button type="submit">Submit</button>
</div>
</form>
<!--active form-->
You can use the <button></button> tag with your existing .on("click") event.
<input type="submit"> will always reload your page.
I believe the best way to handle this would be to store the forms inside an array. Add the step class to each form.
var steps = $('form.step');
Then simply iterate over each form. Since jQuery will get the elements in the order they appear on the document, you won't have to do any configuration.
var currentStep = 0;
$('input[type="submit"]').on('click', function () {
currentStep += 1;
HideSteps();
});
function HideSteps()
{
for (var i = 0; i < $(steps).length; i++)
{
if (i != currentStep)
{
var disabledForm = $(steps)[i];
$(disabledForm).css({ display: none });
}
else
{
var activeForm = $(steps)[i];
$(activeForm).css({ display: block });
}
}
}
And to disable the submittion, use e.preventDefault() on the submit event.
$('input[name="submit"]').on('click', function (event) {
e.preventDefault();
});
Try this sliding form that shows some validation feedback to the user after each step...
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i) {
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function(e) {
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
$('#steps').stop().animate({
marginLeft: '-' + widths[current - 1] + 'px'
}, 500, function() {
if (current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function() {
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e) {
if (e.which == 9) {
$('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps() {
var FormErrors = false;
for (var i = 1; i < fieldsetCount; ++i) {
var error = validateStep(i);
if (error == -1)
FormErrors = true;
}
$('#formElem').data('errors', FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step) {
if (step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if (valueLength == '') {
hasError = true;
$this.css('background-color', '#FFEDEF');
} else
$this.css('background-color', '#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if (hasError) {
error = -1;
valclass = 'error';
}
$('<span class="' + valclass + '"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click', function() {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
});
});
* {
margin: 0px;
padding: 0px;
}
body {
color: #444444;
font-size: 13px;
background: #f2f2f2;
font-family: "Century Gothic", Helvetica, sans-serif;
}
#content {
margin: 15px auto;
text-align: center;
width: 600px;
position: relative;
height: 100%;
}
#wrapper {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #f9f9f9;
width: 600px;
overflow: hidden;
}
#steps {
width: 600px;
/*height:320px;*/
overflow: hidden;
}
.step {
float: left;
width: 600px;
/*height:320px;*/
}
#navigation {
height: 45px;
background-color: #e9e9e9;
border-top: 1px solid #fff;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navigation ul {
list-style: none;
float: left;
margin-left: 22px;
}
#navigation ul li {
float: left;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
position: relative;
margin: 0px 2px;
}
#navigation ul li a {
display: block;
height: 45px;
background-color: #444;
color: #777;
outline: none;
font-weight: bold;
text-decoration: none;
line-height: 45px;
padding: 0px 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: #f0f0f0;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}
#navigation ul li a:hover,
#navigation ul li.selected a {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.checked {
background: transparent url(../images/checked.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
span.error {
background: transparent url(../images/error.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
#steps form fieldset {
border: none;
padding-bottom: 20px;
}
#steps form legend {
text-align: left;
background-color: #f0f0f0;
color: #666;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
float: left;
width: 590px;
padding: 5px 0px 5px 10px;
margin: 10px 0px;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
}
#steps form p {
float: left;
clear: both;
margin: 5px 0px;
background-color: #f4f4f4;
border: 1px solid #fff;
width: 400px;
padding: 10px;
margin-left: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
#steps form p label {
width: 160px;
float: left;
text-align: right;
margin-right: 15px;
line-height: 26px;
color: #666;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float: left;
}
#steps form input:focus {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background-color: #FFFEEF;
}
#steps form p.submit {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#steps form button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
margin: 0px auto;
clear: both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
#steps form button:hover {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 36px;
text-shadow: 1px 1px 1px #fff;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p><label for="username">User name</label><input id="username" name="username" /></p>
<p><label for="email">Email</label><input id="email" name="email" placeholder="mominriyadh#gmail.com" type="email" AUTOCOMPLETE=OFF/></p>
<p><label for="password">Password</label><input id="password" name="password" type="password" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p><label for="name">Full Name</label><input id="name" name="name" type="text" AUTOCOMPLETE=OFF/></p>
<p><label for="country">Country</label><input id="country" name="country" type="text" AUTOCOMPLETE=OFF/></p>
<p><label for="phone">Phone</label><input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF/></p>
<p><label for="website">Website</label><input id="website" name="website" placeholder="e.g. http://www.codrops.com" type="tel" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Payment</legend>
<p><label for="cardtype">Card</label><select id="cardtype" name="cardtype"><option>Visa</option><option>Mastercard</option><option>American Express</option></select></p>
<p><label for="cardnumber">Card number</label><input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF/></p>
<p><label for="secure">Security code</label><input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF/></p>
<p><label for="namecard">Name on Card</label><input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Settings</legend>
<p><label for="newsletter">Newsletter</label><select id="newsletter" name="newsletter"><option value="Daily" selected>Daily</option><option value="Weekly">Weekly</option><option value="Monthly">Monthly</option><option value="Never">Never</option></select></p>
<p><label for="updates">Updates</label><select id="updates" name="updates"><option value="1" selected>Package 1</option><option value="2">Package 2</option><option value="0">Don't send updates</option>
</select></p>
<p><label for="tagname">Newsletter Tag</label><input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>Everything in the form was correctly filled if all the steps have a green checkmark icon. A red checkmark icon indicates that some field is missing or filled out with invalid data. In this last step the user can confirm the submission of the
form. </p>
<p class="submit"><button id="registerButton" type="submit">Register</button></p>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Payment</li>
<li>Settings</li>
<li>Confirm</li>
</ul>
</div>
</div>
</div>
I created a pricing calculator using Vue.js with codepen and recreated here.
it seems to be working fine but when I add it to my jekyll site and run it locally, no vue data is displayed. I am receiving no errors and tried using the vue dev tools and the data seems to be displaying there. I also tried wrapping the js code locally with
$(document).ready(function() {
//code in here
});
Is there something I am blatantly missing? This is my first time working with Vues.js. Thanks in advance
var vm = new Vue({
el: '#app',
data: {
// starting values
analysisDeployment: 0,
remoteOfficesPhysical: 0,
remoteOfficesVirtual: 0,
largeOffices: 0,
dataCenters: 0,
additionalApps: 0,
totalLocations: 0,
totalApps: 0
},
computed: {
totalMonth: function() {
var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 292);
var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 292);
var largeOfficesAmount = parseInt(this.largeOffices * 742);
var dataCentersAmount = parseInt(this.dataCenters * 2150);
var additionalAppsAmount = parseInt(this.additionalApps * 29);
var totalApps = parseInt(additionalAppsAmount * this.totalLocations);
var totalByMonth = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount + totalApps);
return totalByMonth;
},
totalYear: function() {
var totalByYear = parseInt(this.totalMonth * 12);
return totalByYear;
},
totalLocations: function() {
var totalOfficePhyscial = parseInt(this.remoteOfficesPhysical);
var totalOfficeVirtual = parseInt(this.remoteOfficesVirtual);
var totalLargeOffice = parseInt(this.largeOffices);
var totalDataCenter = parseInt(this.dataCenters);
var grandTotalLocations = parseInt(totalOfficePhyscial + totalOfficeVirtual + totalLargeOffice + totalDataCenter);
return grandTotalLocations;
},
totalHardware: function() {
var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 299);
var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 99);
var largeOfficesAmount = parseInt(this.largeOffices * 599);
var dataCentersAmount = parseInt(this.dataCenters * 2199);
var totalHardwarePoints = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount);
return totalHardwarePoints;
},
grandTotalCosts: function () {
var totalCostYear = parseInt(this.totalYear);
var totalDeployment = parseInt(this.analysisDeployment);
var grandTotal = parseInt(totalCostYear + totalDeployment);
return grandTotal;
}
}
});
[type=range] {
-webkit-appearance: none;
margin: 15px 0;
width: 100%;
}
[type=range]:focus {
outline: none;
}
[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 50px;
}
[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
-webkit-appearance: none;
margin-top: -12.5px;
}
[type=range]:focus::-webkit-slider-runnable-track {
background: #cccccc;
}
[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 50px;
}
[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
}
[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
background: transparent;
border-color: transparent;
border-width: 15px 0;
color: transparent;
}
[type=range]::-ms-fill-lower {
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #cccccc;
border: 0px solid #333;
border-radius: 100px;
}
[type=range]::-ms-fill-upper {
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 100px;
}
[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
margin-top: 0;
}
[type=range]:focus::-ms-fill-lower {
background: #ccc;
}
[type=range]:focus::-ms-fill-upper {
background: #cccccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
<div id="app" class="container">
Remote Offices (physical): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesPhysical"> {{ remoteOfficesPhysical }}<br><br>
Remote Offices (virtual): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesVirtual"> {{remoteOfficesVirtual}}<br><br>
Large Offices: <input type="range" min="0" step="1" max="100" v-model="largeOffices"> {{largeOffices}}<br><br>
Data Centers: <input type="range" min="0" step="1" max="100" v-model="dataCenters"> {{dataCenters}}<br><br>
Additional Apps: <input type="range" min="0" step="1" max="100" v-model="additionalApps"> {{additionalApps}}<br><br>
Analysis deployment:
<select name="analysis" v-model="analysisDeployment">
<option value="0">Public</option>
<option value="0">Shared / Public</option>
<option value="24000">Dedicated / Private</option>
<option value="39000">Virtual / Private</option>
<option value="41000">Private, virtual + hardware</option>
</select>
<span> + ${{ analysisDeployment }}</span>
<h3 class="ui header">Total locations: {{ totalLocations }}</h3>
<h3 class="ui header">Total monitoring service cost per month: ${{ totalMonth }}</h3>
<h3 class="ui header">Total monitoring service cost per year: ${{ totalYear }}</h3>
<h3 class="ui header">Monitoring points hardware costs (one-time cost): ${{ totalHardware}}</h3>
<h3 class="ui header">Grand Total: ${{ grandTotalCosts }}</h3>
</div>
So Im using Bootstrap 3, JQuery and Jquery-UIs autocomplete. So on the my project, the result looks like this,
But according to the documentation page, it is supposed to look like this
with the clickable items on mouse over and everything. My search box HTML is as follows:
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input id="titles" type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-default">GO</button>
</form>
The documentation page for jquery-ui autocomplete widget is here
Any pointers? Thanks in advance. PS:The photos were taken by a potato :-)
#dmlittle gave me the idea
You need to also style the autocomplete widget the Boostrap way
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
I am trying to find a way of changing the alert function on my script to show my div 'error' instead, can someone please show me how i may do this? thanks
HTML:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JAVASCRIPT:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
i have tried:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
show("error");
return false;
}
}
error css:
.error{
width: 946px;
margin: auto;
height: 20px;
overflow: hidden;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-size:14px;
padding:20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#FF9933 ;
margin-bottom:30px;
display: none
}
Working Demo
Just Add div tag in your html page like the following with the css class which you have specified.
<div id ="alertBox" class="error">
ERROR
</div>
Just Add the following line in the javascript.
document.getElementById("alertBox").style.display='block';
for jquery:
$("#error").css({ // if "error" is a class use: $(".error").css({
display:'block'
});