Как передать данные CSS измененные JS при отправке формы

Question

Подскажите, пожалуйста, как мне передать данные (название класса ral5005 или ral6005), примененные скриптом, при отправке формы?

Набросал пример

const btnCvet = document.querySelector("#btn-cvet");

function color5005() {
            btnCvet.style.background = "rgb(0, 83, 135)";
}
function color6005() {
            btnCvet.style.background = "rgb(17, 66, 50, 0.95)";
}

.ral5005 {
    background: #005387;
    color: #005387;
  margin: 10px;
}
.ral6005 {
    background: #114232;
    color: #114232;
  margin: 10px;
}

.btn-color {
  width: 200px;
  height: 20px;
  margin: 10px
}

<form id="form">
    <div id="send-form-final" class="calc-telo-none">
        <input id="calcUser" type="text" name="user" placeholder="Имя">
        <input id="calcTel" type="tel" name="phone" placeholder="Номер">
    <div id="calc-color" class="calc-color pt-1 calc-block-none">
            <div class="btn-color">
                <div id="btn-cvet"> Крыша </div>
            </div>
            <div id="calc-color-item" class="krisha">
                <a href="#" onclick="color5005();" class="ral5005">RAL 5005</a>
                <a href="#" onclick="color6005();" class="ral6005">RAL 6005</a>
            </div>
        </div>
        <a id="send" href="#">Отправить</a>
    </div>
</form>

В примере не пойму как передать название class`а выбранное пользователем при клике на цвет.

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <form id="form">
    <div id="send-form-final" class="calc-telo-none">
        <input id="calcUser" type="text" name="user" placeholder="Имя">
        <input id="calcTel" type="tel" name="phone" placeholder="Номер">
    <div id="calc-color" class="calc-color pt-1 calc-block-none">
            <div class="btn-color">
                <div id="btn-cvet"> Крыша </div>
            </div>
            <div id="calc-color-item" class="krisha">
                <a href="#" onclick="color5005();" class="ral5005 ral5005_background">RAL 5005</a>
                <a href="#" onclick="color6005();" class="ral6005 ral6005_background">RAL 6005</a>
            </div>
        </div>
        <a id="send" href="#">Отправить</a>
    </div>
</form>

    <script src="src/script.js"></script>
  </body>
</html>

.ral5005_background {
    background: #005387;
}
.ral6005_background {
    background: #114232;
}

.ral5005 {
    color: #005387;
    margin: 10px
}
.ral6005 {
    color: #114232;
    margin: 10px
}

.btn-color {
  width: 200px;
  height: 20px;
  margin: 10px
}

const btnCvet = document.querySelector("#btn-cvet");

function color5005() {
            btnCvet.className  = "ral5005_background";
}
function color6005() {
            btnCvet.className  = "ral6005_background";
}

Answer 2

const form = document.querySelector('form');

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const data = {
    name: form.name.value,
    phone: form.phone.value,
    view: form.view.value,

  }
  console.log(data);


})


const ral5005 = document.querySelector('.ral5005');
const ral6005 = document.querySelector('.ral6005');

ral5005.onclick = () => {
  form.view[0].checked = true;
  form.button.style.backgroundColor = 'purple'
}

ral6005.onclick = () => {
  form.view[1].checked = true;
  form.button.style.backgroundColor = 'brown'
}

  <form>
    <input type="text" name="name" placeholder="Имя">
    <input type="text" name="phone" placeholder="Номер">
    <input type="radio" name="view" value="ral5005">
    <label for="contactChoice1">ral5005</label>
    <input type="radio" name="view" value="ral6005">
    <label for="contactChoice1">ral6005</label>
    <button name="button" type="submit">Отправить</button>
  </form>
  <div style="cursor: pointer; border: 2px solid #000; width: 100px; background-color: purple;" class="ral5005">ral5005
  </div>
  <div style="cursor: pointer; border: 2px solid #000; width: 100px; background-color: brown;" class="ral6005">ral6005
  </div>

БЛОГ НА HUSL

Как передать данные CSS измененные JS при отправке формы

Ответы (2 шт):