将变量从html输入传递到包含的php文件

时间:2017-11-09 22:56:33

标签: php html variables post checkbox

我有一个情况,我有一个手风琴,我在另一个php文件displayvar.php中引用一个php文件gridlist.php。换句话说,displayvar.php的上下文显示在网页gridlist.php中。现在gridlist.php有一个复选框输入:

 <input type="checkbox" id="foodlike" value="icecrm">I like ice cream</input>
 <input type="checkbox" id="foodlike" value="pizza">I like pizza</input>
 <input type="checkbox" id="foodlike" value="soda">I like soda</input>

现在,当我检查gridlist.php引用的表格中的复选框时,displayvar.php应该能够显示已检查项目的列表。例如,如果选中了所有三个复选框,则应显示:

 icecrmpizzasoda

如果检查了最后一个,则只显示苏打水。请记住,因为这个displayvar.php显示在网站gridlist.php的上下文中我在gridlist.php中使用了以下命令:

<?php include 'displayvar.php'; ?>

我尝试在displayvar.php中从gridlist.php中获取变量foodlike(由复选框gridlist.php中的变量id定义),然后根据这段代码回显它们:

<?php

   $like=$_POST['foodlike'];
   echo "$like";

?>

如何调整此代码以获得我想要的结果?

2 个答案:

答案 0 :(得分:1)

您可以通过以下方式实现此目的:

  

gridlist.php   

<form method="post" action="displayvar.php">
    <input type="checkbox" name="icecrm" value="icecrm">I like ice cream</input>
    <input type="checkbox" name="pizza" value="pizza">I like pizza</input>
    <input type="checkbox" name="soda" value="soda">I like soda</input>
    <input type="submit" value="Submit">
</form>
  

displayvar.php   

<?php
    $icecrm = isset($_POST['icecrm']) ? $_POST['icecrm'] : null;
    $pizza = isset($_POST['pizza']) ? $_POST['pizza'] : null;
    $soda = isset($_POST['soda']) ? $_POST['soda'] : null;

    echo is_null($soda) ? $icecrm.$pizza : $soda;
?>

答案 1 :(得分:0)

正如你所提到的,你不想要一个提交按钮,你可能想要某种&#34;交互式&#34;,即时解决方案并绕过去服务器,即绕过PHP。由于include 'foo.php' - 语句有效地将foo.php的所有内容转储到当前文件中(您可以说它&#34;将它们合并为一个&#34;),所有交互都在同一页面上发生< / em>的。将您的设置视为&#34;文件A通过服务器与文件B通信&#34;错了 - 只有一个文件/页面。

所以,说了这么多,我提出的解决方案使用了Javascript和看似全方位的jQuery库,你必须将它们包含在你的页面中。下面的代码片段将事件处理程序绑定到input s&#39; change - 事件,在选中复选框或单选按钮或更改文本输入的值时触发。然后,我们将检查的值附加到虚拟容器中以供显示。

&#13;
&#13;
$(function() {
  var $likes = $('#likes');


  // bind event handler to all input-elements
  $('input').on('change', function() {
    var $input = $(this),
      oldText = $likes.text();

    if ($input.is(':checked')) {
      $likes.append($input.val());
    } else {
      $likes.text(oldText.replace($input.val(), ''));
    }
  });
});
&#13;
label {
  display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="icecream">
  <input type="checkbox" name="icecream" id="icecream" value="icecrm">I like ice cream</label>
<label for="pizza">
  <input type="checkbox" name="pizza" id="pizza" value="pizza">I like pizza</label>
<label for="soda">
  <input type="checkbox" name="soda" id="soda" value="soda">I like soda</label>

<span id="likes"></span>
&#13;
&#13;
&#13;

编辑:这就是我将如何布置&#34; root&#34;包含两个gridlist.php和displayvar.php的文件,以及操作DOM所需的Javascript:

<html>
<head>
    <title>Test</title>
    <style>
        label {
            display: block;
        }
    </style>
</head>
<body>

<!-- This will be in a file you called 'gridlist.php' -->
<label for="icecream">
    <input type="checkbox" name="icecream" id="icecream" value="icecrm">I like ice cream</label>
<label for="pizza">
    <input type="checkbox" name="pizza" id="pizza" value="pizza">I like pizza</label>
<label for="soda">
    <input type="checkbox" name="soda" id="soda" value="soda">I like soda</label>
<!-- // -->

<!-- This will be in a file you called 'displayvar.php' -->
<span id="likes"></span>
<!-- // -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var $likes = $('#likes');

        // bind event handler to all input-elements
        $('input').on('change', function() {
            var $input = $(this),
                oldText = $likes.text();

            if ($input.is(':checked')) {
                $likes.append($input.val());
            } else {
                $likes.text(oldText.replace($input.val(), ''));
            }
        });
    });
</script>
</body>
</html>

编辑2 : 你似乎仍然遇到问题,所以我会试着澄清为什么我认为你没有成功。

使用 PHP,不可能访问已选中复选框的值,不将表单提交回服务器。

要检索已由用户检查过的复选框的值,您基本上只有两种可能性

选项1:使用POST / GET提交表单 这需要您将<form>元素包含在输入中,并提交用于提交表单的提交按钮。这就是(可能)98%的互联网表格的工作方式。表单中的数据使用POST或GET方法发送到您在form-tag中指定的脚本。以此为例(省略文字):

<form action="handler.php" method="get">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <button type="submit"></button>
</form>

当用户点击提交按钮时,表单将通过GET方法发送到handler.php。在那里,表单数据将在$_GET数组中提供。同样适用于POST。现在,一种常用的方法是通过action="#"将表单提交给相同的脚本,这意味着您不需要专用的处理程序,但可以在与表单相同的脚本中处理数据。显然,您必须区分两种情况:一种是在$ _GET / $ _ POST中没有设置数据的初始情况,另一种是在设置数据时设置的提交情况。 这同样适用于存储在$ _SESSION中的数据,顺便说一句:再次,你必须告诉服务器端脚本将你想要的数据放在用户会话中;只有这样你才能再次检索它 我会称之为类似的方法&#34;选项1 b)&#34;是通过AJAX提交的。这基本上是表单提交而不离开/重新加载页面。发送数据是通过Javascript和&#34; XMLHttpRequest&#34;完成的。 XHR允许您发送任何类型的数据,而不仅仅是XML。同样,类似的逻辑适用:您以某种方式序列化数据,提供端点,通常是脚本,与之通信,并通过POST / GET将数据传递给该脚本。然后,您的脚本可以处理数据并返回响应,该响应将在启动AJAX请求的JS中提供。

选项2:直接访问DOM DOM是&#34;树&#34;它由页面的HTML元素组成。使用Javascript,可以访问和修改这些元素,删除特定元素或添加新元素。这个API过去在浏览器中的实现方式完全不同,这就是创建jQuery或Prototype等库的原因:它们在不同的用户代理之间提供统一的API。 我们可以使用这些库的两个功能:

  1. 回复(用户触发的)事件
  2. 访问存储在其中的元素和数据
  3. 这是我在答案中使用的方法,我在此不再重复,您可以在上面阅读。我们会响应用户单击复选框的事件,并选中访问非常复选框以检索值数据并进一步处理。

    <强> TL; DR
    您有两种选择:将表单提交给脚本并在那里处理数据;或者,操纵DOM来捕获用户事件并提取值。

    信用:这是对这个帖子中每个答案和评论的总结,特别是Obsidian Age和Valentin Papin的答案,他们都给出了很好的答案,可以产生干净而实用的结果。