Working with radio buttons

Working with radio buttons

html form radio buttons

Search for: html form radio buttons

Nice intro to html forms


<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female

horizontal radio button style in html

Search for: horizontal radio button style in html


<form style="display:inline">
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

Question is: Male Female

code for setting a radio button in html

Search for: code for setting a radio button in html


<form style="display:inline">
<input checked="false" type="radio" name="sex" value=0>Male</input>
<input checked="true" type="radio" name="sex" value=1>Female</input>
</form>


<form style="display:inline">
<input type="radio" name="sex" value="male">Male
<input checked type="radio" name="sex" value="female">Female
</form>

Notice that just the presence of checked will set it.

Here is how to use a text area


<textarea rows="4" cols="50">
stuff here
</textarea>


function saveSectionType()
{
    //get the selected section type id
    var sectionid = GenerateQuestionsForm.SectionTypeRB.value;
    alert("sectionid: " + sectionid);
}

where the form name is "GenerateQuestionsForm" 


<p class="SatQuestionOptions"> 
<input type="radio" name="{{f_SatQuestion_id}}" value="a">a</input>
<input type="radio" name="{{f_SatQuestion_id}}" value="a">b</input>
<input type="radio" name="{{f_SatQuestion_id}}" value="a">c</input>
<input type="radio" name="{{f_SatQuestion_id}}" value="a">d</input>
<input type="radio" name="{{f_SatQuestion_id}}" value="a">e</input>
</p>

javascript form object methods

Search for: javascript form object methods

Here is the form object reference


function getChangedAlternateAnswers(formobj)
{
    var optionsArray = new Array();
    var elementArray = formobj.elements;
    for(var i=0;i<elementArray.length;i++)
    {
        var element = elementArray[i];
        if (element.type == "text")
        {
           var eName = element.name;
           var eValue = element.value;
           var oValue = getOriginalValueForQuestionId(eName);
           if (eValue != oValue)
           {
            var optionObject = getOptionObject(eName, eValue);
            optionsArray.push(optionObject);
           }
        }
    }
    return optionsArray;
}

function getOriginalValueForQuestionId(questionid)
{
    var qname = questionid + "_original";
    var elem = document.getElementById(qname);
    return elem.value;
}


<input type="text" name="{{f_SatQuestion_id}}" value="{{f_alternate_answer}}"/>
<input type="hidden" id="{{f_SatQuestion_id}}_original" value="{{f_alternate_answer}}"/>


<p><a id="DeleteTestFormController" href="javascript:toggleDeleteTestForm()">
Yes. Help me delete this test
</a></p>

<script>
var deleteTestFormVisible = false;
function toggleDeleteTestForm()
{
    if (deleteTestFormVisible == false)
    {
        $("#DeleteTestFormID").show();
        $("#DeleteTestFormController").text(
             "No! I do not want to delete this test. Just messing with you!");
        deleteTestFormVisible = true;
    }
    else
    {
        $("#DeleteTestFormID").hide();
        $("#DeleteTestFormController").text("Yes. Help me delete this test");
    }
}
</script>

<form id="DeleteTestFormID" class="aspire_app_sat_form hidefirst">
....
</form>

Here are earlier notes and hide and show

Nice introduction to the DOM Element API


function highlightFieldAsError(formfield)
{
    $(formfield).addClass("fielderror");
    var errorMessageFieldDivId = formfield.id;
    errorMessageFieldDivId += "_InError";
    var id = "#" + errorMessageFieldDivId;
    var jid = $(id);
    jid.removeClass("hidefirst");
    jid.addClass("ErrorMessageDiv");
    jid.show();
}
function resetFieldAsError(formfield)
{
    //reset the field color
    $(formfield).removeClass("fielderror");
    
    //reset the field error message div
    var errorMessageFieldDivId = formfield.id;
    errorMessageFieldDivId += "_InError";
    var id = "#" + errorMessageFieldDivId;
    var jid = $(id);
    jid.removeClass("ErrorMessageDiv");
    jid.hide();
}


<p class="SatQuestionTitle">
{{f_question_name}}
</p>
<p> 
<input id="{{f_SatQuestion_id}}_ID" type="text" name="{{f_SatQuestion_id}}" value="{{f_alternate_answer}}"/>
<input type="hidden" id="{{f_SatQuestion_id}}_original" value="{{f_alternate_answer}}"/>
</p>
<div id="{{f_SatQuestion_id}}_ID_InError" class="hidefirst">
<p>The answer needs to be a number or a fraction: 2.3, 23, -23, -0.5, 2/8, -23/17 etc</p>
</div>


//An ID for the field
SomeControl_ID

//An ID to keep its old value
SomeControl_id_original

//An ID to show if it is an error with a helpful message
SomeControl_inError_DivId

table cell span

Search for: table cell span


<td colspan="2">Sum: $180</td>

styling a radio button background

Search for: styling a radio button background

One may have to put a span around it and then style that


<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>


elem.name
elem.id
elem.checked - boolean
elem.getAttribute
elem.innherHtml
...
etc.

Use this link to discover others

javascript ceiling function

Search for: javascript ceiling function

w3schools ref


Math.ceil(2.2) => 3