How post form from html to php

Question

I'm trying to POST the form from Checkbox.html to table.php. I need the whole checkbox form in table.php so I can get what I need (labels) from what will be a really long checkBox list. I have a method that I know will parse just the labels out of an entire form.

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 checkbox3.html:

<!DOCTYPE html>
<!-- -->
<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>

//***The next 2 script sections are the new AJAX part. I'm not seeing alerts anymore*****
     <script type="text/javascript">
        $(document).ready(function(){

            $('#submit').on('click', function() {
                var serialized = $('input:checkbox').map(function() {
                    return {id: this.id, value: this.checked ? this.id : "false"};
                });
                console.log(serialized);
                alert(JSON.stringify(serialized));
            });
            $.ajax({
                url: "tableReduced.php",
                type: "POST",
                dataType:"json",
                data: serialized,   // send above data here
                success: function(msg) {
                    alert("Form Submitted: " + msg);
                        return msg;
                },
                error: function() {
                    alert('Error occured');
                }
            });
        });
    </script>            
    </head>
    <body>
    <form id="myCheckboxForm" name="myCheckboxForm" action="tableReduced.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 type="hidden" name="ckboxList[]" id="Ckbox1" value="0">
                  <input type="checkbox" name="ckboxList[]" id="Ckbox1" value="1">
                  <label for="Ckbox1">Checkbox 1</label>
                </li>
                <li>
                  <input type="hidden" name="ckboxList[]" id="Ckbox2" value="0">
                  <input type="checkbox" name="ckboxList[]" value="1" id="Ckbox2" checked>
                  <label for="Ckbox2">Checkbox 2</label>
                </li>
                <li>
                  <input type="hidden" name="ckboxList[]" id="Ckbox3" value="0">
                  <input type="checkbox" name="ckboxList[]" value="1" id="Ckbox3" >
                  <label for="Ckbox3">Checkbox 3</label>
                </li>          

            </div>

            <script>
            $(document).ready(function(){
              $('.skin-polaris input').iCheck({
                checkboxClass: 'icheckbox_polaris',
                radioClass: 'iradio_polaris',
                increaseArea: '20%'
              });
            });
            </script>


          </dd>

        </dl>

          <input type="submit" class="list" name="submit" id="submit" value="Update Table">   

      </div>

    </form>

    </body>
</html>

This is tableReduced.php:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="utf-8" http-equiv="encoding"/> 

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <script language="javascript" type="text/javascript">
        //go to checkbox web page
        function btn_changeColumns_onClick()
        {
            //it doesn't like localhost here
            window.location.href = "checkbox3.html"; 
        }
    </script>

</head>
<body>
    <div class="form">
        <p>
            <label>CheckboxList: It is Monday
                <?php
                    if (isset ($_POST["ckboxList"])) { 
                        $theFrm = implode(", ", $_POST["ckboxList"]);
                        echo $_POST[$theFrm];   
                    }
                 ?>
            </label>
        </p>
    </div>
<table id="tableone" border="1">
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col2">Header 3</th></tr>
    </thead>
    <tr class="del">
        <td contenteditable="false">Row 0 Column 0</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 contenteditable="false">Row 1 Column 1</td>
        <td contenteditable="false">Row 1 Column 2</td>
    </tr>
</table>
    <input id="chgColumns" type="button" value="Change Columns Displayed"
           onclick="return btn_changeColumns_onClick()" />
</body>
</html>

I have also tried using implode with the ckboxList[] but it's not giving me the labels that I want, it's giving me 0, 0, 1, 0. See pertinent code marked with **.

So my question is, how do I POST the entire form, or how do I POST the ckboxList[] and obtain the label names instead of 0/1.

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

Answer 1

    If you want to post a form by clicking checkbox , then you can use a method like this

make two files, first is in html from where you want to post a php form it is demo.html make a form in html file and post it a php file like del.php is a file where our form will post

   First File 
-Demo.html
<html>
    <head>
        <title>Demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <form action="del.php" method="POST">
            <table>
                <tr>
                    <td>Check Box</td>
                    <td><input type="checkbox" id="chk-1" name="chk-1"/>Click Me</td>
                </tr>
                <tr>
                    <td><input type="submit" name="sub" value="" id="sub"/></td>
                </tr>
            </table>
        </form>

    </body>
</html>
<script>
    $("#chk-1").click(function() {
        $("#sub").click();

    });
</script>
-----------------------------------------------
second php file
-del.php
<?php
if(isset($_POST['sub'])){
    var_dump($_POST);
}
?>

        If you don't wan to show a submit button then you can hide it,you can post form by jquery dom,by binding checkbox click event

How post form from html to php

Question

1 answers

solution1
-1 2014-06-21 06:13:52

How post form from html to php

Question

1 answers

solution1 -1 2014-06-21 06:13:52

solution1
-1 2014-06-21 06:13:52