Question

我需要添加3个事件。

隐藏页面加载时的字段。
隐藏基于radiobutton值的字段
在用户点击提交按钮

但是，当我添加代码时，提交将停止工作。但是，当我删除上面提到的第1点和第2点的jquery处理时，提交工作正常。如果有任何错误，请检查并告诉我。非常感谢您的帮助。

HTML代码：

<form action="/BGPAsService/port/save" method="post" id="portform" >
                <fieldset class="form">

<div  id="port_rule" class="fieldcontain  required">
    <label for="portRule">
        Port Rule
        <span class="required-indicator">*</span>
    </label>
    <input type="text" id="portrulevalue" name="portRule" maxlength="80" required="" value="" />

</div>

<div id="portradio" class="fieldcontain required">
    <label for="PortOption">
        Port Option
        <span class="required-indicator">*</span>
    </label>

     <input type="radio" name="PortOption" value="value" class="fieldcontain" id="portradiovalue" />Port Value&nbsp;


     <input type="radio" name="PortOption" value="range" class="fieldcontain" id="portradiovalue" />Port Range&nbsp;


</div>

<div id="start_port" class="fieldcontain required">
    <label for="portStart">
        Port Start
        <span class="required-indicator">*</span>
    </label>
    <input type="text" name="portStart" maxlength="5" required="" value="" id="portStart" />

</div>

<div id="end_port" class="fieldcontain required">
    <label for="portEnd">
        Port End
        <span class="required-indicator">*</span>
    </label>
    <input type="text" name="portEnd" maxlength="5" required="" value="" id="portEnd" />

</div>
</fieldset></form>

Jquery代码：

           $(document).ready(function(){
                $("#port_rule").hide();

                 $('#portradio').on('click',function(e) {
                   if ($(':radio[name= "PortOption"]:checked').val() == 'value') {
                       $("#end_port").hide();
                   }else{
                       $("#end_port").show();
                   } 
               });

                $('#portform').on ('submit', function(event) {
                    alert("test");
                    var portrule = "";

                    if ($(':radio[name= "PortOption"]:checked').val() == 'value'){
                        portrule = portrule.concat('=');
                        portrule = portrule.concat($('input:text[name= "portStart"]').val());
                    }
                    else
                    {
                        portrule = portrule.concat('>=');
                        portrule = portrule.concat($('input:text[name= "portStart"]').val());
                        portrule = portrule.concat('&<=');
                        portrule = portrule.concat($('input:text[name= "portEnd"]').val());
                    }

                    document.getElementById("portrulevalue").value = portrule;

                });

           });

Answer 1

名为portRule的隐藏字段在HTML中标记为required，因此浏览器在运行JS代码之前尝试验证它。当它在提交时没有找到值时，它会尝试关注它 - 但不能，因为它是隐藏的。然后抛出JavaScript错误，代码停止工作。

不要求该字段：

<input type="text" id="portrulevalue" name="portRule" maxlength="80" value="" />

或者在更改相关表单字段时运行代码，而不是在提交表单时运行代码：

$('[name="PortOption"],[name="portStart"],[name="portEnd"]').on('change', function (event) { var portrule = ""; // etc.

http://jsfiddle.net/mblase75/LxqH7/

处理JQuery中的多个事件不起作用，提交事件挂起

1 个答案: