选中的复选框不起作用？

时间：2014-05-26 16:33:14

标签： php jquery html checkbox

我有一个发布到PHP脚本的HTML表单。除了复选框，一切正常。选中后，该值不会被过帐。

HTML： 

<input name="test" id="checkbox-02" type="checkbox" value="1" />

PHP： 

if(!isset($_POST['test'])) {
  $eventRepeat="No";
}

if(isset($_POST['test'])) {
  $eventRepeat="Yes";
}

当此代码运行时，$ eventRepeat始终显示为“No”我尝试使用命令“print_r（$ _ POST）”并且所有输入都被发布，除了复选框，即使已经选中。

任何可能导致此问题的想法？我确实运行了jQuery，因此在检查时会出现两个div。这可能会以某种方式干扰吗？这是jQuery：

$(document).ready(function () {
$('#checkbox-02').change(function () {
    if (!this.checked) 
    //  ^
       $('#repeatUntilDIV').fadeIn('slow');
       $('#repeatFrequencyDIV').fadeIn('slow');
});
});

供参考，以下是完整代码：

           <form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="" method="post">
        <div class="form-group">
            <label for="inputEventTitle" class="col-lg-2 control-label">Event Title</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" id="inputEventTitle" name="inputEventTitle" placeholder="Event Title" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEventDescription" class="col-lg-2 control-label">Description</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" id="inputEventTitle" name="inputEventDescription" placeholder="Event Description" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEventStartTime" class="col-lg-2 control-label">Start Time</label>
            <div class="col-lg-10">
              <select name="inputEventStartTime" class="form-control" id="dp1" required>
                <option label="Start Time">
                <option value="12:00AM">12:00AM</option>
                <option value="12:15AM">12:15AM</option>
                <option value="12:30AM">12:30AM</option>
                <option value="12:45AM">12:45AM</option>
                <option value="1:00AM">1:00AM</option>
              </select>
          </div>
        </div>  
        <div class="form-group">
            <label for="inputEventEndTime" class="col-lg-2 control-label">End Time</label>
            <div class="col-lg-10">
              <select name="inputEventEndTime" class="form-control" id="dp1" required>
                <option label="End Time">
                <option value="1:00AM">1:00AM</option>
                <option value="1:15AM">1:15AM</option>
                <option value="1:30AM">1:30AM</option>
                <option value="1:45AM">1:45AM</option>
                <option value="2:00AM">2:00AM</option>
              </select>                </div>
        </div>                      
        <div class="form-group">
          <label class="control-label col-sm-2">Date</label>
          <div class="col-sm-6">
            <input id="dp1" name="inputEventDate" type="text" size="16" class="form-control" required>
          </div>
        </div>
         <div class="form-group">
            <label for="inputEventDate" class="col-lg-2 control-label">Repeat?</label>
            <div class="col-lg-10 checkboxes">
              <label class="label_check" for="checkbox-02"> </label>
              <input name="test" id="checkbox-02" type="checkbox" value="1" /> Yes, I want to repeat this event.
            </div>
        </div>
         <div class="form-group" id="repeatUntilDIV" style="display:none;">
            <label for="inputEventEndDate" class="col-lg-2 control-label">Repeat Until</label>
            <div class="col-lg-10">
              <input name="inputEventEndDate" id="eventEndDate" type="text" placeholder="End Date" class="form-control">                                            
            </div>
        </div>  
         <div class="form-group" id="repeatFrequencyDIV" style="display:none;">
            <label for="inputEventFrequency" class="col-lg-2 control-label">Repeat Every</label>
            <div class="col-lg-10">
             <select name="inputEventFrequency" class="form-control" id="dp1">
                <option label="Repeat Every">
                <option value="1">Repeat Every Day</option>
                <option value="2">Repeat Every Other Day</option>
                <option value="7">Repeat Every Week</option>
                <option value="14">Repeat Every Other Week</option>
                <option value="30">Repeat Every Month</option>
              </select>

            </div>
        </div>                          
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
    <input type="submit" name="addPrimaryEvent" class="btn btn-success" value="Submit" />
       </form>

