Working with radio buttons
satya - 4/28/2014 10:57:15 AM
html form radio buttons
html form radio buttons
satya - 4/28/2014 10:59:04 AM
Example
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
satya - 4/28/2014 10:59:57 AM
will show up as
satya - 4/28/2014 11:00:35 AM
horizontal radio button style in html
horizontal radio button style in html
satya - 4/28/2014 11:03:17 AM
They do show up with display as inline
<form style="display:inline">
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>
satya - 4/28/2014 11:04:16 AM
here see
satya - 5/1/2014 9:00:23 AM
code for setting a radio button in html
code for setting a radio button in html
satya - 5/1/2014 9:05:07 AM
Here is how you set one of the radio buttons
<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>
satya - 5/1/2014 9:05:37 AM
Or this
<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.
satya - 5/20/2014 7:14:05 PM
Example
<textarea rows="4" cols="50">
stuff here
</textarea>
satya - 5/23/2014 2:52:04 PM
Here is how you read from the radio button
function saveSectionType()
{
//get the selected section type id
var sectionid = GenerateQuestionsForm.SectionTypeRB.value;
alert("sectionid: " + sectionid);
}
where the form name is "GenerateQuestionsForm"
satya - 5/23/2014 2:52:43 PM
Notice how radio button names are repeated
<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>
satya - 5/24/2014 1:07:12 PM
javascript form object methods
javascript form object methods
satya - 5/24/2014 1:30:22 PM
Here is how you can detect a changed field
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;
}
satya - 5/24/2014 1:36:03 PM
You can setup the form like this
<input type="text" name="{{f_SatQuestion_id}}" value="{{f_alternate_answer}}"/>
<input type="hidden" id="{{f_SatQuestion_id}}_original" value="{{f_alternate_answer}}"/>
satya - 5/31/2014 9:05:44 AM
Here is a way to hide and open up forms
<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>
satya - 5/31/2014 9:06:41 AM
Here are earlier notes and hide and show
satya - 6/2/2014 9:15:27 AM
Nice introduction to the DOM Element API
satya - 6/2/2014 3:10:34 PM
Here is how to combine DOM and Jquery to deal with field errors
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();
}
satya - 6/2/2014 3:12:11 PM
A corresponding html
<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>
satya - 6/2/2014 3:13:34 PM
For every field there are 3 ids
//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
satya - 6/10/2014 3:44:14 PM
Example
<td colspan="2">Sum: $180</td>
satya - 6/12/2014 12:36:52 PM
styling a radio button background
styling a radio button background
satya - 6/12/2014 12:37:09 PM
One may have to put a span around it and then style that
One may have to put a span around it and then style that
satya - 6/19/2014 10:44:32 AM
checkboxes
<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>
satya - 6/19/2014 11:00:22 AM
If you have a DOM element such as elem = aform.afield, then you can do
elem.name
elem.id
elem.checked - boolean
elem.getAttribute
elem.innherHtml
...
etc.
satya - 6/25/2014 9:00:32 AM
javascript ceiling function
javascript ceiling function
satya - 6/25/2014 9:01:46 AM
example
Math.ceil(2.2) => 3