I have a textbox in which the user is allowed to enter alphanumeric input. I also have a plus image which on clicking will have to add the entered text to a multiple select box called "add key num" (shown below). After adding a few inputs to the multiple select box "add key num", the user can click the left arrow to add the final list to the "list key num" select box. I am stuck on the JavaScript for adding the text input from the textbox to the first select box. Please advise.
Here is the code that I have:
<cfparam name="SESSION.stkeynum" default="">
<table border="1" align="center" STYLE="margin-left:120px;" bgcolor="##B0C4DE">
<tr>
<td align="center" >ENTER KEY NUM</td>
<td align="center" ></td>
<td align="center" >ADD KEY NUM</td>
<td align="center" ></td>
<td align="center" >LIST KEY NUM</td>
<td align="center" >AMOUNT</td>
</tr>
<tr>
<td align="center"><input type="text" maxlength ="8" name="vstkeynum" id="vstkeynum" value="" size="15"></td>
<td><img src="../images/plus.jpg" alt="Add Key number" onclick="add_cc(document.myform.vstkeynum.value);"></img></td>
<td nowrap>
<div id="Div1"></div>
<select name="keynumber" size="5" multiple style="width: 175px; display: inline;">
<option value="null"> </option>
</select>
</td>
<td><img src="../images/arrow_right.gif" alt="Add To List" onclick="copySelectedOptions_edit(document.myform.keynumber,document.myform.keynumber_selection);">
<hr>
<img onclick="removeSelectedOptions_edit(document.myform.keynumber_selection);" src="../images/arrow_left.gif" alt="Delete From List">
</td>
<td nowrap>
<select name="keynumber_selection" size="5" multiple style="width: 175px;">
</select>
</td>
<td align="center"><input type="text" maxlength ="8" name="amount" id="amount" value="" size="7"></td>
</tr>
</table>
JavaScript:
<script type="text/javascript">
function add_cc(a) {
// inital load
ajax({
url: 'add_keynum.cfm?vval=' + a,
fillDiv: 'Div1',
showBusy: true
});
document.myform.vstkeynum.value = "";
}
</script>
<script>
function copySelectedOptions_edit(from, to) {
var options = new Object();
if (hasOptions(to)) {
for (var i = 0; i < to.options.length; i++) {
options[to.options[i].value] = to.options[i].text;
}
}
if (!hasOptions(from)) {
return;
}
for (var i = 0; i < from.options.length; i++) {
var o = from.options[i];
if (o.selected) {
if (options[o.value] == null || options[o.value] == "undefined" || options[o.value] != o.text) {
if (!hasOptions(to)) {
var index = 0;
} else {
var index = to.options.length;
}
to.options[index] = new Option(o.text, o.value, false, false);
}
}
}
if ((arguments.length < 3) || (arguments[2] == true)) {
sortSelect(to);
}
from.selectedIndex = -1;
to.selectedIndex = -1;
}
function removeSelectedOptions_edit(from) {
if (!hasOptions(from)) {
return;
}
if (from.type == "select-one") {
from.options[from.selectedIndex] = null;
} else {
for (var i = (from.options.length - 1); i >= 0; i--) {
var o = from.options[i];
if (o.selected) {
from.options[i] = null;
}
}
}
from.selectedIndex = -1;
}
</script>
This is the code in add_keynum.cfm:
<cfif isDefined("vval") >
<cfif trim(vval) neq "">
<cfset SESSION.stkeynum = Listappend(SESSION.stkeynum,vval)>
<cfoutput>#SESSION.stkeynum#</cfoutput>
<cfelse>
<cfif isDefined("session.stkeynum")>
<cfoutput>#SESSION.stkeynum#</cfoutput>
</cfif>
</cfif>
</cfif>
Related
I have a html table in with razor and I want to send some data from the table to a controller via Javascript.
I tried several different solutions but the data never seems to reach my controller while alerts are being hit. The breakpoints in the controller are never being hit which indicates to me that the data can't reach the controller.
I want the value of #item.PartId and the value of checked to be send to the controller.
<div class="Table">
{
<table id="table1" class="table table-striped TableData">
#{var id = 0;}
#foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="#id">
<td>#id</td>
<td><label>#item.PartDescription</label> <br /> #item.PartId (#item.StatusCode)</td>
<td>#item.Supplier</td>
<td style="width: 100px !important">
#item.TijdOpO3 #if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>#item.KeurCode</td>
<td>#item.PromiseDate</td>
<td>#item.WidthAndPartType</td>
<td>
#item.PieceLengthWithUnit <br /> #item.NrOfPieces #if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
#if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ #item.NumberReceived}
</td>
<td>#item.VoorraadQty m</td>
<td style="width: 100px !important">
#item.SalesOrderQty m <br /> #item.NrOfSalesOrders #if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
#item.StalenOrdersQty m <br /> #item.NrOfStalenOrders #if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>
Javascript
<script type="text/javascript">
$(function ClickHandle() {
$("input[name='IsChecked']").change(function (element) {
var table = document.getElementById("table1");
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var lastorder = row.cells[12].firstChild;
var check = lastorder.checked;
if (check) {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = "yellow";
}
else {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = null;
}
//post item.partid and value of check to controller here.
}
});
});
</script>
Controller
[HttpPost]
public ActionResult PostIsChecked(string partId, string isChecked)
{
Part part = new Part
{
id = partId,
isChecked = isChecked
};
//Do stuff
receipt.UpdateCheckedStatus(part);
}
You can try to put a hidden input into <tr></tr>,and set its value with #item.PartId.Then use ajax to post data to action.Here is a demo:
<div class="Table">
{
<table id="table1" class="table table-striped TableData">
#{var id = 0;}
#foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="#id">
<td>#id</td>
<td><label>#item.PartDescription</label> <br /><input hidden value=#item.PartId/> #item.PartId (#item.StatusCode)</td>
<td>#item.Supplier</td>
<td style="width: 100px !important">
#item.TijdOpO3 #if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>#item.KeurCode</td>
<td>#item.PromiseDate</td>
<td>#item.WidthAndPartType</td>
<td>
#item.PieceLengthWithUnit <br /> #item.NrOfPieces #if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
#if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ #item.NumberReceived}
</td>
<td>#item.VoorraadQty m</td>
<td style="width: 100px !important">
#item.SalesOrderQty m <br /> #item.NrOfSalesOrders #if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
#item.StalenOrdersQty m <br /> #item.NrOfStalenOrders #if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>
js:
$("input[name='IsChecked']").change(function () {
var checked = this.checked;
var PartId = $(this).parent().parent().find("input")[0].value;
$.ajax({
type: "POST",
url: "PostIsChecked",
data: { "isChecked": checked, "partId": PartId},
success: function (data) {
}
});
});
Trying to click on an HTML cell and grab that cell's html data, stick it into a form field to be used in a latter process. I can set this fields value to anything I want if I code it directly like: blah = 99; however if I change that hard value to a variable or to the cell contents it doesn't work. I can alert it all day long, I just cannot for the life of me get the value to go to the form field. What am I missing?
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
getval(this);
};
}
}
function getval(cel) {
var theTarget;
theTarget = cel.innerHTML;
document.getElementById("status").value = cel.innerHTML;
}
<center>
Click on below table cell to find its value.
<br />
</center>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
<tr>
<td>
R1C1
</td>
<td>
R1C2
</td>
<td>
R1C3
</td>
<td>
R1C4
</td>
</tr>
</table><br><br>
<p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
</p>
It works. It's just that the innerHTML has too much white space around the actual text. Use trim() to get rid of it.
<html>
<head>
<title>Find table cell value on cell (table) click using JavaScript</title>
</head>
<body>
<center>
Click on below table cell to find its value.
<br />
</center>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
<tr>
<td>
R1C1
</td>
<td>
R1C2
</td>
<td>
R1C3
</td>
<td>
R1C4
</td>
</tr>
</table><br><br>
<p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
</p>
<script language="javascript">
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
getval(this); };
}
}
function getval(cel) {
var theTarget;
theTarget = cel.innerHTML;
document.getElementById("status").value = cel.innerHTML.trim();
}
</script>
</body>
</html>
You can use regular expression to remove spaces before and after the string cel.innerHTML.replace(/^\s+|\s+$/g,''); , this will be supported in dinosaur browser that don't support trim()
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
var theTarget;
theTarget = cel.innerHTML;
document.getElementById("status").value = cel.innerHTML.replace(/\s/g, "");
}
<center>
Click on below table cell to find its value.
<br />
</center>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
<tr>
<td>
R1C1
</td>
<td>
R1C2
</td>
<td>
R1C3
</td>
<td>
R1C4
</td>
</tr>
</table><br><br>
<p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
</p>
I need to pre-populate textfields that's using jquery tokeninput based on what is populated from a readonly field right next to it. This readonly text field is populated based on the user's selection from a dropdown. I'm at a standstill as to best way to achieve this. Basically need to copy the value from the textfield (name=hndarea) to the dropdown (name=selarea) right next to it which is not using tokeninput. The other ones are both text fields, one readonly (hndManager1) and the other one (name=txtManager1) not read only using tokeninput. The user could change what's in the non-readonly textfield and dropdown if they wanted.
loc.js file
function setLocDropdown_other() {
var strval = $("#selPin").val();
if (strval != '') {
var $select = $('#selLocation')
$select.empty();
$select.append('<option value="" selected> --Please select--</option>');
getdropdowndata('/cfc/LocMatrix.cfc?method=getLocJson&Pin=' + strval,$select,'',strval)
}
}
function getLocInfo(obj)
{
var $Pin = $("#selPin").val();
var $Loc = $("#selLocation").val().split("~");
$.ajax({
url: "/cfc/LocMatrix.cfc?method=LocMatrixDetailsJson&Pin=" + $Pin + '&Location='+ $Loc[0],
dataType: "json",
maxrow: 1,
dataFilter: function (data) { return data; },
success: function (data) {
//map columns to names
$('#hndVP').val('')
$('#hndManager1').val('')
var columnMap = {}
for (var i = 0; i < data.COLUMNS.length; i++) {
columnMap[data.COLUMNS[i]] = i
}
for (var i = 0; i < data.DATA.length; i++) {
$('#trChangeValue').show()
$('#hndarea').val(data.DATA[i][columnMap.area])
$('#hndarea').show()
if (data.DATA[i][columnMap.VP_E] != null) {$('#hndVP').val(data.DATA[i][columnMap.VP_E])}
$('#hndVP').show()
if (data.DATA[i][columnMap.Loc_MGR_E1] != null) {$('#hndManager1').val(data.DATA[i][columnMap.Loc_MGR_E1])}
$('#hnManager1').show()
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
page.cfm
<script>
$(document).ready(function()
{
//autocomplete using tokeInput....
$("#txtVP").tokenInput("/cfc/users.cfc?method=userAutoCompleteJSON", {
theme: "vweb",
tokenLimit: 1,
queryParam: "exchUsername",
tokenFormatter: function(item){
return "<li><p>" + item.id + "</p></li>"
}
});
$("#txtManager1").tokenInput("/cfc/users.cfc?method=userAutoCompleteJSON", {
theme: "vweb",
tokenLimit: 1,
queryParam: "exchUsername",
tokenFormatter: function(item){
return "<li><p>" + item.id + "</p></li>"
}
});
})
</script>
<cfoutput>
<script>
$(document).ready(function()
{
<cfif form.txtRequestor neq "">
$("##txtRequestor").tokenInput("add", {id: "#form.txtRequestor#", name:"#form.txtRequestor#"});
</cfif>
<cfif form.txtVP neq "">
$("##txtVP").tokenInput("add", {id: "#form.txtVP#", name:"#form.txtVP#"});
</cfif>
<cfif form.txtManager1 neq "">
$("##txtManager1").tokenInput("add", {id: "#form.txtManager1#", name:"#form.txtManager1#"});
</cfif>
});
</script>
</cfoutput>
<tr>
<td class="tdheader">area <span class="required">*</span></td>
<td>
<div style="float:left;"><input type="text" id="hndarea" name="hndarea" class="hndFields" readonly="true" value="#form.hndarea#"></div>
<div style="float:left;">
<cfselect name="selarea" style="width:233px;">
<cfloop query="#getLocMatrixSelectionP['area']#">
<option value="#val#" <cfif form.selarea eq val>Selected</cfif>>#desc#</option>
</cfloop>
</cfselect>
<span id="label_selarea" class="err"></span>
</div>
</td>
</tr>
<tr>
<td class="tdheader" valign="top">VP <span class="required">*</span></td>
<td valign="top">
<div style="float:left;"><input type="text" id="hndVP" name="hndVP" class="hndFields" readonly="true" value="#form.hndVP#"></div>
<div style="float:left;"><cfinput type="text" name="txtVP" style="float:left !important;">
<span id="label_txtVP" class="err"></span></div></td>
</tr>
<tr>
<td class="tdheader" valign="top">Manager 1 <span class="required">*</span></td>
<td nowrap="nowrap">
<div style="float:left;"><input type="text" id="hndManager1" name="hndManager1" class="hndFields" readonly="true" value="#form.hndManager1#"></div>
<div style="float:left;"><cfinput type="text" name="txtManager1">
<span id="label_txtManager1" class="err"></span></div>
</td>
</tr>
I have an order form within an HTML table associated to some JavaScript verification logic. The current code works but I would like some enhancements to be implemented.
Currently, pressing the "verify" order button gives me the following output:
Line 0 = 1 Qty Line 1 = 4 Qty Line 2 = 2 Qty
Instead of showing table lines numbers followed by quantity value, I need the text to contain the actual products names. E.g. "Line 0 = 1" → "Apple = 1" …
I cannot really seem to figure it out can someone tell me how to do this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath#example.net) -->
<!-- Web Site: http://website.example.net/~mike_mcgrath/ -->
<!--
function count(f, n, u) {
f.line_sum[n].value = f.line[n].value * u;
f.line_sum[n].value = Math.ceil(f.line_sum[n].value * 1000) / 1000;
f.line_sum[n].value = Math.floor(f.line_sum[n].value * 1000) / 1000;
f.line_sum[n].value = Math.round(f.line_sum[n].value * 100) / 100;
if (f.line_sum[n].value == "NaN") {
alert("Error:\nYou may only enter numbers...\nPlease retry");
f.line[n].value = f.line[n].value.substring(0, f.line[n].value.length - 1);
f.line_sum[n].value = f.line[n].value * u;
if (f.line_sum[n].value == "0") f.line_sum[n].value = "";
} else {
var gt = 0;
for (i = 0; i < f.line_sum.length; i++) {
gt += Math.ceil(f.line_sum[i].value * 1000) / 1000;
}
gt = Math.round(gt * 1000) / 1000;
f.grand_total.value = "$ " + gt;
decimal(f);
}
}
function get_data(f) {
var order_data = "This Order is ...\n";
for (i = 0; i < f.line.length; i++) {
if (f.line[i].value == "") f.line[i].value = "0";
order_data += "Line " + i + " = " + f.line[i].value + " Qty\n";
}
if (f.grand_total.value == "") f.grand_total.value = "Nil";
order_data += "Total Order Value = " + f.grand_total.value;
document.g.order.value = order_data;
}
function decimal(f) {
for (i = 0; i < f.line_sum.length; i++) {
var d = f.line_sum[i].value.indexOf(".");
if (d == -1 && f.line[i].value != 0) f.line_sum[i].value += ".00";
if (d == (f.line_sum[i].value.length - 2)) f.line_sum[i].value += "0";
if (f.line_sum[i].value == "00") f.line_sum[i].value = "";
}
d = f.grand_total.value.indexOf(".");
if (d == -1) f.grand_total.value += ".00";
if (d == (f.grand_total.value.length - 2)) f.grand_total.value += "0";
}
function send_data(g) {
get_data(document.f);
if (document.f.grand_total.value == "Nil") {
var conf = confirm("No items are entered - \nDo you want to submit a blank order?");
if (conf) g.submit();
else init();
} else g.submit();
}
function init() {
document.f.reset();
document.f.line[0].select();
document.f.line[0].focus();
document.g.order.value = "";
}
window.onload = init;
// -->
</SCRIPT>
</head>
<body>
<FORM NAME="f">
<TABLE BGCOLOR="mistyrose" BORDER="2" WIDTH="320" CELLPADDING="5" CELLSPACING="0" SUMMARY="">
<TBODY>
<TR>
<TD COLSPAN="4" ALIGN="center">
<B>Order Form</B>
</TD>
</TR>
<TR BGCOLOR="beige">
<TD>
<U>Item</U>
</TD>
<TD>
<U>Qty</U>
</TD>
<TD>
<U>Each</U>
</TD>
<TD ALIGN="right">
<U>Total</U>
</TD>
</TR>
<TR>
<TD>Apple</TD>
<TD>
<INPUT NAME="line" TYPE="text" SIZE="5" VALUE="" ONKEYUP="count(this.form,0,5.95)">
</TD>
<TD>$ 5.95</TD>
<TD ALIGN="right">
<INPUT NAME="line_sum" TYPE="text" SIZE="10" READONLY>
</TD>
</TR>
<TR BGCOLOR="beige">
<TD>Banana</TD>
<TD>
<INPUT NAME="line" TYPE="text" SIZE="5" VALUE="" ONKEYUP="count(this.form,1,10.95)">
</TD>
<TD>$ 10.95</TD>
<TD ALIGN="right">
<INPUT NAME="line_sum" TYPE="text" SIZE="10" READONLY>
</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>
<INPUT NAME="line" TYPE="text" SIZE="5" VALUE="" ONKEYUP="count(this.form,2,20.95)">
</TD>
<TD>$ 20.95</TD>
<TD ALIGN="right">
<INPUT NAME="line_sum" TYPE="text" SIZE="10" READONLY>
</TD>
</TR>
<TR BGCOLOR="beige">
<TD>
<INPUT TYPE="button" VALUE="Reset" ONCLICK="init()">
</TD>
<TD COLSPAN="2" ALIGN="right">
<U>Grand Total :</U>
</TD>
<TD ALIGN="right">
<INPUT NAME="grand_total" TYPE="text" SIZE="10" READONLY>
</TD>
</TR>
<TR>
<TD COLSPAN="4" ALIGN="center">
<INPUT TYPE="button" VALUE="Press to Verify Order" ONCLICK="get_data(this.form)">
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
<FORM NAME="g" METHOD="post" ENCTYPE="text/plain" ACTION="mailto:user#isp">
<TABLE BGCOLOR="cadetblue" BORDER="4" WIDTH="320" CELLPADDING="5" CELLSPACING="0" SUMMARY="">
<TBODY>
<TR>
<TD ALIGN="center">
<TEXTAREA NAME="order" ROWS="5" COLS="35">
</body>
</html>
I have a requirement to populate a drop down list box in my form with human races. I believe I've done it correctly but I get an error that says Error: Unable to get property 'appendChild' of undefined or null reference
What am I doing wrong?
HTML:
<!DOCTYPE html />
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="TheCSS.css" />
<style type="text/css">
.style1 {
height: 26px;
}
</style>
</head>
<body>
<script type="text/javascript" src="C:\Users\Marc\Desktop\JavaScript Projects\TheJavaScript.js"></script>
<center>
<table class="style1">
<tr>
<td colspan="4">
<center>
<h1><b>New Hire Form</b></h1>
</center>
</td>
</tr>
<tr>
<td id="subHeader" colspan="4"></td>
</tr>
<tr>
<td class="style3">First Name</td>
<td class="style2">
<input type="text" id="FirstName" onchange="return LastName_onchange()" />
</td>
<td class="style4">Last Name</td>
<td>
<input id="LastName" type="text" onchange="return FirstName_onchange()" />
</td>
</tr>
<tr>
<td class="style1">Sex</td>
<td class="style1">Male
<input id="Radio1" checked="true" name="R1" type="radio" value="M" /> Female
<input id="Radio1" checked="true" name="R1" type="radio" value="F" />
</td>
<td class="style1">Race</td>
<td class="style1">
<select id="RaceDropDown" name="D1"></select>
</td>
</tr>
<tr>
<td class="style3"> </td>
<td class="style2"> </td>
<td class="style4">
<input type="button" id="myButt" value="Submit Entry" onclick="return myButt_onclick()" />
</td>
<td> </td>
</tr>
</table>
</center>
</body>
</html>
JavaScript:
var select = document.getElementById('RaceDropDown');
var options = ["Asian", "Black"];
var i;
for (i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
function LastName_onchange() {
var LastName = document.getElementById('LastName').value;
var FirstName = document.getElementById('FirstName').value;
document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}
function FirstName_onchange() {
var LastName = document.getElementById('LastName').value;
var FirstName = document.getElementById('FirstName').value;
document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}
CSS:
#subHeader
{
text-align: right;
}
Change this:
for (i = 0; i <= options.length; i++)
to
for (i = 0; i < options.length; i++)
Just need to do < . not <=
As mentioned in my comments, the script should be called after the element is created. If not, the script would throw an error because it will not find the select element to add options.
Please create a function for populating the drop-down and call it onload like the below:
function popDropDown() {
var select = document.getElementById('RaceDropDown');
var options = ["Asian", "Black", "White"];
var i;
for (i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
window.onload = popDropDown;
As an aside, in the for loop i < options.length is enough instead of i <= options.length.