Form submission trouble with jQuery

Question

I have a html form which takes input from user based on selection, a jQuery show/hide the div tags based on selection.

In the form submission I am calling a perl script which is not getting called. I guess it is because of the jquery used in the page.

Here is the link to the JSFiddle page

HTML Code

<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();
            });
        });

Am I doing something wrong in the script ? I tried it with out the jQ and it seems to be calling the perl script.

Answer 1

There are lot of issues in your fiddle

Update CSS

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

Updated 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();
    });
});

Updated 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>

Check http://jsfiddle.net/raunakkathuria/N9xxP/3/