<!DOCTYPE html>
<html>
<head>
<meta charser="utf-8">
<title>…</title>
</head>
<body>
<form class="example" action="">
<fieldset>
<legend>Версия:</legend>
<label><input type="radio" name="version" value="64" checked> 64 GB</label>
<label><input type="radio" name="version" value="32"> 32 GB</label>
<label><input type="radio" name="version" value="16"> 16 GB</label>
</fieldset>
<fieldset>
<legend>Цвет:</legend>
<label><input type="radio" name="color" value="black" checked> Black</label>
<label><input type="radio" name="color" value="white"> White</label>
</fieldset>
<div>
<a class="link" href="/"></a>
</div>
</form>
<script>
if (!Function.prototype.bind) {
//https://github.com/Octane/jsCore/blob/master/js/common/function.js
}
if (!Array.from) {
Array.from = Array.prototype.slice.call.bind(Array.prototype.slice);
}
function ExampleForm(formElement) {
this._form = formElement;
this._link = formElement.querySelector(this.linkSelector);
}
ExampleForm.prototype = {
constructor: ExampleForm,
linkSelector: ".link",
url: "http://site.com/",
_form: null,
_link: null,
_onSubmit: function (event) {
event.preventDefault();
},
_getRadioGroupValue: function (groupName) {
var radioGroup = this._form[groupName],
i = radioGroup.length, input;
while (i--) {
input = radioGroup[i];
if (input.checked) {
return input.value;
}
}
return undefined;
},
_onRadioGroupChange: function () {
var version = this._getRadioGroupValue("version"),
color = this._getRadioGroupValue("color");
this._link.href = [
this.url,
"?",
"version=", encodeURIComponent(version),
"&",
"color=", encodeURIComponent(color)
].join("");
this._link.innerHTML = document.createTextNode(color + " " + version).nodeValue;
},
init: function () {
var form = this._form;
form.addEventListener("submit", this._onSubmit, false);
this._onRadioGroupChange = this._onRadioGroupChange.bind(this);
Array.from(form.elements).forEach(function (formElement) {
if (formElement.type = "radio") {
formElement.addEventListener("change", this._onRadioGroupChange, false);
}
}, this);
this._onRadioGroupChange();
}
};
(new ExampleForm(document.querySelector(".example"))).init();
</script>
</body>
</html>
