PDA

View Full Version : Radio Buttons with Multiple Fields



TimeTracker
06-07-2013, 11:47 AM
I seek to add multiple sets of birth data to calculators which feature present (X) and birth (Y) dates, so that I can choose any one of them for processing. Searching for suitable radio button scripts has led me to try and create one of my own. A single line using birth day, month and year fields without any radio button returns the Julian Day number. Yet as soon as I add other lines of fields with five radio buttons, one checked, I get NaN, regardless of which button is highlighted.

What must I do to make the script work? I have already added a number to each field, e.g. dayY1, dayY2, etc., without success, plus many other variations. Also df.julianDayY.value needs to be the common result. I have considered your rememberMe script II as a possibility, but that requires activating each field every time.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<script type = "text/javascript">
<!-- Hide JavaScript from non-compliant browsers.

/* Radio button code provided by Dynamic Drive (http://www.dynamicdrive.com/forums/
* function obtained from http://www.somacon.com/p143.php.*/

function getCheckedValue(radioObj) {
if(!radioObj){
return "";
}
var radioLength = radioObj.length;
if(radioLength == undefined){
if(radioObj.checked){
return radioObj.value;
}else{
return "";
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}

function determineJulianDayY(df) {
// Calculate Julian Day.

var dayY = parseFloat(df.dayY.value);
var monthY = parseFloat(df.monthY.value);
var yearY = parseFloat(df.yearY.value);
var jdY = gregorianDate2JulianDateY(dayY, monthY, yearY);
var clientNames = document.form.clientNames[0];
var julianDayY;
if (document.form.clientNames[0].checked);
for (var i = 0; i<clientNames.checked.length; i++);
if (jdY > 2299087.5) { df.julianDayY.value = julianDayY };
df.julianDayY.value = jdY;
}
function gregorianDate2JulianDateY(d, m, y) {
// Uses Jean Meeus' method (p61, Astronomical Algorithms).

if (m == 1 || m == 2) {
y--;
m = m+12;
}

var a = trunc(y/100);
var b = 2-a+trunc(a/4);

return trunc(365.25*(y+4716)) + trunc(30.6001*(m+1))+d+b-1524.5;
}

function trunc(n) {
if (n >= 0) return Math.floor(n); else return Math.ceil(n);
}

/*Code for Text Box Reset was supplied by codeexploiter
* at Dynamic Drive www.dynamicdrive.com/forums/).*/
function resetField(name,value) {
document.forms['form'].elements[name].focus();
document.forms['form'].elements[name].value = value;
}

// End hiding here -->
</script>
</head>
<body text="#000000" bgcolor="#FFF2EC" link="#FF0000" vlink="#CC33CC" alink="#FF9900">
&nbsp;

<table BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="400" >
<tbody>
<tr>
<th ALIGN=LEFT><form name="form"><small style="font-family: Tahoma;">Enter Birth Date (DD/MM/YYYY) and Hours from Midnight:-</small></th>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" checked="checked" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="PKL" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="21" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="7" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="1951" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.014" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="MIR" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="8" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="2" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="1955" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.1916" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="KRT" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="12" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="10" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="1957" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.251" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="LAC" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="17" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="9" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="2003" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.7396" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="VLM" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="6" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="8" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="2007" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.7395" type="text"></td>
</tr>

<tr>
<td>&nbsp;&nbsp;<input type="button" value="Calculate" onClick="determineJulianDayY(this.form)"><input name="julianDayY" size=10 type="text">&nbsp;&nbsp;<input type="reset" value="Reset"></form>
</td>
</tr>
</tbody></table>

</body>
</html>

TimeTracker
06-08-2013, 02:28 AM
The related links are of no use to me. It is an entirely different issue to any raised by them. I have continued to experiment with the code using Essential JavaScript by David Herman as a guide. But the console comments are illogical and meaningless. I even numbered each clientNames, e.g. clientNames[0], then [1], etc. and put var jdY = gregorianDate2JulianDateY(dayY, monthY, yearY); in place of if (jdY > 2299087.5) { df.julianDayY.value = julianDayY }; What am I missing that is making it so difficult?

TimeTracker
06-08-2013, 09:58 AM
Thank you one and all for your interest. The matter was resolved without resorting to radio buttons by using five numbered functions and associated scripts with each field numbered respectively.

vwphillips
06-08-2013, 10:07 AM
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<script type = "text/javascript">
<!-- Hide JavaScript from non-compliant browsers.

function determineJulianDayY(df) {
var r=df.clientNames,d=df.dayY,m=df.monthY,y=df.yearY,z0=0;
for (;z0<r.length;z0++){
if (r[z0].checked){
break;
}
}
df.julianDayY.value = gregorianDate2JulianDateY(parseFloat(d[z0].value), parseFloat(m[z0].value), parseFloat(y[z0].value));
}

function gregorianDate2JulianDateY(d, m, y) {
// Uses Jean Meeus' method (p61, Astronomical Algorithms).

if (m == 1 || m == 2) {
y--;
m = m+12;
}

var a = trunc(y/100);
var b = 2-a+trunc(a/4);

return trunc(365.25*(y+4716)) + trunc(30.6001*(m+1))+d+b-1524.5;
}

function trunc(n) {
if (n >= 0) return Math.floor(n); else return Math.ceil(n);
}

/*Code for Text Box Reset was supplied by codeexploiter
* at Dynamic Drive www.dynamicdrive.com/forums/).*/
function resetField(name,value) {
document.forms['form'].elements[name].focus();
document.forms['form'].elements[name].value = value;
}

// End hiding here -->
</script>
</head>
<body text="#000000" bgcolor="#FFF2EC" link="#FF0000" vlink="#CC33CC" alink="#FF9900">
&nbsp;

<table BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="400" >
<tbody>
<tr>
<th ALIGN=LEFT><form name="form"><small style="font-family: Tahoma;">Enter Birth Date (DD/MM/YYYY) and Hours from Midnight:-</small></th>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" checked="checked" type="radio">
&nbsp;&nbsp;<input name="initials" size="3" value="PKL" type="text">
&nbsp;&nbsp;<input name="dayY" size="2" value="21" type="text">
&nbsp;&nbsp;<input name="monthY" size="2" value="7" type="text">
&nbsp;&nbsp;<input name="yearY" size="2" value="1951" type="text">
&nbsp;&nbsp;<input name="hourY" size="3" value="0.014" type="text">
</td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">
&nbsp;&nbsp;<input name="initials" size="3" value="MIR" type="text">
&nbsp;&nbsp;<input name="dayY" size="2" value="8" type="text">&nbsp;&nbsp;
<input name="monthY" size="2" value="2" type="text">
&nbsp;&nbsp;<input name="yearY" size="2" value="1955" type="text">
&nbsp;&nbsp;<input name="hourY" size="3" value="0.1916" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="KRT" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="12" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="10" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="1957" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.251" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="LAC" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="17" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="9" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="2003" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.7396" type="text"></td>
</tr>

<tr style="font-family: Tahoma;">
<td><input name="clientNames" type="radio">&nbsp;&nbsp;<input name="initials" size="3" value="VLM" type="text">&nbsp;&nbsp;<input name="dayY" size="2" value="6" type="text">&nbsp;&nbsp;<input name="monthY" size="2" value="8" type="text">&nbsp;&nbsp;<input name="yearY" size="2" value="2007" type="text">&nbsp;&nbsp;<input name="hourY" size="3" value="0.7395" type="text"></td>
</tr>

<tr>
<td>&nbsp;&nbsp;<input type="button" value="Calculate" onClick="determineJulianDayY(this.form)"><input name="julianDayY" size=10 type="text">&nbsp;&nbsp;<input type="reset" value="Reset"></form>
</td>
</tr>
</tbody></table>

</body>
</html>