Таблица с результатами, это html, зачем в нем data.replace('true', '') и data.replace('false','') не понятно. Это определяет способ выбора, и в обеих случаях можно было задействовать ajax (без iframe). Ну бог с ним, но ведь остальное то к чему. Валидацию можно выбросить с чистой совестью. Элементы выбора либо все списки, либо радио кнопки, либо number, либо range. Единственно, это выбор Y, если он с сотыми и то радио кнопки не пойдут, а number будет утомителен, хотя в нем можно и в ручную набирать. Все поля уже имеют значения по умолчанию.
Здесь только основное:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container" >
<form id="myform" autocomplete="off">
<div>
<label>X</label>
<input type="range" name="InputX" min="-5" max="3" value="0" /> <output>0</output>
</div>
<div>
<label>Y</label>
<input type="text" class="Y" maxlength="5" name="InputY" placeholder=" От -5 до 3" />
</div>
<div>
<label>R</label>
<input type="range" name="InputR" min="1" max="5" value="1" /> <output>1</output>
</div>
<div>
<input type="radio" name="r" value="1" /> <input type="radio" name="r" value="2" checked="" /> <input type="radio" name="r" value="3" />
</div>
<input type="hidden" name="Flag" value="true" />
</form>
<div class="ItemFlex">
<canvas id="plot" width="300" height="300">
</canvas>
</div>
</div>
<script>
var frm = document.getElementById("myform"),
plot_canvas = document.getElementById("plot"),
plot_context = plot_canvas.getContext("2d");
frm.addEventListener('change', function(e) {
if(e.target.type=="range") e.target.nextElementSibling.value = e.target.value;
console.log(this.r.value) //значение RadioNodeList
});
frm.InputY.addEventListener('input', function(e) {
this.value = this.value.replace(/[^\d\.-]/,'');
});
plot_canvas.addEventListener("click", drawPoint, false);
plot_context.beginPath();
plot_context.arc(150, 150, 100, 0, Math.PI/2);
plot_context.lineTo(150, 150);
plot_context.closePath();
plot_context.rect(50, 100, 100, 50);
plot_context.fillStyle = 'red';
plot_context.fill();
plot_context.beginPath();
plot_context.moveTo(100, 150);
plot_context.lineTo(150, 250);
plot_context.lineTo(150, 150);
plot_context.fillStyle = 'red';
plot_context.stroke();
plot_context.closePath();
plot_context.fillStyle = 'red';
plot_context.fill();
plot_context.beginPath();
//Ox
plot_context.moveTo(30, 150);
plot_context.lineTo(270, 150);
plot_context.lineTo(260, 140);
plot_context.moveTo(270, 150);
plot_context.lineTo(260, 160);
//Oy
plot_context.moveTo(150, 30);
plot_context.lineTo(140, 40);
plot_context.moveTo(150, 30);
plot_context.lineTo(160, 40);
plot_context.moveTo(150, 30);
plot_context.lineTo(150, 270);
plot_context.moveTo(30, 150);
plot_context.closePath();
plot_context.stroke();
function drawPoint(e) {
var R = frm.InputR.valueAsNumber, pos = getCursorPosition(e);
plot_context.beginPath();
plot_context.rect(pos.x, pos.y, 5, 5);
pos.x -= 149;
pos.y -= 148;
pos.y *= -1;
pos.x = x/100*R;
pos.y = y/100*R;
console.clear()
console.dir({InputX: pos.x, InputY: pos.y, InputR: R, Flag: false})
}
function getCursorPosition(e) {
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= plot_canvas.offsetLeft ;
y -= plot_canvas.offsetTop ;
return {x: x, y: y}
}
</script>
</body>
</html>
Радио кнопки в форме для примера, для демонстрации, что получить значение этой группы также легко как и списка. Это со слайдером и текстовым полем, хотя, на мой взгляд, здесь удобнее тип number, в которых ручной ввод разрешить только для Y.
В консоли то, что будет передано, ожидаемы ли эти значения не мне судить, а вот на сервере вы их должны проверить, клиенту этого не требуется.
