Click here to Skip to main content
15,354,956 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I thought I had this working but for some reason it's not POSTing the form from Checkbox.html to table.php. I figured it out when I added isset around the POST and it's not getting into the isset if statement. I had been getting an undefined index without isset. I need the whole checkbox form in table.php so I can get what I need from what will be a really long checkBox list.

When I run this, I start in table.php then press a button and it goes to checkbox.html. I check some boxes and press the submit button and it's supposed to send the form back to table.php.

This is checkbox.html:

JavaScript
<!DOCTYPE html>
<!--

I am child window.
-->
<html>
    
    <head>
        <title>jQuery Michele Project</title>
        <link href="css/skins/polaris/polaris.css" rel="stylesheet">
        <link href="css/skins/all.css" rel="stylesheet">
        <link href="css/demo/css/custom.css" rel="stylesheet">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script src="js/icheck.js"></script>
                
        <script type="text/javascript">
            $(document).ready(function(){
                $('.input').iCheck({
                    checkboxClass:'icheckbox_polaris',
                    radioClass:'iradio_polaris',
                    increaseArea:'10%'
                });
            });
        </script>
    
        <style type="text/css">
            ul {list-style-type: none}
            img {padding-right: 20px; float:left}
            #infolist {width:500px}
        </style>
    </head>
    <body>
//************************************form***********
    <form id="myCheckboxForm" name="wholeForm" action="table.php" method="POST">
    <div class="skin skin-line">
        <div class="arrows">
          <div class="top" data-to="skin-flat"></div>
          <div class="bottom" data-to="skin-polaris"></div>
        </div>

      </div>
      <div class="skin skin-polaris">
        <div class="arrows">
          <div class="top" data-to="skin-line"></div>
          <div class="bottom" data-to="skin-futurico"></div>
        </div>
        <h3>Select Items for Column Headings</h3>
        <dl class="clear">
          <dd class="selected">
            <div class="skin-section">
              <h4>Live</h4>
              <ul class="list">
              
                <li>
                  <input tabindex="21" type="checkbox" name="ckboxList[]" id="Ckbox1">
                  <label for="polaris-checkbox-1">Checkbox 1</label>
                </li>
                <li>
                  <input tabindex="22" type="checkbox" name="ckboxList[]" id="Ckbox2" checked>
                  <label for="polaris-checkbox-2">Checkbox 2</label>
                </li>
                <li>
                  <input type="checkbox" name="ckboxList[]" id="Ckbox3" >
                  <label for="polaris-checkbox-3">Checkbox 3</label>
                </li>
                <li>
                  <input type="checkbox" name="ckboxList[]" id="Ckbox4" checked >
                  <label for="polaris-checkbox-4">Checkbox 4</label>
                </li>
                
            </div>
            
            <script>
            $(document).ready(function(){
              $('.skin-polaris input').iCheck({
                checkboxClass: 'icheckbox_polaris',
                radioClass: 'iradio_polaris',
                increaseArea: '20%'
              });
            });
            </script>
                     
          </dd>

        </dl>
        
      </div>
     
      <div>
//******submit button*******************************************
          <input type="submit" class="but" name="submit" id="submit" value="Update Table">   

      </div>
   
    </form>

    </body>
</html>


This is from table.php:

JavaScript
<body>
    <div class="form">
        <p>
            <label>CheckboxList: Happy Friday 
//***************post*******looks like myCheckboxForm is empty**************
                <?php
                    if (isset ($_POST["myCheckboxForm"])) { //also tried wholeForm here
                         
                       $theFrm = ($_POST["myCheckboxForm"]); //also tried wholeForm here
                       alert("form:" + $theFrm); //this doesn't get hit 
                    }
                 ?>
                <script> getSelectedChbox($theFrm); </script>
            </label>
        </p>
    </div>
