JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<div id="typ">
					<div id="textTyp">Тип</div>
					<input type="radio" id="option1" name="scr" class="radioKonst" value="image/футболка2.png" checked hidden><label for="option1">Футболка</label>
					<input type="radio" id="option2" class="radioKonst" name="scr" value="image/mujskaya_mayka_constr.png" hidden ><label for="option2">Майка</label>
					<input type="radio" id="option3" class="radioKonst" name="scr" value="image/mujskaya_polo__constr.png" hidden ><label for="option3">Поло</label>
					<input type="radio" id="option4" class="radioKonst" name="scr" value="image/hood_constr123123.png" hidden><label for="option4">Свитшот</label>
					<input type="radio" id="option5" class="radioKonst" name="scr" value="image/hood_constr.png" hidden><label for="option5" >Худи</label>
				</div>
				<div class="color">
					<div id="textImages">Изображение</div>
					<div id="colorBox">
						<div id="colorText">Цвет:</div>
						<input type="radio" id="color1" name="color" class="radioColor" value="#ffffff" hidden checked>
						<label for="color1" class="color-change-block" style="background-color: #fff;"></label>
						<input type="radio" id="color2" name="color" class="radioColor" value="#d9534f" hidden>
						<label for="color2" class="color-change-block" style="background-color: #d9534f;" ></label>
						<input type="radio" id="color3" name="color" class="radioColor" value="#5cb85c" hidden>
						<label for="color3" class="color-change-block" style="background-color: #5cb85c;"></label>
						<input type="radio" id="color4" name="color" class="radioColor" value="#f0ad4e" hidden>
						<label for="color4" class="color-change-block" style="background-color: #f0ad4e;"></label>
						<input type="radio" id="color5" name="color" class="radioColor" value="#000000" hidden>
						<label for="color5" class="color-change-block" style="background-color: #000;"></label>
					</div>
				</div>
				<div class="color">
					<form id="fileForm" name="uploadImage" method="POST"...

JavaScript

var order = {
	type: null,
	color: null,
	turn: null,
	size: null,
	font: null,
	text: null,
	font: null,
	colorText: null,
	sizeText: null, 
}

$(document).ready(function(){
	$("#orderFutbolka").click(function(){
		$('[name=scr]').change(function() {
			order.type = $(this).val();
		});
		$("[name=color").change(function(){
			order.color = $(this).val();
		});
		$('[name=turn]').change(function() {
			order.turn = $(this).val();
		});
		$('[name=size]').change(function() {
			order.size = $(this).val();
		});
		$("#font").change(function(){
		 	order.font = $(this).val();
		 })
		$("#textKonstr").change(function(){
			order.text = $(this).val();
		});
		$("#sizeText").change(function(){
			order.sizeText = $(this).val();
		});
		$("#colorTextKons").change(function(){
			order.colorText = $(this).val();
		});
		$('[name=sizeFutbol]').change(function() {
			order.sizeFutbol = $(this).val();
		});
		$.ajax({
			url: "orderBuy.php",
			type: "POST",
			data: {
				type: order.type, 
				color: order.color,
				turn: order.turn,
				size: order.size,
				font: order.font,
				text: order.text,
				sizeText: order.sizeText,
				colorText: order.colorText,
				sizeFutbol: order.sizeFutbol,
			},
			success: function(data){
				alert(data);
			}
		});
	});
});