Изменить цвет фона входного текста после успешной отправки

Question

Я хочу изменить фон ввода текста имени и почты на желтый (по умолчанию: белый), содержимое кнопки «Отправлено».И отключить кнопку.Все они в форме.Я пишу в JSP и хочу изменить фон с помощью CSS.

<form action="/FashionBlog/ContactController" class="blockForm">
                    <!--display name and mail--> 
                    <div class="mainForm">
                        <div id="nameAndMail">
                            <div id="name">
                                <input id="myName" class="fontArial inputText" type="text" name="txtName" value="${name}" placeholder="Write name here"/>
                            </div>
                            &nbsp;&nbsp;
                            <div id="mail">
                                <input class="fontArial inputText" type="text" name="txtMail" value="${mail}" placeholder="Write mail here"/>
                            </div>
                        </div>
                        <!--display text are of message-->
                        <div id="meassageArea">
                            <textarea class="areaText fontArial" name="txtArea" placeholder="Write message here">${mess}</textarea>
                        </div>
                        <!--display button confirm send--> 
                        <div id="btnSend">
                            <input class="fontArial btnSendRadius" type="submit" value="Send - Click here"/>
                        </div>
                    </div>
                </form>

Answer 1

Вы можете использовать Javascript для этого, когда форма submitted, вы можете изменить цвет кнопок inputs и disable. Как показано ниже:

   
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
         var inputVal1 = document.getElementById("myName");
         var inputVal2 = document.getElementById("mail1");
          var inputVal3 = document.getElementById("mge");
         inputVal1.style.backgroundColor = "yellow";
         inputVal2.style.backgroundColor = "yellow";
          inputVal3.style.backgroundColor = "yellow";
    }  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/FashionBlog/ContactController" class="blockForm" onsubmit='disableButton()'>
  <!--display name and mail-->
  <div class="mainForm">
    <div id="nameAndMail">
      <div id="name">
        <input id="myName" class="fontArial inputText" type="text" name="txtName" value="${name}" placeholder="Write name here" />
      </div>
      &nbsp;&nbsp;
      <div id="mail">
        <input id="mail1" class="fontArial inputText" type="text" name="txtMail" value="${mail}" placeholder="Write mail here" />
      </div>
    </div>
    <!--display text are of message-->
    <div id="meassageArea">
      <textarea id="mge"class="areaText fontArial" name="txtArea" placeholder="Write message here">${mess}</textarea>
    </div>
    <!--display button confirm send-->
    <div id="btnSend">
      <input class="fontArial btnSendRadius" id="btn" type="submit" value="Send - Click here" />
    </div>
  </div>
</form>