Javascript 如何将表单从html发布到php_Javascript_Php_Jquery_Html_Post

Javascript 如何将表单从html发布到php

javascript php jquery html post

Javascript 如何将表单从html发布到php,javascript,php,jquery,html,post,Javascript,Php,Jquery,Html,Post,我正在尝试将表单从Checkbox.html发布到table.php。我需要table.php中的整个复选框表单，这样我就可以从一个很长的复选框列表中获得我需要的（标签）。我有一个方法，我知道它只解析整个表单中的标签当我运行这个程序时，我从table.php开始，然后按下一个按钮，它就会转到checkbox.html。我选中一些框并按下submit按钮，它应该将表单发送回table.php 这是checkbox3.html： <!DOCTYPE html> <!-- --&g

我正在尝试将表单从Checkbox.html发布到table.php。我需要table.php中的整个复选框表单，这样我就可以从一个很长的复选框列表中获得我需要的（标签）。我有一个方法，我知道它只解析整个表单中的标签

当我运行这个程序时，我从table.php开始，然后按下一个按钮，它就会转到checkbox.html。我选中一些框并按下submit按钮，它应该将表单发送回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>


jQuery-Michele项目
$（文档）.ready（函数（）{
$（'.input'）.iCheck({
checkboxClass:“icheckbox_polaris”，
无线电等级：'iradio_polaris'，
增加面积：'10%'
});
});
//***接下来的两个脚本部分是新的AJAX部分。我再也看不到警报了*****
$（文档）.ready（函数（）{
$（“#提交”）。在（'单击'，函数（）上{
var serialized=$（'input:checkbox'）.map（函数（）{
返回{id:this.id，值：this.checked？this.id:“false”}；
});
console.log（序列化）；
警报（JSON.stringify（序列化））；
});
$.ajax({
url:“tableReduced.php”，
类型：“POST”，
数据类型：“json”，
数据：序列化，//将上面的数据发送到此处
成功：功能（msg）{
警报（“提交的表格：+msg”）；
返回味精；
},
错误：函数（）{
警报（“发生错误”）；
}
});
});
为列标题选择项目
居住


复选框1


复选框2


复选框3

$（文档）.ready（函数（）{
$（'.skin polaris input'）.iCheck({
checkboxClass:“icheckbox_polaris”，
无线电课：“北极星”，
增加面积：“20%”
});
});

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


//转到复选框网页
函数btn\u change columns\u onClick（）
{
//它不喜欢本地主机
window.location.href=“checkbox3.html”；
}

今天是星期一

收割台1收割台2收割台3
第0行第0列
第0行第1列
第0行第2列
第1行第0列
第1行第1列
第1行第2列

我也尝试过在ckboxList[]中使用内爆，但它并没有给我想要的标签，而是给了我0,0,1,0。请参阅标有**的相关代码

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

我一直在看的有用链接有：

制作两个文件，第一个是html格式的，您可以在其中发布php表单它是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

第一个文件
-Demo.html
演示
复选框
点击我
$（“#chk-1”）。单击（函数（）{
$（“#sub”）。单击（）；
});
-----------------------------------------------
第二个php文件
-del.php
若你们不想显示提交按钮，那个么你们可以隐藏它，你们可以通过jquerydom发布表单，通过绑定复选框点击事件

   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

第一个文件
-Demo.html
演示
复选框
点击我
$（“#chk-1”）。单击（函数（）{
$（“#sub”）。单击（）；
});
-----------------------------------------------
第二个php文件
-del.php
若你们不想显示提交按钮，那个么你们可以隐藏它，你们可以通过jquerydom发布表单，通过绑定复选框点击事件

未选中的复选框在post期间不会被传输，因为它们没有任何值。不过，人们已经设计了解决方法——之前也有人解决了这个问题——好吧，我会尽量减少它，并在大约1/2小时内进行更改。将AJAX功能放在文档就绪处理程序中。我希望我对您的项目有更多的了解。您是否尝试过使用。这就是我如何发送带有姓名和所有内容的复选框和收音机。与手工获取名称和值的漫长过程不同，只需将ajax数据设置为

var dataToServer=$（'form'）。serializeArray（）

，它就会将其构造为发送到服务器的正确数据。而且，内爆只会给你数值。如果你想要钥匙，可以看看类似于未选中的checkbo的东西