<table id="tableone" border="1">
    <thead>
    	<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
    </thead>
    <tr class="del">
        <td contenteditable="false">Row 0 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 0 Column 1</td>
        <td contenteditable="false">Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td contenteditable="false">Row 1 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 1 Column 1</td>
        <td contenteditable="false">Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td contenteditable="false">Row 2 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 2 Column 1</td>
        <td contenteditable="false">Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td contenteditable="false">Row 3 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 3 Column 1</td>
        <td contenteditable="false">Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td contenteditable="false">Row 4 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 4 Column 1</td>
        <td contenteditable="false">Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td contenteditable="false">Row 5 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 5 Column 1</td>
        <td contenteditable="false">Row 5 Column 2</td>
    </tr>
</table>
    <input id="btnHide" type="button" value="Hide Column 2"/>
    <input id="chgColumns" type="button" value="Change Columns Displayed"
            önclick="return btn_changeColumns_onClick()" />
</body>


Helpful links I've been looking at are:

Beginner's Guide to HTML5 & CSS3 - Formidable Forms with HTML5[^]

Beginner's Guide to HTML5 & CSS3 - Server Side Story[^]

http://coursesweb.net/javascript/get-value-selected-checkboxes_cs[^]
Posted
Updated 30-May-14 5:32am
v2

1 solution

You code will not work, you are moving too fast with too much information but fails to understand them, you should slow down, do simple exercises to understand each topic before you move on to the next one. I saw that you have mixed up alert which is a javascript command with php. put aside javascript for the time being, do one thing at a time.
I will show you one example of passing checkbox value from checkbox.html to table.php.

checkbox.html page, compare this with your html file on the checkboxes and labels part to discover your mistakes:
XML
<!DOCTYPE html>
<html>
<body>
<form id="myCheckboxForm" name="wholeForm" action="table.php" method="post">

<ul class="list">
    <li>
        <input type="checkbox" name="ckboxList[]" id="Ckbox1" value="checkbox1">
        <label for="Ckbox1">Checkbox 1</label>
    </li>

    <li>
        <input type="checkbox" name="ckboxList[]" id="Ckbox2" checked value="checkbox2">
        <label for="Ckbox2">Checkbox 2</label>
    </li>

    <li>
        <input type="checkbox" name="ckboxList[]" id="Ckbox3" value="checkbox3">
        <label for="Ckbox3">Checkbox 3</label>
    </li>

    <li>
        <input type="checkbox" name="ckboxList[]" id="Ckbox4" checked value="checkbox4">
        <label for="Ckbox4">Checkbox 4</label>
    </li>
</ul>
    <input type="submit" class="but" name="submit" id="submit" value="Update Table">

</form>
</body>
</html>


table.php page:
XML
<!DOCTYPE html>
<html>
<body>
<table>
<?php

if (isset($_POST['ckboxList'])) {

    $array = $_POST['ckboxList'];

    foreach ($array as $value) {
        echo "<tr><td>$value</td></tr>";
    }

}
?>
</table>
</body>
</html>

Save these 2 files in a folder and start with the checkbox.html and see the result.
My article on the server side story is just a bridging introduction, As I mentioned in the article, you should visit PHP 5 Tutorial[^] for in-dept learning of PHP scripting.
   
v5
Comments
MichCl 30-May-14 13:40pm
   
Thank you. Can't I send the entire form over? I used to have ckboxList in table.php but decided to switch back to the entire form so I can utilize my method that parses the data I need out of the form. The ckboxList only has what's checked and I need more than "on". That's why I decided to go back to the form. I had figured out how to use ckboxList from your links that you gave me but form would be better.
MichCl 2-Jun-14 9:49am
   
I know PHP already. I'm learning javaScript, JQuery, and HTML5. Plus there's nothing wrong with putting them all together. It's just that the html document becomes a php file once I add php to it. The class I took in a college definitely mixed HTML and PHP, plus xml too. This is my project and I have an assignment I have to do. Removing things I've already written code for doesn't make sense.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900