Question

我有一个html表单，根据选择从用户那里获取输入，jQuery根据选择显示/隐藏div标签。

在表单提交中，我正在调用一个未被调用的perl脚本。我想这是因为页面中使用了jquery。

的链接

HTML代码

<form method="post" action="submit.pl" id="submit-form" enctype="multipart/form-data">
        <p>
             <label for="select">Select:</label>
             <select name="select" required id="select" tabindex="1">
                <option value="1" class="Date" >Date</option>
                <option value="2" class="Week" selected> Week</option>
                <option value="3" class="Month"> Month</option>
                <option value="4" class="Range"> Between a range</option>
             </select> 

          <div id="Date" >
              <input name="select_date" type="date" class="hide" required  id="date"> </div>
          <div id="Week" >   
              <input name="select_week" type="week" class="hide" required id="week"> </div>
          <div id="Month" > 
              <input name="select_month" type="month" class="hide" required id="month"> </div>
          <div id="Range" >
              <input name="select_1stdate" type="date" class="hide" required min="2012-12-09" id="1stdate">
              <input name="select_2nddate" type="date" class="hide" required id="2nddate"> </div>
            </p>
            <div align="left">
              <input type="submit" />
            </div>
        </form></p>

JS

$(document).ready(function () {
            var $selections = $(".selection"),
                $selector = $('#select');
            $selector.change(function () {
                var selected = $(this).find('option:selected').attr('class');
                $selections.hide();
                $('#' + selected + '.selection').show();
            });
        });

我在脚本中做错了吗？我用jQ尝试了它，它似乎在调用perl脚本。

Answer 1

你的小提琴中有很多问题

更新CSS

.selection{ //earlier it was selection without any '.' as it is class selection
   display: none;
}

更新了JS

$(document).ready(function(){   
    $selector = $('#select');
    $selector.change(function() {
        var selected = $(this).find('option:selected').attr('class');
        $('.selection').find('input').each(function () {
            $(this).prop('required',false); // make all other input not required else you will not be able to submit the form
        });
        $('.selection').hide();
        $('#' + selected + '.selection').find('input').each(function () {
            $(this).prop('required',true); // make current input required
        });
       $('#' + selected + '.selection').show();
    });
});

更新了HTML

 // remove required from select
  <div id="Date" class="selection"> // added selection to div as your jquery selector is based on this
      <input name="select_date" type="date"  id="date" required> // move required to last as best practice
   </div>
  <div id="Week" class="selection" >   
      <input name="select_week" type="week" id="week" required> // remove class hide from the input
   </div>
      <div id="Month" class="selection" >   
      <input name="select_month" type="month" id="month" required> </div>
  <div id="Range" class="selection" >
      <input name="select_1stdate" type="date" min="2012-12-09" id="1stdate" required/>
          <input name="select_2nddate" type="date" class="hide" id="2nddate" required/> 
    </div>

检查http://jsfiddle.net/raunakkathuria/N9xxP/3/

使用jQuery表单提交问题

1 个答案: