Question

我正在尝试将表单从Checkbox.html发布到table.php。我需要table.php中的整个复选框表单，这样我才能从一个非常长的checkBox列表中得到我需要的东西（标签）。我知道一种方法可以解析整个表单中的标签。

当我运行它时，我从table.php开始，然后按一个按钮，它会转到checkbox.html。我检查一些方框并按下提交按钮，它应该将表格发送回table.php。

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

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

我也尝试过使用implode和ckboxList []，但它没有给我标签，我给它0,0,1,0。参见标有**的相关代码。

所以我的问题是，如何POST整个表单，或者如何POST ckboxList []并获取标签名称而不是0/1。

我一直关注的有用链接是：

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

制作两个文件，首先是在你要发布php表单的html中它是demo.html 在html文件中创建一个表单并将其发布为php文件像del.php是我们的表格将发布的文件

   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

如何从html发布到php

1 个答案: