Kinda new to HTML and JS. Am working on something for a lab computer.
I have cobbled together this code from a few SO sources here and here and am coming up short.
What I am tryin to do: Have my user select from various rows in a table. The rows in those data are presented to user in a lower portion of the page for confirmation. I think need to pass out those parameters to a larger method written in VBScript (for a Biomek liquid handler).
The variables I am passing are global variables in my main program but that program is not "seeing" the variable change by what row is selected.
No matter what I do I cannot get the variable out either A) at all or B) in a numeric form (I need it to be numeric). I either get no global variable change or just a string being passed out.
I think once I identify the value that is selected by the operator and can pass that VALUE into something else I can pass out, but for now all I am able to assign is the string name of the variable and not the value behind it.
Problematic Script:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script language="javascript" type="text/javascript">
function showRow(row)
{
var x=row.cells;
document.getElementById("Volume1").value = x[0].innerHTML;
document.getElementById("Volume2").value = x[1].innerHTML;
}
function ChangeColor(row, highLight)
{
if (highLight)
{
row.style.backgroundColor = '#dcfac9';
}
else
{
row.style.backgroundColor = 'white';
}
}
</script>
</head>
<body>
<FORM METHOD="GET" ACTION="http://localhost">
<table id="myTable" cellspacing="3"
<thead>
<tr>
<th>Volume 1</th>
<th>Volume 2</th>
</tr>
</thead>
<tbody>
<tr onclick="javascript:showRow(this);"
onmouseover="javascript:ChangeColor(this, true);"
onmouseout="javascript:ChangeColor(this, false);" >
<td>88.4</td>
<td>100</td>
</tr>
<tr onclick="javascript:showRow(this);"
onmouseover="javascript:ChangeColor(this, true);"
onmouseout="javascript:ChangeColor(this, false);" >
<td>22.8</td>
<td>44</td>
</tr>
<tr onclick="javascript:showRow(this);"
onmouseover="javascript:ChangeColor(this, true);"
onmouseout="javascript:ChangeColor(this, false);" >
<td>73.2</td>
<td>125</td>
</tr>
<tr onclick="javascript:showRow(this);"
onmouseover="javascript:ChangeColor(this, true);"
onmouseout="javascript:ChangeColor(this, false);" >
<td>13.64</td>
<td>17</td>
</tr>
</tbody>
</table>
<br>
<br>
Volume 1 is:<input type="text" id="Volume1" />
<br>
Volume 2 is:<input type="text" id="Volume2" />
<br>
<br><br><br>
<INPUT TYPE="submit" NAME="submitButton__" VALUE="CONTINUE" />
</FORM>
</body>
</html>Previous Success: In the past I have been able to accomplish what I am attempting. In the snippet below, I am successfully able to "see" the values for the variables "user_NumberSamples", "user_Replicates", and "user_DiluteSample" from my main program. So while this worked in the past my current usecase is a little different, as you'll see:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="VBScript">
<!-- ***** Put scripts for handling page elements here -->
</SCRIPT>
<BODY BGCOLOR="BlanchedAlmond">
<FORM METHOD="GET" ACTION="http://localhost">
<h1 style="text-align:center;">TEST METHOD</h1>
<TABLE BOARDER=1>
<TR>
<P><h3 style="text-align:center;">Please enter all of the required information</h3></TD>
</P>
<BR>
<p>
</p>
<TR>
<TR><strong>Enter the number of samples being tested: </strong></TR>
<TR><INPUT TYPE=text NAME="user_NumberSamples" SIZE=2 VALUE="48">
</TR>
<br>
<br>
<p>
<TR><strong>Please select the number of REPLICTES: </strong><TR>
<select name="user_Replicates" size="1">
<option>3</option>
<option>2</option>
<option>1</option>
</select></BR>
<TR>
</TABLE>
<br>
<tr><strong>Perform a pre-dilution of Samples 1:10?:</strong></tr>
<input type="radio" id="False" name="user_DiluteSample" value="False" checked>
<label for="False">False</label>
<input type="radio" id="True" name="user_DiluteSample" value="True">
<label for="True">True</label><br>
<p>NOTE: Diluting samples will make all replicates come from the same dilution plate, i.e. technical replicates<p>
<INPUT TYPE="submit" NAME="submitButton__" VALUE="Click To Continue">
</FORM>
</BODY>
</HTML>I've tried a lot of things that I can't really articulate, hours and hours of this so now its time to ask some experts. Thanks!
