I'm a newby and am using Webmatrix (CHTML) to try and set up a form that allows the user to select an employee using a dropdownbox.
I think I understand how to make a list:
#{
var db = Database.Open("DatabaseName") ;
var selectCommand="SELECT ID,Employee FROM Employees";
var selectedData = db.Query(selectCommand);
var columns = new[]{"ID", "Employee"};
var grid = new WebGrid(source: selectedData, defaultSort: "Employee" , rowsPerPage:10,columnNames: columns);
}
#grid.GetHtml( )
and I think I know how to get a combobox:
<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="01">Employee01
<OPTION VALUE="02">Employee02
<OPTION VALUE="03">Employee03
<OPTION VALUE="04">Employee04
<OPTION VALUE="05">Employee05 - and so on
</SELECT>
</FORM>
I just want to know how to get the table into the combobox. Would be very happy if someone could show how to do this.
This code creates a dropdown list from the content of your table:
#{
var db = Database.Open("DatabaseName");
var selectCommand = "SELECT ID, Employee FROM Employees";
var selectedData = db.Query(selectCommand);
}
<form name="myform" method="post">
<select name="mylist">
#foreach(var row in selectedData)
{
<option value="#row.ID">#row.Employee</option>
}
</select>
</form>
Related
I have a Google Sheets job tracker with an HTML sidebar interface for adding new jobs. The sidebar has some dropdowns that pull options from a different sheet.
For the "Upcharge" dropdown, I'd like to be able to select multiple options by holding Control and then have those selections separated by commas on output.
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Enter the details for your new job and click the <i><font color=#c5f27b>Save New Job</font></i> button.</b><br><br><br>
<table>
<tbody>
<tr>
<td><b>Upcharge:</b></td>
<td><select id="Upcharge">
<? for (let i in upchargeDPDWN) { ?>
<option value="<?=upchargeDPDWN[i]?>"><?=upchargeDPDWN[i]?></option>
<? } ?>
</select></td>
</tr>
<tr>
<td><b>Client:</b></td>
<td><select id="Client">
<? for (let i in clientDPDWN) { ?>
<option value="<?=clientDPDWN[i]?>"><?=clientDPDWN[i]?></option>
<? } ?>
</select></td>
</tr>
<tr>
<td><b>Description:</b> </td>
<td><input type="text" id="Description" size="22"><br></td>
</tr>
</tbody>
</table><br>
<!-- The user clicks this button to add the new job. -->
<center><input type="button" onclick='saveNew()' value="Save New Job"></center><br><br><br>
<script>
function saveNew(){
//Get the value of the input fields
var upcharge = document.getElementById("Upcharge").value
var client = document.getElementById("Client").value
var description = document.getElementById("Description").value
//Log input values in the web browser console
console.log(upcharge, client, description)
//Send values as arugments to the server side function
google.script.run.applyNew(upcharge, client, description)
}
</script>
</body>
</html>
This is my code to add the new job to the first empty row of the Job Log sheet:
function applyNew(upcharge, client, description) {
var ss = SpreadsheetApp.getActive()
var sheetLog = ss.getSheetByName("Job Log");
var sheetData = ss.getSheetByName("Data");
var rowCountData = sheetData.getMaxRows();
var columnToCheckData = sheetData.getRange("J:J").getValues();
var lastRowData = getLastRowSpecial(columnToCheckData);
if (lastRowData + 1 == rowCountData) {
sheetData.insertRowsAfter(lastRowData, 100);
}
// Get number of rows
var rowCount = sheetLog.getMaxRows();
//Select the column we will check for the first blank cell
var columnToCheck = sheetLog.getRange("B:B").getValues();
// Get the last row based on the data range of a single column.
var lastRow = getLastRowSpecial(columnToCheck);
// If the first empty row is the last row, insert a row before it
// (This is to ensure the data ranges for bar charts on the Dashboard sheet remain dynamic.)
if (lastRow + 1 == rowCount) {
sheetLog.insertRowAfter(lastRow);
}
var selectedRow = lastRow + 1;
//Apply upcharge to Column D = Column 4
sheetLog.getRange(selectedRow, 4).setValue(upcharge);
//Apply client to Column L = Column 12
sheetLog.getRange(selectedRow, 12).setValue(client);
//Apply description to Column N = Column 14
sheetLog.getRange(selectedRow, 14).setValue(description);
sheetLog.insertRowAfter(selectedRow);
};
Can someone please help me update this to allow for multiple options to be selected? All I can find via Google is scripts for selecting multiple items in data validation. Please let me know if any additional information is needed. Thanks in advance!
Here is a simple example of getting multiple options from a select element.
HTML_Test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<select id="Upcharge" multiple size="4">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
</select>
<br>
<input type="button" onclick='saveNew()' value="Save New Job">
<?!= include('JS_Test'); ?>
</body>
</html>
JS_Test.html
<script>
function saveNew() {
try {
let select = document.getElementById("Upcharge");
let options = select.options;
let selected = [];
for( let option of options ) {
if( option.selected ) selected.push(option.value);
}
alert(selected.toString());
}
catch(err) {
alert(err);
}
}
</script>
Screen shot
References
select multiple
select options
I'm trying to check if my select box is empty or not by using class. However, based on the code below, the alert returned not only the id but also another 2 'undefined'. Anyone who can tell me why is this happening?
<script>
$('.test-input').each(function () {
var el = [];
if ($(this).val() === "") {
var target = $(this).attr('id');
alert(target); *// return media_type | underfined | underfined*
el.push(target);
}
})
</script>
<div class="form-group col-sm-4">
<label class="">Type:</label>
<select class="form-control required-input test-input" id="media_type" placeholder="Choose a media">
<option value="">Select a state</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="lizard">Lizard</option>
<option value="snake">snake</option>
</select>
</div>
$('.test-input').each(function () will iterate through each element in your HTML that has the "test-input" class name, so when there you are cycling through those and getting an undefined from pulling its id via var target = $(this).attr('id');, what this means is that somewhere else in the file you must have two other classes named "test-input" without an ID.
I would console.log("Iteration"); in the loop and check your console to see how many times the loop is being run and go from there.
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
I have a select box in my view (it is an umbraco partial view),
<div class="select">
#{
var node = Umbraco.Content(1310);
<select data-val="true" data-val-required="The PickOne field is required." id="PickOne" name="PickOne">
<option value="">Pick One</option>
#foreach (var item in node.Children.Where("Visible"))
{
<option value="#item.Name">
#item.Name
</option>
}
</select>
}
</div>
How can i get selected value of above dropdown in razor?
Please help,
Thanks.
EDIT
I got the value in razor, but it appears only after submit
var sLand = Request.Form["PickOne"];
<p>#sLand</p>
How can i make it dynamic (ie, on change)?
You'll need a bit a javascript to submit the form onchange. This is what I'm using for a project at the moment.
if ($('.select').length) {
var drpDnwBox = $('.select select');
drpDnwBox.on('change', function () { $(this).parents('form').submit(); });
}
now for the razor (I'm new to this myself)
<div class="select">
#{
var sLand = Request.Form["PickOne"];
var node = Umbraco.Content(1310);
<select data-val="true" data-val-required="The PickOne field is required." id="PickOne" name="PickOne">
<option value="">Pick One</option>
#foreach (var item in node.Children.Where("Visible"))
{
if (sLand.Contains(item.Name)) //using a contains
{
selected = "selected=\"selected\"";
}
<option value="#item.Name" #selected>
#item.Name
</option>
}
</select>
}
</div>
The list attribute / datalist element of HTML5 forms shows a dropdown menu of choices one can pick from, edit, and even type in some text. All this can be achieved at once with a clean and powerful code:
<input list="states">
<datalist id="states">
<option value="One">
<option value="Two">
</datalist>
However, how to make such a form send a value which is different from the option text, as in the usual select / option (below)?
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Seems you can't with pure HTML without using some JS+CSS help.
try this i hope its help you.
html
<input id="datalisttestinput" list="stuff" ></input>
<datalist id="stuff">
<option id="3" value="Collin" >
<option id="5" value="Carl">
<option id="1" value="Amy" >
<option id="2" value="Kristal">
</datalist>
script
function GetValue() {
var x = $('#datalisttestinput').val();
var z = $('#stuff');
var val = $(z).find('option[value="' + x + '"]');
var endval = val.attr('id');
alert(endval);
}
Best Wishes
Kumar
Below is Kumah's modified answer that uses a hidden field to contain the value which ultimately gets sent to the server.
$('#inputStates').change(function(){
var c = $('#inputStates').val();
$('#inputStates').val(getTextValue());
$('#statesHidden').val(c);
});
function getTextValue(){
var val = $('#inputStates').val();
var states = $('#states');
var endVal = $(states).find('option[value="' + val + '"]');
//depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
return endVal.text();
}