3

I have an HTML form that posts to a PHP script. Everything is working except the checkbox. When it is checked, the value is not being posted.

HTML:

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

PHP:

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

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

When this code runs, $eventRepeat always comes out as "No." I tried using the command "print_r($_POST)" and all inputs are posted except the checkbox, even when it is checked.

Any ideas what could cause this? I do have jQuery running so when it is checked two divs appear. Could that somehow be interfering? Here's the jQuery:

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

For reference, here is the full code:

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

I get this from 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"
}
Jacob
  • 81
  • 1
  • 5
  • 1
    Paste in the form and the js code – ka_lin May 26 '14 at 16:34
  • Are you 100% positive that the checkbox is placed within the context of the `
    ` element? It would help to see your HTML.     – Giacomo1968 May 26 '14 at 16:35
  • The code under the – ka_lin May 26 '14 at 16:37
  • @JakeGould - yes. There are fields before and after the checkbox being posted successfully. – Jacob May 26 '14 at 16:38
  • @KA_lin - I'm not sure I understand. The – Jacob May 26 '14 at 16:40
  • And if you put a var_dump($_POST); at the beginning of the form you don`t see the 'test' key after the submit? – ka_lin May 26 '14 at 16:42
  • THat's correct. I'll add what I get to the post right now. – Jacob May 26 '14 at 16:44
  • 2
    I'd sugguest validating your code real quick before continuing. There are several duplicate ID's, your divs aren't closed, and while browsers support it, you should not have an empty action attribute for your form. (Use `?`) – David Bradbury May 26 '14 at 16:44
  • @Conexion - all DIVs are closed, I just posted the form part of the HTML to keep the post a bit shorter. I'll check the duplicate IDs, do you think that could cause the issue? – Jacob May 26 '14 at 16:49
  • @user2521738: I tested it and after checking the box I got the key 'test' – ka_lin May 26 '14 at 16:52
  • @Conexion - there were 4 duplicate IDs - all were posting though. Fixed though, thanks! :) – Jacob May 26 '14 at 16:53
  • Also read this (http://stackoverflow.com/questions/8318428/submit-form-fields-inside-displaynone-element) else you won`t be able to post fields having 'display:none' – ka_lin May 26 '14 at 16:54
  • At the very bottom of your form, before your form closing tag, your `div.modal-footer` isn't closed. It's important to make sure that your HTML is valid before going on to seeing what the issue might be, as lots of small things can cause different unexpected problems. :) – David Bradbury May 26 '14 at 16:56
  • @KA_lin I tried again to be sure, and I am not getting the key. The fields in the display:none is posting fine - maybe that applies when the input is set to display:none, not the surrounding div? – Jacob May 26 '14 at 16:57
  • @Conexion - I didn't post the line after that, but it is closed. Thanks! – Jacob May 26 '14 at 16:58
  • Are you sure that there are no more events binded to the checkbox? I have stripped the jQuery code and everything works fine – ka_lin May 26 '14 at 17:03
  • @Jacob If you're closing the tag outside the form, you have malformed HTML. You can't do `
    `.
     – David Bradbury May 27 '14 at 16:31

1 Answers1

0

Very unclear why this would not work. But I noticed inconsistencies & imbalance in the HTML tags as well as an empty action="" which is not HTML5 valid. For more details, see this great answer over here.

So I have set it to #. You might want to actually change that to the full filename or path to the PHP script such as action="form.php". Or you could leave it out altogether like this:

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

But I prefer to be explicit & recommend the action="form.php" way of handling things. Here is your cleaned up HTML form:

<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>
Community
  • 1
  • 1
Giacomo1968
  • 25,759
  • 11
  • 71
  • 103