Как захватить данные с submit for JavaScript?

Мне нужно изменить фон и цвет текста с 2 различными формами при нажатии на кнопку Отправить той же формы у меня есть этот код и уже может изменить текст.

$('#select').change(function() {
  if ($(this).val() == 'A') {
    $("h1").css('background-color', 'white');
  }
  if ($(this).val() == 'B') {
    $("h1").css('background-color', 'red');
  }
  if ($(this).val() == 'C') {
    $("h1").css('background-color', 'yellow');
  }
  if ($(this).val() == 'D') {
    $("h1").css('background-color', 'green');
  }
});

$('#select1').change(function() {
  if ($(this).val() == 'A') {
    $("h1").css('color', 'white');
  }
  if ($(this).val() == 'B') {
    $("h1").css('color', 'red');
  }
  if ($(this).val() == 'C') {
    $("h1").css('color', 'yellow');
  }
  if ($(this).val() == 'D') {
    $("h1").css('color', 'green');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    H1 TEXT TO CHANGE
    </h1>
<h3>
    Background Text
    </h3>
<form method="POST">
  <select id="select">
    <option value="A">White</option>
    <option value="B">Red</option>
    <option value="C">Yellow</option>
    <option value="D">Green</option>
  </select>
  <h3>
    Color Text
    </h3>

  <select id="select1">
    <option value="A">White</option>
    <option value="B">Red</option>
    <option value="C">Yellow</option>
    <option value="D">Green</option>
  </select>
  <br>
  <br>

</form>

Когда я добавляю функцию, связанную с кнопкой Отправить, я получаю ошибку.

<button onclick="capture()">Change</button>

function capture(){
*Actual JS*
}

3 ответа

  1. Настройка формы с идентификатором для простоты:

    <form id="form-id">
    ...
      <input type="submit" value="submit">
    </form>
    

    jQuery:

    $('#form-id').submit(function (e) {
      e.preventDefault();
    
      $('body').css('background-color', 'red');
      // some more JS
    });
    

    VanillaJS:

    document.getElementById('form-id').addEventListener('submit', function (e) {
      e.preventDefault();
    
      document.body.style.backgroundColor = 'red';
      // some more JS
    });
    
  2. Добавьте это в функцию и ColorTextидентификатор в тег h3 😉

    function capture(){
      var e = document.getElementById("select");
      var strUser = e.options[e.selectedIndex].text;
      var e2 = document.getElementById("select1");
      var strUser2 = e2.options[e2.selectedIndex].text;
      document.body.style.backgroundColor=strUser;
      document.getElementById("ColorText").style.color=strUser2;
    
    }
    
  3. Поместите идентификатор на кнопку:

    <button id="submit">Change</button>
    

    И прослушиватель событий, где вы можете получить выбор и применить соответствующий css:

    $("#submit").click(function(event){
        // prevent the form from actually submitting
        event.preventDefault();
    
        var choices = {
            "A": "white",
            "B": "red",
            "C": "yellow",
            "D": "green"
        };
    
        var choiceBG = $("#select").val();
        $("h1").css('background-color', choices[choiceBG]);
    
        var choiceFG = $("#select1").val();
        $("h1").css('color', choices[choiceFG]);
    });