我从var_dump（$ _ POST）得到这个：

  array(8) {
  ["inputEventTitle"]=>
  string(5) "Title"
  ["inputEventDescription"]=>
  string(11) "Description"
  ["inputEventStartTime"]=>
  string(6) "2:00AM"
  ["inputEventEndTime"]=>
  string(6) "3:00AM"
  ["inputEventDate"]=>
  string(10) "05-26-2014"
  ["inputEventEndDate"]=>
  string(10) "05-29-2014"
  ["inputEventFrequency"]=>
  string(1) "1"
  ["addPrimaryEvent"]=>
  string(6) "Submit"
}

1 个答案:

答案 0 :(得分：0)

很不清楚为什么这不起作用。但是我发现了不一致的情况。 HTML标记中的不平衡以及不是HTML5有效的空action=""。有关详细信息，请参阅t his great answer over here。

所以我把它设置为#。您可能希望将其实际更改为PHP脚本的完整文件名或路径，例如action="form.php"。或者你可以像这样完全抛弃它：

<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="#" method="post">

但我更喜欢明确而且推荐action="form.php"处理事物的方式。这是您清理过的HTML表单：

<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="#" method="post">
    <div class="form-group">
        <label for="inputEventTitle" class="col-lg-2 control-label">Event Title</label>

        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputEventTitle" name="inputEventTitle" placeholder="Event Title" required="" />
        </div>
    </div>

    <div class="form-group">
        <label for="inputEventDescription" class="col-lg-2 control-label">Description</label>

        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputEventTitle" name="inputEventDescription" placeholder="Event Description" required="" />
        </div>
    </div>

    <div class="form-group">
        <label for="inputEventStartTime" class="col-lg-2 control-label">Start Time</label>

        <div class="col-lg-10">
            <select name="inputEventStartTime" class="form-control" id="dp1" required="">
                <option value="12:00AM">
                    12:00AM
                </option>

                <option value="12:15AM">
                    12:15AM
                </option>

                <option value="12:30AM">
                    12:30AM
                </option>

                <option value="12:45AM">
                    12:45AM
                </option>

                <option value="1:00AM">
                    1:00AM
                </option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="inputEventEndTime" class="col-lg-2 control-label">End Time</label>

        <div class="col-lg-10">
            <select name="inputEventEndTime" class="form-control" id="dp1" required="">
                <option value="1:00AM">
                    1:00AM
                </option>

                <option value="1:15AM">
                    1:15AM
                </option>

                <option value="1:30AM">
                    1:30AM
                </option>

                <option value="1:45AM">
                    1:45AM
                </option>

                <option value="2:00AM">
                    2:00AM
                </option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2">Date</label>

        <div class="col-sm-6">
            <input id="dp1" name="inputEventDate" type="text" size="16" class="form-control" required="" />
        </div>
    </div>

    <div class="form-group">
        <label for="inputEventDate" class="col-lg-2 control-label">Repeat?</label>

        <div class="col-lg-10 checkboxes">
            <input name="test" id="checkbox-02" type="checkbox" value="1" /> Yes, I want to repeat this event.
        </div>
    </div>

    <div class="form-group" id="repeatUntilDIV" style="display:none;">
        <label for="inputEventEndDate" class="col-lg-2 control-label">Repeat Until</label>

        <div class="col-lg-10">
            <input name="inputEventEndDate" id="eventEndDate" type="text" placeholder="End Date" class="form-control" />
        </div>
    </div>

    <div class="form-group" id="repeatFrequencyDIV" style="display:none;">
        <label for="inputEventFrequency" class="col-lg-2 control-label">Repeat Every</label>

        <div class="col-lg-10">
            <select name="inputEventFrequency" class="form-control" id="dp1">
                <option value="1">
                    Repeat Every Day
                </option>

                <option value="2">
                    Repeat Every Other Day
                </option>

                <option value="7">
                    Repeat Every Week
                </option>

                <option value="14">
                    Repeat Every Other Week
                </option>

                <option value="30">
                    Repeat Every Month
                </option>
            </select>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> <input type="submit" name="addPrimaryEvent" class="btn btn-success" value="Submit" />
    </div>
</form>
相关问题
最新问题