无法将选定的值带到下一页

时间:2015-07-08 15:11:36

标签: javascript jquery html

这是我的jsp页面(脚本在头部,在体内形成):

<script>
        $(document).ready(function() {

            $('select').change(function(){
                var v = $(this).val();
                $('select option[value="'+$(this).data('old-val')+'"]').prop('disabled', false);
                $(this).data('old-val',v);
                if(v != "0"){
                    $('select option[value="'+v+'"]').not(this).prop('disabled',true);
                }
            });

            $('select').each(function(idx,select){   
                var stateArray = ["Preference No. "+(idx+1),"Bill","Sally","Leo","Mary"];
                $.each(stateArray, function(iIdx, iItem){  
                    $(select).append('<option value="'+iIdx+'">'+iItem+'</option>');
                });
            });   

            $( "#target" ).submit(function( event ) {

                alert( "Handler for .submit() called." );
                //check for minimum number of preferences. return false;
            });

        });

    </script>

<body>
    <form id="target" name="target" action="/Appointment/myServlet" method="get" >
        <select class="myClass" id="sel1" name="sel1" ></select>   
        <select class="myClass" id="sel2" name="sel2" ></select>
        <select class="myClass" id="sel3" name="sel3"></select>
        <input type="submit" class="button" name="Sign_button" value="Go"/>
    </form>  
</body>

我无法使用request.getParameter("sel1")将值传到下一页。它给出了null。知道怎么纠正这个吗?

1 个答案:

答案 0 :(得分:0)

出现问题的原因是您只是从所有三个选择元素中禁用了所选选项。

不会提交已停用的输入。 因此,您需要修改您的JS。

干杯。

编辑:如果您想查看代码的痕迹。这是:

Codepen Link

<style>
#debug1, #debug2{
  padding: 3px;
  margin: 3px;
  min-height: 10px;
  border: 1px solid black;
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {

  $('select').change(function(){
    var v = $(this).val();
    $('select option[value="'+$(this).data('old-val')+'"]').prop('disabled', false);
    $(this).data('old-val',v);
    if(v != "0"){
      $('select option[value="'+v+'"]').not(this).prop('disabled',true);
    }
  });

  $('select').each(function(idx,select){   
    var stateArray = ["Preference No. "+(idx+1),"Bill","Sally","Leo","Mary"];
    $.each(stateArray, function(iIdx, iItem){  
      $(select).append('<option value="'+iIdx+'">'+iItem+'</option>');
    });
  });   

  $( "#target" ).submit(function( event ) {

    // alert( "Handler for .submit() called." );
    //check for minimum number of preferences. return false;
    $("#debug1").text('');
    $("#debug2").text('');
    $("#debug1").text($(this).html());
    $("#debug2").text(JSON.stringify($(this).serializeArray()));

    event.preventDefault();
  });

});
</script>
<body>
    <form id="target" name="target" action="/Appointment/myServlet" method="POST" >
        <select class="myClass" id="sel1" name="sel1" ></select>   
        <select class="myClass" id="sel2" name="sel2" ></select>
        <select class="myClass" id="sel3" name="sel3"></select>
        <input type="submit" class="button" name="Sign_button" value="Go"/>
    </form>
</body>

<h3>Form Html on Clicking Go Button</h3>
<p id="debug1"></p>

<h3>Form Data on Clicking Go Button</h3>
<p id="debug2"></p>