Dropdown menu choices disappear when function is called - javascript

I'm trying to pass in the dropdown menu selection to a function in my Javascript File. This works, but as soon as I hit the submit button the dropdown menu choices get deleted, and I'm left with an empty dropdown menu. (This seems to only happen when it's an app in google scripts.)
Any thoughts why this is happening? Is there a better way to do this with apps script?
Any help would be greatly appreciated.
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>


function doSomething(){
var x = document.getElementById("API_key").value;
var subdomain =document.getElementById("subdomain").value;
var state = document.getElementById("stateSelect").value;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>


This is not necessary .just comment and check it
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
//document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}

Related

Can I manipulate a Textbox in an html based Google Apps Script Sidebar through a function associated to a button in that Sidebar?

Question coming from someone who started coding GAS 3 days ago. I'm trying to transfer a tool I developed as an Excel VBA Add-In with Windows Forms into Google Workspace. I apologize in advance if this is potentially something that simply isn't possible in GAS/HTML.
I'll try to describe the use case as simply as possible:
I have implemented a sidebar in Google Sheets with multiple text boxes for user input. I have successfully transferred inputs from the HTML textboxes into the GAS part of things.
Now, I have a field that is pre-filled in with a date. Below are two buttons. These should be used for the convenience of increasing the date in said textbox by a number of days (+1 day; +3 days; etc.).
So clicking on +1 should automatically increase the displayed value in the textbox by 1 day.
I'm trying to implement exactly that functionality. As of now I have successfully handed over the value in the textbox to a GAS function that increases the date by 1 (even that almost made me lose my mind compared to how this is done in VBA :( ). Now I want to transfer that new date back into the text box.
After trying to search for any similar use case almost the entire day, I gave up and registered here for help. The only comparable things I could find with regards to transferring values from GAS to HTML used these values in the createHtmlOutputFromFile function to hand them over when creating and launching the sidebar. In my case I want the value in the textbox to change while the sidebar is open.
I rely on this not only for something as trivial as increasing a date, but for the sake of clarity this was one of the easiest examples to explain.
Thanks for any help in advance!!
UPDATE WITH CODE
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Google Style Sheet to make it look"google" :) -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
.block {
margin-bottom: 10px;
font-size: 10px;
}
p {
font-size: 10px;
}
label {
font-size: 10px;
display: inline-block;
width: 90px;
}
input {
padding: 5px 10px;
font-size: 10px;
}
button {
font-size: 10px;
}
select {
font-size: 10px;
}
</style>
</head>
<body>
<form id="dashboardForm">
<!-- HTML code that defines the sidebar structure -->
<p>Please provide your inputs for the RfX event creation</p>
<div class="block">
<label>Project Name:</label>
<input name="projectName" value="TestProject">
</div>
<div class="block">
<label>Type:</label>
<select name="RfXtype">
<option value="RfP">RfP</option>
<option value="RfI">RfI</option>
<option value="ePROC">ePROC</option>
</select>
</div>
<div class="block">
<label>Commodity Code:</label>
<input name="comCode" value="CAPC">
</div>
<div class="block">
<label>Due Date:</label>
<input name="dueDate" value="01/01/2021">
</div>
<div class="block">
<input type="button" value="+1" onclick="google.script.run.add1Day(dashboardForm)">
<input type="button" value="+3" onclick="google.script.run.add3Day(dashboardForm)">
<input type="button" value="+7" onclick="google.script.run.add7Day(dashboardForm)">
</div>
<div class="block">
<label>Technical Contact:</label>
<input name="techContact" value="Test">
</div>
<div class="block">
<label> Contact E-Mail:</label>
<input name="contactMail" value="Test" disabled>
</div>
<div class="block">
<label> Contact Phone:</label>
<input name="contactPhone" value="Test123" disabled>
</div>
<div class="block">
<label> Contact Name:</label>
<input name="contactName" value="Thorsten Platz" disabled>
</div>
<div class="block">
<label>E-Mail Language:</label>
<select name="mailLanguage">
<option value="English">English</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
</div>
<div class="block">
<label>Incoterms:</label>
<select name="Incoterms">
<option value="DDP">DDP</option>
<option value="DAP">DAP</option>
<option value="FCA">FCA</option>
<option value="ExWorks">ExWorks</option>
</select>
</div>
<div class="block">
<label>Delivery Adress:</label>
<input name="dAdress" value="Immenstaad">
</div>
<div class="block">
<label>Offer Validity:</label>
<input name="oValidity" value="31/12/2021">
</div>
<div class="block">
<label>Payment Terms:</label>
<select name="Incoterms">
<option value="60EOM10">60EOM10</option>
<option value="30EOM10">30EOM10</option>
<option value="15EOM10">15EOM10</option>
<option value="00EOM10">00EOM10</option>
</select>
</div>
<div class="block">
<label>Delivery Date:</label>
<input name="delDate" value="31/12/2021">
</div>
<div class="block">
<label>Purchasing Entity</label>
<select name="pEntity">
<option value="TestGmbH">TEST GmbH</option>
</select>
</div>
<div class="block">
<label>End Customer</label>
<input name="endCus" value="BAAINBw">
</div>
<div class="block">
<label>Currency</label>
<select name="Curr">
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="USD">USD ($)</option>
<option value="CAD">CAD</option>
</select>
</div>
<label>BoM</label>
<input type="checkbox" name="BoM">
<label>SOW</label>
<input type="checkbox" name="SOW">
<label>ECCD (Word)</label>
<input type="checkbox" name="ECCDW">
<label>ECCD (Excel)</label>
<input type="checkbox" name="ECCDE">
<input type="button" value="Create Project" onclick="google.script.run.createProject()">
<input type="button" value="Create Email only" onclick="google.script.run.createProject()">
<input type="button" value="Save" onclick="google.script.run.createProject()">
</form>
</body>
</html>
And the .gs part:
//#OnlyCurrentDoc //Limits the script to only accessing the current spreadsheet
var SIDEBAR_TITLE = "Dashboard";
function onOpen(e) {
//Custom Menu with functions
SpreadsheetApp.getUi()
.createMenu("CM-Tracker")
.addItem("Open Dashboard", "dashOpen")
.addToUi();
}
function onInstall(e){
onOpen(e);
}
function dashOpen() {
//Open the Dashboard as a Sidebar from an HTML File
var widget = HtmlService.createHtmlOutputFromFile("Dashboard.html");
widget.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(widget);
}

I think what you are seeking can be accomplished all within the sidebar html like so...
UPDATED HTML
So, I've added my code with these changes...
Appended <br> to <label>Due Date:</label>
To <input name="dueDate" value="01/01/2021"> added type="date" id="dueDate" resulting in <input type="date" id="dueDate" name="dueDate" value="01/01/2021">
Added value="<?!=Utilities.formatDate(new Date(),'America/Los_Angeles','yyyy-MM-dd');?>" to auto populate the date field with today's date - refer to:Class HTML Template
To the value="+1 ,+3, +7" onclick I added update(1), update(3), update(7) respectively and commented your function calls to google.script.run.yourFunction().
You can click on the "date" field and it will bring up a calendar to choose a date, or add days via the buttons.
Inserted <script></script> below the </form> tag.
Modified the dashOpen() gs function (see below)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Google Style Sheet to make it look"google" :) -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
.block {
margin-bottom: 10px;
font-size: 10px;
}
p {
font-size: 10px;
}
label {
font-size: 10px;
display: inline-block;
width: 90px;
}
input {
padding: 5px 10px;
font-size: 10px;
}
button {
font-size: 10px;
}
select {
font-size: 10px;
}
</style>
</head>
<body>
<form id="dashboardForm">
<!-- HTML code that defines the sidebar structure -->
<p>Please provide your inputs for the RfX event creation</p>
<div class="block">
<label>Project Name:</label>
<input name="projectName" value="TestProject">
</div>
<div class="block">
<label>Type:</label>
<select name="RfXtype">
<option value="RfP">RfP</option>
<option value="RfI">RfI</option>
<option value="ePROC">ePROC</option>
</select>
</div>
<div class="block">
<label>Commodity Code:</label>
<input name="comCode" value="CAPC">
</div>
<div class="block">
<label>Due Date:</label><br>
<input type="date" id="dueDate" name="dueDate" value="01/01/2021">
</div>
<div class="block">
<input type="button" value="+1" onclick="update(1)//google.script.run.add1Day(dashboardForm)">
<input type="button" value="+3" onclick="update(3)//google.script.run.add3Day(dashboardForm)">
<input type="button" value="+7" onclick="update(7)//google.script.run.add7Day(dashboardForm)">
</div>
<div class="block">
<label>Technical Contact:</label>
<input name="techContact" value="Test">
</div>
<div class="block">
<label> Contact E-Mail:</label>
<input name="contactMail" value="Test" disabled>
</div>
<div class="block">
<label> Contact Phone:</label>
<input name="contactPhone" value="Test123" disabled>
</div>
<div class="block">
<label> Contact Name:</label>
<input name="contactName" value="Thorsten Platz" disabled>
</div>
<div class="block">
<label>E-Mail Language:</label>
<select name="mailLanguage">
<option value="English">English</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
</div>
<div class="block">
<label>Incoterms:</label>
<select name="Incoterms">
<option value="DDP">DDP</option>
<option value="DAP">DAP</option>
<option value="FCA">FCA</option>
<option value="ExWorks">ExWorks</option>
</select>
</div>
<div class="block">
<label>Delivery Adress:</label>
<input name="dAdress" value="Immenstaad">
</div>
<div class="block">
<label>Offer Validity:</label>
<input name="oValidity" value="31/12/2021">
</div>
<div class="block">
<label>Payment Terms:</label>
<select name="Incoterms">
<option value="60EOM10">60EOM10</option>
<option value="30EOM10">30EOM10</option>
<option value="15EOM10">15EOM10</option>
<option value="00EOM10">00EOM10</option>
</select>
</div>
<div class="block">
<label>Delivery Date:</label>
<input name="delDate" value="31/12/2021">
</div>
<div class="block">
<label>Purchasing Entity</label>
<select name="pEntity">
<option value="TestGmbH">TEST GmbH</option>
</select>
</div>
<div class="block">
<label>End Customer</label>
<input name="endCus" value="BAAINBw">
</div>
<div class="block">
<label>Currency</label>
<select name="Curr">
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="USD">USD ($)</option>
<option value="CAD">CAD</option>
</select>
</div>
<label>BoM</label>
<input type="checkbox" name="BoM">
<label>SOW</label>
<input type="checkbox" name="SOW">
<label>ECCD (Word)</label>
<input type="checkbox" name="ECCDW">
<label>ECCD (Excel)</label>
<input type="checkbox" name="ECCDE">
<input type="button" value="Create Project" onclick="google.script.run.createProject()">
<input type="button" value="Create Email only" onclick="google.script.run.createProject()">
<input type="button" value="Save" onclick="google.script.run.createProject()">
</form>
<script type="application/javascript">
function update(increment){
let element = document.getElementById("dueDate");
element.defaultValue = element.stepUp(increment);
};
</script>
</body>
</html>
Modified dashOpen function
function dashOpen() {
//Open the Dashboard as a Sidebar from an HTML File
var widget = HtmlService
.createTemplateFromFile("Dashboard")
.evaluate()
.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(widget);
}
SOME THEORY
Use google script (gs) codes to serve an HTML file (HtmlService) to your sidebar.
If you want to have gs serve dynamic data with <?= ?> tags, you will need to use HtmlService.getTemplateFromFile('filename').evaluate()
NOTE you can place any gs code between <?= ?> or <?!= ?> to be evaluated when HtmlService is called.
From the sidebar (webpage), the user changes <input> fields on the form and presses <button> fields from web page to execute a <script> function from within the <body> tag of the web page.
The sidebar <script> functions can retrieve the data from the sidebar fields, validate the data, and scrub any malicious code (preprocess) then send the data to a google script with google.script.run.yourGoogleScriptFuntion()
if you use .withSuccessHandler(successFunction) & .withFailureHandler(failedFunction), you can update the sidebar with data returned from the gs and processed with the successFunction or, upon failure to process, execute the failedFunction, which can be used to notify the user of and error or failure.
Example html ...
<html>
<body>
.
.
.
<input type="date" id="dueDate" name="dueDate" value="01/01/2021">
<div id=“someId”></div>
.
.
.
<input type="button" value="Save" onclick="myWebPageFunction()">
.
.
.
<!-- CLIENT SIDE SCRIPTS IN THE SIDEBAR HTML -->
<script>
function myWebPageFunction() {
// get data from <input> with
var dueDate = document.getElementById('dueDate').getValue();
// pass variable 'dueDate' to gs to process with
google.script.run.withSuccessHandler(onReturn).withFailureHandler(onFailure).someGsScript(dueDate);
}
function onReturn(newVariablePassedFromGoogleScript){
// EXAMPLE 1 - upon successful execution of the google script you can update an html elements value with...
document.getElementById('dueDate').value = newVariablePassedFromGoogleScript;
// OR EXAMPLE 2 you can change the html display content with...
document.getElementById('someID').innerHtml = newVariablePassedFromGoogleScript;
// OR EXAMPLE 3 just provide an alert
window.alert(newVariablePassedFromGoogleScript+" was updated!"); // The date of 03/09/2021 was updated!
}
function on Failure(){
alert('The process failed. Try again.');
}
</script>
</body>
</html>
and an example of the gs could be...
function someGsScript(date){
Logger.log("The date passed from the webpage is "+date);
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName('yourSheetName').getRange(1,1).setValue(date);
return "The date of "+date;
}
SOME REFERENCES
HtmlService <-- Hyperlink
createTemplateFromFile()
.evaluate()
Templated HTML
How web pages communicate with google scripts
.withSuccessHandler() return function
In the grey boxes on the last link, make sure you look at both the Code.gs and the Index.html for the examples.
W3Schools DOM Element objects
W3Schools practice environment for getElementById()
:)

