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>

成功提交后更改输入文本的背景色

1 个答案: