无法根据表单提交前选择的下拉值启用/禁用按钮

时间:2018-03-19 06:33:37

标签: jquery jsp

如果我从下拉列表中选择“系统”,我想启用“更新”按钮,如果我从下拉列表中选择其他值,则应禁用此按钮。默认情况下,“更新”按钮应该被禁用。当我从下拉列表中选择“系统”以外的值时,应该禁用该按钮。

DataSync.jsp


<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="Css/motoCSS.css" rel="stylesheet" type="text/css" />
<link href="Css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-Frame-Options" content="deny">
<meta http auto-config="false" disable-url-rewriting="true">
<script type="text/javascript">
function getProjectDetails()
{  
    alert('inside getProjectDetails()') 
    window.open(document.dataSyncForm.action="ProjectDetails.jsp","mywindow","menubar=0,resizable=1,scrollbars=1,width=500,height=400");
}

</script>
    </head>

    <body>
    <s:form name="dataSyncForm" action="dataSyncUpload" method="post" enctype="multipart/form-data" theme="simple" >
        <div style="margin-left:45%;margin-top:10%;"><h4>Data Sync</h4></div>
        <div style="margin-left:40%;margin-top:5%">
            <div>
            <span style="display:inline"><s:text name="Data table"/></span>
            <span>
                <select name="dataTable" onchange="if (this.value==''||this.value=='Warranty'||this.value=='AMC'||this.value=='PriceList') this.form.Update.style.display='none';">
                    <option value="">Select</option>
                    <option value="Warranty">Warranty</option>
                    <option value="AMC">AMC</option>
                    <option value="System">System</option>
                    <option value="PriceList">Price list</option>
                </select>
            </span>

            </div>
            <div>&nbsp</div>
            <div>
                <span style="display:inline"><s:text name="Upload file"/></span>
                <span><s:file name="dataFile" label="Select file" size="40" /></span>
            </div>
            <div>&nbsp</div>
            <div>
                <input type="button" class="btn" id="btnUpdate" name="Update" value="Update" style="display:inline" onclick="javascript:getProjectDetails();">
                <input type="submit" class="btn" value="Upload" style="display:inline">
                <input type="button" class="btn" value="Cancel" style="display:inline"> 
            </div>

        </div>

    </s:form>

    </body>
     <HEAD>

</HEAD>
</html>

2 个答案:

答案 0 :(得分:0)

你可以用这个:

$('select').change(function () {
   if (this.value === 'System') {
      $('#btnUpdate').attr('disabled', false);
   } else {
      $('#btnUpdate').attr('disabled', true);  
   }
});

要将Update按钮设置为默认设置,您可以将以下语句放入ready的{​​{1}}中:

document

希望这可以帮助您解决问题。

答案 1 :(得分:-1)

试试这段代码。

function getComboA(selectObject) {
    var value = selectObject.value;  
    if(value == "System")
    {
    document.getElementsByTagName('Update').style.display='inline';
    }
}

您的HTML

<select name="dataTable" onchange="getComboA(this)">

<input type="button" class="btn" id="btnUpdate" name="Update" value="Update" style="display:none" onclick="javascript:getProjectDetails();">

默认情况下,“更新”按钮为display:none,选择onChange将为display:inline

同时显示:none和disable是不同的东西。禁用将在视图页面上显示按钮,但用户将无法在显示时单击它:none将隐藏页面上的按钮。