AndrewStanton94/aFormWithOutput.html

## aFormWithOutput.html
<!DOCTYPE HTML>
<html>
    <head>
        <title>Dynasite 2d</title>
        <meta charset = 'UTF-8'>
        <link rel="icon" href="favicon.ico">
        <script src='ds2d.js'></script>
        <style>
            fieldset {border-radius: 5px}
        </style>
    </head>

    <body>
        <h1>ds2d &ndash; a revised active form</h1>

        <fieldset>
            <legend>Personal Data</legend>
            <form id=myfirstform>
                Name: <input type=text name=who value='Fred Bloggs'>
                <br>
                Gender &nbsp;
                    <input type=radio name=gender value=m> M &nbsp;
                    <input type=radio name=gender value=f> F &nbsp;
            </form>
        </fieldset>

        <div id=fieldstuff></div>

        <div id=radiostuff></div>
    </body>
</html>

## ds2d.js
function getFormRadioValue (formelem, radioname) {
    var buttons = formelem[radioname];
    for (var i=0, n=buttons.length; i<n; i++)
        if (buttons[i].checked)
            return buttons[i].value;
    return undefined;
}

function movestuff () {
    var theform = document.getElementById('myfirstform');
    var fielddiv = document.getElementById('fieldstuff');
    var radiodiv = document.getElementById('radiostuff');
    fielddiv.innerHTML = '<p>Text field value is "' + theform.who.value + '" </p>';
    radiodiv.innerHTML = '<p>Radio-button value is "' + getFormRadioValue(theform, 'gender') +  '" </p>';
}
window.addEventListener(
    'load',
    function (event)
    {
        var firstform = document.getElementById('myfirstform');
        firstform.addEventListener(
            'submit',
            function (event)
            {
                movestuff();
                event.preventDefault();
            }
        );
    }
);
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Dynasite 2d</title>
	<meta charset = 'UTF-8'>
	<link rel="icon" href="favicon.ico">
	<script src='ds2d.js'></script>
	<style>
	fieldset {border-radius: 5px}
	</style>
	</head>

	<body>
	<h1>ds2d – a revised active form</h1>

	<fieldset>
	<legend>Personal Data</legend>
	<form id=myfirstform>
	Name: <input type=text name=who value='Fred Bloggs'>
	<br>
	Gender
	<input type=radio name=gender value=m> M
	<input type=radio name=gender value=f> F
	</form>
	</fieldset>

	<div id=fieldstuff></div>

	<div id=radiostuff></div>
	</body>
	</html>
	function getFormRadioValue (formelem, radioname) {
	var buttons = formelem[radioname];
	for (var i=0, n=buttons.length; i<n; i++)
	if (buttons[i].checked)
	return buttons[i].value;
	return undefined;
	}

	function movestuff () {
	var theform = document.getElementById('myfirstform');
	var fielddiv = document.getElementById('fieldstuff');
	var radiodiv = document.getElementById('radiostuff');
	fielddiv.innerHTML = '<p>Text field value is "' + theform.who.value + '" </p>';
	radiodiv.innerHTML = '<p>Radio-button value is "' + getFormRadioValue(theform, 'gender') + '" </p>';
	}
	window.addEventListener(
	'load',
	function (event)
	{
	var firstform = document.getElementById('myfirstform');
	firstform.addEventListener(
	'submit',
	function (event)
	{
	movestuff();
	event.preventDefault();
	}
	);
	}
	);