Call a single html form from Google sheet

I a Google Spreadsheet filling from html form.
Function processForm works well and all fields are getting correct data
My problem with launchForm as I'm thinking.
The form opens in a popup window, but inputs don't load datalist elements. Unfortunately I don't understand why
function launchForm() {
var htmlApp = HtmlService
.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(400)
.setHeight(450);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
function processForm(formObject) {
var url = "LINK_TO_SPREADSHEET_OF_DATA_COLLECTION";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("List");
var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
var nameParam = [ws.getLastRow(),
formObject.recipe_name,
formObject.place_name,
formObject.servingOrder,
formObject.cuisine_name,
asiaTime]
ws.appendRow(nameParam);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">New Recipe</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="recipe_name">Recipe Name</label>
<input type="text" class="form-control" id="recipe_name" name="recipe_name" placeholder="Recipe Name" required>
</div>
<div class="form-group col-md-6">
<label for="cuisine_name">Cuisine</label>
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
<option value="Asian"></option>
<option value="Western"></option>
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Place name</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4h" value="LL4H" required>
<label class="form-check-label" for="ll4h">LL4H</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4t" value="LL4T" required>
<label class="form-check-label" for="female">LL4T</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="servingOrder">Serving order</label>
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
<option value="Starter"></option>
<option value="Main course"></option>
<option value="Veggi side"></option>
<option value="Carbs side"></option>
<option value="Dessert"></option>
<option value="Dough"></option>
<option value="Sauce"></option>
<option value="Drink"></option>
<option value="Other"></option>
</datalist>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
Where I'm wrong and how to fix it? What is the best way to close popup after submitting?

You want to put datalist to the input tag.
For this, how about this answer? I think that the reason of your issue is that the same id is used to the input tag and the datalist tag. So how about the following modification?
From:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
To:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name_datalist" required>
<datalist id="cuisine_name_datalist">
And
From:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
To:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder_datalist" required>
<datalist id="servingOrder_datalist">
Reference:
The HTML Data List element

Javascript toggle colapse div doesn't work

It worked and now it doesn't. I just can't find what i did wrong.
It should show a div with driving license categories when you select "Ja" in select box.
Following is the source code. It should be very simple to solve this i just can't see it :(
var nein = $('#nein'),
ja = $('#ja');
ja.click(function() {
if ($('#kfz').hasClass('in')) {
return false;
}
});
nein.click(function() {
if (!$('#kfz').hasClass('in')) {
return false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<label for="has_driverslicense">KFZ Führerschein:</label>
<select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
<option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
<option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
</select>
<div id="kfz" class="collapse out">
<div>
<input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
<label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
</div>
<div>
<input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
<label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anhänger)</label>
</div>
<div>
<input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
<label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
</div>
<div>
<input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
<label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
</div>
<div>
<input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
<label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anhänger)</label>
</div>
<div>
<input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
<label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
</div>
<div>
<input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerführerschein</label>
</div>
<div>
<input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-27" class="checkbox-style-3-label">Geländestaplerführerschein</label>
</div>
<div>
<input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
</div>
</div>
</body>
</html>

Get the value from select, and use addClass/remoceClass
$("#has_driverslicense").on("change", function(){
if($(this).val() === "1") {
$('#kfz').addClass("in");
} else {
$('#kfz').removeClass("in");
}
})
I've updated the fiddle:
https://jsfiddle.net/aq8pqbft/1/

Prevent Google Chrome from Correcting Malformed HTML Script

I was testing a website's security and in an attempt to exploit its XSS, I used <script> tag. However, this website has a word limit on the input, so my ending script tag was not inserted in the database. Now when I open the webpage the submit button no longer appear because it was inside the truncated script tag. Due to Chrome's auto-correction, that specific script tag gets closed after submit button tag. Are anyone able to help me out?
After auto-correction, the HTML code of the page looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Update Student Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../login/css/style_reg.css" type="text/css" />
<link rel="stylesheet" href="../login/js/jquery-smoothness-ui.css">
<script src="../login/js/jquery-2.0.3.js"></script>
<script src="../login/js/jquery-ui.js"></script>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("same_info");
c.onchange=toggle_shipping_visibility;
}
function toggle_shipping_visibility()
{
var c=document.getElementById("same_info");
var t=document.getElementById("shipping_table");
t.style.display=(c.checked) ? 'none' : '';
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form class="form2" action="sem-reg.php" method="POST">
<div class="formtitle">Update Student Information</div>
<div class="note">
»» All Fields are Compulsory
<h3 style="margin-left:20px;color:green;">Welcome ADARSH I can still edit it</h3>
<h3 style="margin-left:20px;color:green;">1403097</h3>
</div>
<div class="input">
<div class="inputtext">University Roll:</div>
<div class="inputcontent">
<input type="text" name="univ" placeholder="University Roll No" value="1403097"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">College Roll:</div>
<div class="inputcontent">
<input type="text" name="coll" placeholder="College Roll No" value="1006/14"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Name:</div>
<div class="inputcontent">
<input type="text" name="name" placeholder="Name" value="ADARSH I can still edit it"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Father's Name:</div>
<div class="inputcontent">
<input type="text" name="father" placeholder="Father's Name" value="PAWAN KUMAR" readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Mother's Name:</div>
<div class="inputcontent">
<input type="text" name="mother" placeholder="Mother's Name" value="SH. MT. BABLI DEVI"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Batch</div>
<div class="inputcontent" readonly>
<select name="batch" >
<option disabled="disabled" value="2011">2011</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Semester</div>
<div class="inputcontent">
<select name="sem" >
<option value="4">4</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Branch</div>
<div class="inputcontent" >
<select name="bra">
<option value="3">B.Tech - Computer Science Engineering</option>
<option value="1">B.Tech - Biotechnology Engineering</option><option value="2">B.Tech - Chemical Engineering</option><option value="3">B.Tech - Computer Science Engineering</option><option value="4">B.Tech - Electronics & Communications Engineering</option><option value="5">B.Tech - Information Technology</option><option value="6">B.Tech - Mechanical Engineering</option><option value="10">M.Tech Part Time Thermal Engineering</option><option value="11">M.Tech Part Time Computer Science Engineering</option><option value="12">M.Tech Part Time Electronics & Communications Engineering</option><option value="13">M.Tech Part Time Chemical Engineering</option><option value="14">M.Tech Part Time Production Engineering</option><option value="15">M.Sc Physics</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Practical Group</div>
<div class="inputcontent">
<select name="prac">
<option value="2">B1</option>
<option value="1">None</option><option value="2">B1</option><option value="3">B2</option><option value="4">B3</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">D.O.B</div>
<div class="inputcontent">
<input id="datepicker" type="text" name="dob" placeholder="D.O.B." value="24/04/1997"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Section</div>
<div class="inputcontent">
<select name="sec">
<option value="1">A</option>
<option value="0">None</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
<div class="input">
<div class="inputtext">Category</div>
<div class="inputcontent">
<select name="cat" readonly>
<option value="General">General</option>
<option value="General">General</option><option value="Scheduled Castes/ Scheduled Tribes">Scheduled Castes/ Scheduled Tribes</option><option value="Backward Classes">Backward Classes</option><option value="Border Areas">Border Areas</option><option value="Backward Areas">Backward Areas</option><option value="Sports Persons">Sports Persons</option><option value="Children/ Grand Children of Freedom Fighters/Political Sufferers">Children/ Grand Children of Freedom Fighters/Political Sufferers</option><option value="Disabled Persons">Disabled Persons</option><option value="Children/Widow Of Defence Personnel/ Ex-Servicemen etc">Children/Widow Of Defence Personnel/ Ex-Servicemen etc</option><option value="Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards">Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards</option><option value="Riot Affected/ Terrorist affected families">Riot Affected/ Terrorist affected families</option><option value="Tsunami victims">Tsunami victims</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Parents):</div>
<div class="inputcontent">
<input type="text" name="phone_parent" placeholder="Phone no(Parents)" value="+919459578556"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Self): </div>
<div class="inputcontent">
<input type="text" name="phone_self" placeholder="Phone No(Self)" value="+919814615325"readonly/>
</div>
</div>
<div class="add">Permanent Address:</div>
<div class="input" style="height:120px">
<div class="inputtext">Address: </div>
<div class="inputcontent">
<textarea class="textarea" name="address" placeholder="Address" ></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea>
</div>
</div>
<div class="input">
<div class="inputtext">City: </div>
<div class="inputcontent">
<input type="text" name="city" placeholder="City" value="Dhar"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">State: </div>
<div class="inputcontent">
<input type="text" name="state" placeholder="State" value="Himachal"readonly/>
</div>
</div>
<input type="checkbox" name="same_info" id="same_info" checked="checked">Correspondence Address is same as Permanent Address<br>
<table id="shipping_table" style="display:none">
<tr class="inputtext">
<td>Address</td>
</tr>
<tr>
<td><textarea class="textarea" name="c_address"placeholder="Address"></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea></td>
</tr>
<tr class="inputtext">
<td>City</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_city" placeholder="City" value="Dhar"></td>
</tr>
<tr class="inputtext">
<td>State</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_state" placeholder="State" value="Himachal"></td>
</tr>
</table>
<div class="buttons">
«« Go Back To Home Page
<input class="orangebutton" type="submit" name="submit" value="Update" />
</div>
</form>
</div>
</body>
</html>

Using Chrome you can right-click on the last visible element, or somewhere else on the page, select Inspect and then edit the HTML that is loaded in the browser using the Chrome built in developer tools. E.g. remove/alter the <script> tag. And see if the page becomes usable again.
You can also try a recent version of Firefox or MSIE, they have features very similar to the above.

JSON object array to store data of a form in local storage temporary (PhoneGap project)

I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {
var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;
alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));
alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}
function readLocal(){
if (window.localStorage) {
var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){
var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';
var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">
Back
<h1>Household Profile</h1>
Menu
</div>
<!--/header-->
<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">
<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>
<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>
<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>
<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>
<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>
<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>
<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>
</select>
</div>
<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">
</div>
</form>
</div>
<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->
<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Also I need to expand my code to edit and delete record from local storage.

Of course it should only show the last entered JSON. You're not appending the scores rather you're replacing it. When you are executing the command
localStorage.setItem("highscores",JSON.stringify(highscores));
you just replaced previous highscores value on the localStorage. I can't see any append mechanism in your code. What you need to do is retrieve the previous JSON data, add the new highscores with previous data and then save it again.

Categories

Resources