jQuery elements not getting passed to perl cgi

Question

I have a html pg which has got two forms and upon submit its calling a perl script. But in the script cgi param is not getting any values.

Html code --

<fieldset class="col_4" name="BetweenRange"> <legend>Range Comparison</legend> 
<form action="call_range.pl" method="post" id="range1" target="Range1">
 <table width="100%" border="1">
  <tr>
    <td><input name="r1_1stdate" type="text"  id="from1" required/><input name="r1_2nddate" type="text"  id="to1" required/></td> 
</form>
<form action="call_range.pl" method="post" id="range2" target="Range2">    
    <td><input name="r2_1stdate" type="text" id="from2" required/><input name="r2_2nddate" type="text"  id="to2" required/></td>
  </tr></form>
  <tr>
  <td><iframe id="I3" align="left" name="Range1"  >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
   <td><iframe id="I4" align="left" name="Range2" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td> 
  </tr>
</table>
</fieldset>

Script goes here --

$(function() {
    $( "#from1" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
    $( "#to1" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to1" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
    $( "#from1" ).datepicker( "option", "maxDate", selectedDate );
      }
    }); 
     <!-- RangeComparison form submit , getting called after selecting 2nd date-->
     $("#to1").change(function() { this.form.submit(); });  });



  $(function() {
    $( "#from2" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
    $( "#to2" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to2" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
    $( "#from2" ).datepicker( "option", "maxDate", selectedDate ); 
      }
    });
     <!-- RangeComparison form submit , getting called after selecting 2nd date-->
     $("#to2").change(function() {
     this.form.submit(); });
  });

Perl code -- use strict; use CGI;

my $query = CGI->new;
print $query->header;

my $from1 = $query->param('from1'); 
my $to1 = $query->param('to1');

print "</br>Value passed for form1 $from1</br>$to1";
print $query->end_html;

Where is this going wrong ? I would appreciate if someone can help.

Link to JSFiddle http://jsfiddle.net/jDd5U/

Answer 1

1. You HTML is seriously invalid. You have forms where forms are not allowed. Browser error recovery is likely to break them as it tries to generate a valid DOM. Use a validator .
2. The name of a form control is used as the key in submitted data. You are trying to look it up by the id which isn't submitted.