按钮文字不变

时间:2016-10-06 08:51:19

标签: jquery html jsp

在我的JSP表单页面中,我想要做的是填写表单时更改文本按钮。 这是html代码

      <form:form id="requestForm"  method="get" name="myForm" modelAttribute="quickstartbean"  ACTION="${pageContext.request.contextPath}/quickstart/questions">

      <form:input type="text"  path="fName" value="${quickstartbean.fName}" id="fname" name="fname"   />

      <input type="submit" value="Skip and Continue" id="save_btn" style="background-color:  #98FB98;"></input> 
</form:form>

这是我的javascript

(function() {
                    $('form>input').keyup(function() {

                        var empty = false;
                        $('form>input').each(function() {
                            if ($(this).val() == '') {
                                empty = true;
                            }
                        });

                        if (empty) {
                            $('#save_btn').attr('value', 'Skip and Continue"  />');
                        } else {
                            $('#save_btn').attr('value','Save and Continue"  />');
                        }
                    });
                })() 

但填充文本字段后按钮的值不会改变

1 个答案:

答案 0 :(得分:1)

在div标签中添加一个类

 <form:form id="requestForm"  method="get" name="myForm" modelAttribute="quickstartbean"  ACTION="${pageContext.request.contextPath}/quickstart/questions">

<div class="textbox">
          <form:input type="text"  path="fName" value="${quickstartbean.fName}" id="fname" name="fname"   />
</div>

          <input type="submit" value="Skip and Continue" id="save_btn" style="background-color:  #98FB98;"></input> 
    </form:form>

jquery代码

 (function() {
                    $('.textbox').keyup(function() {

                        var empty = false;
                        $('textbox').each(function() {
                            if ($(this).val() == '') {
                                empty = true;
                            }
                        });

                        if (empty) {
                            $('#save_btn').attr('value', 'Skip and Continue');
                        } else {
                            $('#save_btn').attr('value','Save and Continue');
                        }
                    });
                })() 

IT现在可以使用