Object is null for radio value created by PHP

[Wdblazer]

I have a unique problem with one of my php form page and the javascript that passes the radio value. If the ELSE function in my php runs off and print 3 radio options, I have no problem passing the value in the URL. However if the IF part runs off and print only one radio option, I got the error

'document.forms.newhappening.EventType.0.checked' is null or not an object



function sendRequest() {
if(document.forms["newhappening"].EventType[0].checked==true)
{
var theEventType = "Public";
}

if(document.forms["newhappening"].EventType[1].checked==true)
{
var theEventType = "Friend";
}
if(document.forms["newhappening"].EventType[2].checked==true)
{
var theEventType = "Personal";
}
new Ajax.Request("newhappeningresult.php",
{
method: 'post',
postBody: 'EventName='+ $F('EventName')+'&EventLocation='+ $F('EventLocation')+'&EventDetail='+ $F('EventDetail')+'&EventTimeHour='+ $F('EventTimeHour')+'&EventTimeMin='+ $F('EventTimeMin')+'&EventTimeShift='+ $F('EventTimeShift')+'&EventType='+ theEventType +'&EventDate='+ $F('EventDate'),
onComplete: showResponse
});
}
function showResponse(req){
$('newhappening').innerHTML= req.responseText;
}


<form id="newhappening" onSubmit="return false;">
<?php
if ($userID == "Public")
{
echo "<input type=RADIO name=\"EventType\" value=\"Public\" checked/>Share with the everyone";
echo "<br>";
}

else
{
echo "<input type=RADIO name=\"EventType\" value=\"Public\" />Share with the public";
echo "<br>";
echo "<input type=RADIO name=\"EventType\" value=\"Friend\" />Share with all my friends";
echo "<br>";
echo "<input type=RADIO name=\"EventType\" value=\"Personal\" checked/>Personal";
echo "<p>";
}
?>
<input type="submit" value="Submit" onClick="sendRequest()">
</p>
</form>

[clueful]

However if the IF part runs off and print only one radio option, I got the error

'document.forms.newhappening.EventType.0.checked' is null or not an object
When only one element exists, there is no array and indexing is not possible. You must detect that situation. I can't test this but you can learn from it:

function sendRequest( form )
{
var group = form.EventType, theEventType = "";

if( group.length )
{
if( group[0].checked )
theEventType = "Public";

if( group[1].checked )
theEventType = "Friend";

if( group[2].checked )
theEventType = "Personal";
}
else
if( group.checked )
theEventType = "Public";

new Ajax.Request("newhappeningresult.php",
{
method: 'post',
postBody: 'EventName='+ $F('EventName')+'&EventLocation='+ $F('EventLocation')+'&EventDetail='+ $F('EventDetail')+'&EventTimeHour='+ $F('EventTimeHour')+'&EventTimeMin='+ $F('EventTimeMin')+'&EventTimeShift='+ $F('EventTimeShift')+'&EventType='+ theEventType +'&EventDate='+ $F('EventDate'),
onComplete: showResponse
});
}


Call the function like this:


<input type="submit" value="Submit" onClick="sendRequest( this.form )">

[Wdblazer]

Great, so thats why I been getting a null object. I don't quite understand your code, it would be great if you could explain it :) I work around the problem by detecting if there is an array length and IF ELSE accordingly. Thanks, how do I put a resolved tag on this thread?


var radiolength = document.forms["newhappening"].EventType.length;

if (radiolength)
{
if(document.forms["newhappening"].EventType[0].checked==true)
{
var theEventType = "Public";
}

if(document.forms["newhappening"].EventType[1].checked==true)
{
var theEventType = "Friend";
}
if(document.forms["newhappening"].EventType[2].checked==true)
{
var theEventType = "Personal";
}
}
else
{
var theEventType = "Public";
}