为什么这个表格没有提交?

时间:2013-10-07 09:52:30

标签: html responsive-design

我正在尝试使用twitter bootstrap开发一个响应式表单,但它没有提交。

为什么不提交?

<!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Generate Reports</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/datepicker.css">

    <script src='js/bootstrap-datepicker.js'></script>
    <script src='js/bootstrap.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
     <script>

    $(document).ready(function() {
        $('#report_repetitions').change(function() {


    var number_of_repetitions=$('#report_repetitions').val();
            var container = $('#date_list');
            var numItems = $('.date_group').length;alert(numItems);
            if(number_of_repetitions>numItems)
            {
            for(var i=numItems+1;i<=number_of_repetitions;i++)
                $('<div class="well"> <div class="date_group" id="group_'+i+'" > <div class="control-group" > <label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text '+i+'<span class="required">*</span></label><div class="controls"><input class="span3" size="5" name="text_'+i+'" maxlength="5" name="Step1[home_zip]" id="report_repetitions" type="text" /></div></div>'
                    +'<div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label><div class="controls "><div id="from'+i+'" class="input-append date "><input type="text" name="from_'+i+'" ></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="control-group"   ><label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label><div class="controls "><div id="to'+i+'" class="input-append date "><input type="text" name="to_'+i+'"></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div></div></div>'
                     +'<script type="text/javascript">'
                      +'$(function() {'
                      +'  $("#from'+i+'").datetimepicker({'
                       +'   pickTime: false'
                       +' });'
                        +'$("#to'+i+'").datetimepicker({'
                        +' pickTime: false'
                        +'});});<'
                        +'/script>').click(function () { 
                    window.open(path);
                }).appendTo(container);
    }    



        else if(number_of_repetitions<numItems)
        {
        alert("kkk");alert(number_of_repetitions);alert(numItems);
        for(var i=number_of_repetitions;i<=numItems;i++)
        {     alert(i);
                ('#group_2').remove();
                }
        }
                else
                alert("hhh");
    });


    });


    </script>
 </head>
 <body>

<div class="container">


    <div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <center><h2>Generate Report</h2></center>
    </div>
    <div class="span4 pull-right">&nbsp;</div>
  </div>
  <div class="row-fluid">
    <form class="well span12">
    <center>
       <div class="row-fluid">
      <div class="span12">
        <form class="form-horizontal" id="report_form" action="insert.php" method="post">
         <div id="report_group"> 
          <div class="control-group">
             <label class="control-label required span5" for="Step1_email">Improvement Threshold<span class="required">*</span></label>
            <div class="controls">
              <input class="span4" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
            </div>
           </div>

          <div class="control-group">
            <label class="control-label required span5" for="Step1_home_zip">Services Top Threshold <span class="required">*</span></label>
            <div class="controls">
              <input class="span4" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
            </div>
          </div>

          <div id="date_list">
              <div class="well">  
                <div class="date_group"  id="group_1" >

                <div class="control-group" id="date_group">
                    <label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text 1<span class="required">*</span></label>
                    <div class="controls">
                      <input class="span3" size="5" maxlength="5" name="text_1" id="report_repetitions" type="text" />
                    </div>
                </div>
                <div class="control-group" >
                    <label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label>
                    <div class="controls ">
                        <div id="from1" class="input-append date ">
                            <input type="text" name="from_1" ></input>
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="control-group"   >
                    <label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label>
                    <div class="controls ">
                        <div id="to1" class="input-append date ">
                            <input type="text" name="to_1"></input>
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div> </div>   
              </div>
            </div>




        <div class="pull">
          <button type="submit" class="btn btn-primary">Submit</button>
          <input type="reset" class="btn" value="Reset"> 
        </div>
       </div> 
        </form>



    </div>
    </center>
  </div>

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


 </div> 
     <script type="text/javascript">
  $(function() {
    $("#from1").datetimepicker({
      pickTime: false
    });
    $("#to1").datetimepicker({
      pickTime: false
    });
  });
</script>
 </body>
</html>

insert.php也在同一个文件夹中 但它没有转移到insert.php

4 个答案:

答案 0 :(得分:1)

您有嵌套表单。这是无效的,也是问题的原因。

删除额外的表格。使用a validator

答案 1 :(得分:0)

您有嵌套表单,这是无效的语法。

<form class="well span12">

这应该是div而不是

答案 2 :(得分:0)

<input type="submit" name="submit" value="Submit"> 

你能试试吗

答案 3 :(得分:-2)

替换

<button type="submit" class="btn btn-primary">Submit</button>

<input type="submit" class="btn btn-primary" value="Submit" />