[Javascript] I have an html page that has dropdown selects and inputs as well as a select tree with checked nodes. I’d like to take the selected choices from all of the inputs and turn them into a string which I could then run as a shell script. This is the current form I am using. I’d like to take the inputs and arrange them like this ”
datastore-export-json.sh –outputDirectory “directory input” –layers “layer select” –environment “environment select”….etc for all the selects in the page. The goal is a concatenated string such like “datastore-export-json.sh –output Directory”+directoryinput+”–layers”+layersselect” and then run this as a shell script. Please let me know how to collect my selects into this string and then how to run it as a shell script. This code should be in javascript.
<!– Select Basic –>
<div name=”env” class=”form-group”>
<label class=”col-md-4 control-label” for=”Environment”>Environment</label>
<div class=”col-md-4″>
<select id=”env” name=”Environment” class=”form-control” id=”Environment”>
<option value=”Development”>Development</option>
<option value=”Production”>Production</option>
</select>
</div>
</div>
<!– Select Basic –>
<div name=”prod” class=”form-group”>
<label class=”col-md-4 control-label” for=”Region”>Region</label>
<div class=”col-md-4″>
<select id=”region” name=”Region” class=”form-control” id=”Region”>
<option value=”North America”>North America</option>
</select>
</div>
</div>
<!– Select Basic –>
<div name=”dvn” class=”form-group”>
<label class=”col-md-4 control-label” for=”DVN”>DVN</label>
<div class=”col-md-2″>
<select id=”dvn” name=”DVN” class=”form-control” id=”DVN”>
<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>
</select>
</div>
</div>
<!– Select Basic –>
<div name=”version” class=”form-group”>
<label class=”col-md-4 control-label” for=”Version”>Version</label>
<div class=”col-md-2″>
<select id=”version” name=”Version” class=”form-control” id=”Version”>
<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>
</select>
</div>
</div>
<div id=”example”>
<div class=”demo-section k-content”>
<label class=”col-md-4 control-label” for=”Catalog Layers”>Catalog Layers</label>
<div>
<div id=”treeview”></div>
</div>
</div>
<script>
$(“#treeview”).kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: “All Layers”, expanded: false, spriteCssClass: “rootfolder”, items: [
{
id: 2, text: “ADAS”, expanded: false, spriteCssClass: “folder”, items: [
]
},
{
id: 6, text: “CV”, expanded: false, spriteCssClass: “folder”, items: [
{ id: 7, text: “CoreMap-ComputedValue”, spriteCssClass: “image” }
]
},
{
id: 9, text: “TM”, expanded: false, spriteCssClass: “folder”, items: [
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $(“#treeview”).data(“kendoTreeView”),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = “IDs of checked nodes: ” + checkedNodes.join(“,”);
} else {
message = “No nodes checked.”;
}
$(“#result”).html(message);
}
</script>
<style>
#treeview{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
color: blue;
background: white;
}
#treeview:checked + span {
border-color: blue;
background-color:blue;
}
}
body{
background: white;
}
</style>
</div>
<div>
<script type=”text/javascript”>
var environmentselect = document.getElementById(“env”);
var env = environmentselect.options[environmentselect.selectedIndex].text;
var regionselect= document.getElementById(“region”);
var region= regionselect.option[regionselect.selectedIndex].text;
var dvnselect= document.getElementById(“dvn”);
var dvn= dvnselect.option[regionselect.selectedIndex].text;
var versionselect= document.getElementById(“version”);
var version= versionselect.option[versionselect.selectedIndex].text;
var catalogselect= document.getElementById(“catalog”);
var catalog= catalogselect.option[catalogselect.selectedIndex].text;
var formatselect= document.getElementById(“format”);
var format= formatselect.option[formatselect.selectedIndex].text;
var hostselect= document.getElementById(“host”);
var host= hostselect.option[hostselect.selectedIndex].text;
var dirselect= document.getElementById(“dir”);
var dir= dirselect.option[dirselect.selectedIndex].text;
</script>
<br>
<br>
<!– Select Basic –>
<div class=”form-group”>
<label class=”col-md-4 control-label” for=”Catalog Name”>Catalog Name</label>
<div class=”col-md-4″>
<select id=”catalog” name=”Catalog Name” class=”form-control” id=”Catalog Name”>
<option value=”Catalog Name”>Catalog Name</option>
</select>
</div>
</div>
<!– Select Basic –>
<div class=”form-group”>
<label class=”col-md-4 control-label” for=”Format”>Format</label>
<div class=”col-md-4″>
<select id=”format” name=”Format” class=”form-control” id=”Format”>
<option value=”JSON”>JSON</option>
</select>
</div>
</div>
</style>
<!– Search input–>
<div class=”form-group”>
<label class=”col-md-4 control-label” for=”searchinput”>Destination Host</label>
<div class=”col-md-4″>
<input id=”host” name=”searchinput” class=”form-control input-md” id=”searchinput” type=”search” placeholder=””>
</div>
</div>
<!– Search input–>
<div class=”form-group”>
<label class=”col-md-4 control-label” for=”searchinput”>Destination Directory</label>
<div class=”col-md-4″>
<input id=”dir” name=”searchinput” class=”form-control input-md” id=”searchinput” type=”search” placeholder=”C:/DEV/NA/1_2_3/NT_CV”>
</div>
</div>
<!– Button –>
<center><div class=”form-group”>
<label class=”col-md-4 control-label” for=”LOAD”></label>
<div class=”col-md-4″>
<button name=”LOAD” class=”btn btn-primary” id=”LOAD”>LOAD</button>
</div>
