(Duplicate?) I've tried several Stackoverflow postings related to this, but I cannot get a javaScript example to work. I'd like to avoid having to use jQuery, for the time being.
I want to create the information shown by radio buttons dynamically, using javascript. In this example, I would want to write a function that displays some other values for these radio buttons 'Answer 1' and 'Answer 2'. For example, I don't actually want 'Answer 1'. Goal is for the user to click on one of the multiple choice answers, then hit submit/save to self-check their own knowledge.
I have already learned, through my more complex project code, that a submit/save button that is hard-coded into the html <form> section does not seem to associate with values displayed by the radio buttons, that I managed to add in using javaScript * It seems to me that changing hardcoded information already displayed by the radio buttons might work.
When user clicks on the submit/'save' button, I don't need to refer to the actual answer information that the radio button is displaying. I only need to know whether , in this case, it's the first or second answer chosen.
<html>
<script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
alert ( "You have selected the first answer" );
}
else
if(document.myform.operation[1].checked == true)
{
alert ( "You have selected the SECOND answer" );
}
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
<input type="radio" name="operation" value="1" checked>Answer 1
<input type="radio" name="operation" value="2">Answer 2
<p>
<input type="submit" name="submit" value="save">
</p>
</form>
</html>
(I don't know if I should include this following example I tried as well)
BTW Here is another of the example I tried - a posting but I cannot get this idea to work . I was trying to get the first radio button to display 'junk' instead of 'Answer1' as originally hard coded. But I have an error from code borrowed from posting, that I cannot resolve.
It's from
Javascript how to change radio button label text?
<html>
<form name="myform" onsubmit="return OnSubmitForm();">
<input type="radio" id = 'first' name="operation" value="1" checked <label for="alsoFirst"> Answer 1
<input type="radio" id = 'second' name="operation" value="2"<label for="alsoSecond">Answer 2
<p>
<input type="submit" name="submit" value="save">
</p>
</form>
<script type="text/javascript">
document.addEventListener('readystatechange', function() {
// Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
init();
}
});
function init() {
console.log ("expect to change -Answer 1- displayed by first button to word junk");
// this works
var label = document.getElementById('first').getElementsByTagName('alsoFirst') [0];
// this does not work
label.innerHTML = 'junk';
}
//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
alert ( "You have selected the first answer" );
}
else
if(document.myform.operation[1].checked == true)
{
alert ( "You have selected the SECOND answer" );
}
if (document.uniqueName.checked == true){
alert ( "You have selected the THIRD answer" );
}
}
/*
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
</input>
var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';
*/
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>
</html>
- I previously got values from my arrays to display by inserting table rows and concatenating strings. This worked, and went into the table, but did not tie into the submit/save button hardcoded into original
<form>. I still plan to have radio answer buttons in a table, but I'm trying to make a more basic example here.
