HTML PHP显示表单在同一页面上提交结果

Question

我正在尝试制作一组网页，这些网页将基于仅具有选择器框和提交按钮的简单表单显示唯一的图形。 基本上我想发生的是，当用户在选择器中更改月份并按Submit时，新的图表集将呈现在同一页面上。

这是HTML初始页面：

<HTML>
<HEAD>
    <SCRIPT src="http://code.jquery.com/jquery-1.10.1.min.js"></SCRIPT>
</HEAD>
<BODY>
    <CENTER>
        <FORM ID="form1" METHOD="post" ACTION="">
            <SELECT NAME="monthSelector">
                <OPTION VALUE="0">Select Month...</OPTION>
                <OPTION VALUE="1">January</OPTION>
                <OPTION VALUE="2">February</OPTION>
                <OPTION VALUE="3">March</OPTION>
                <OPTION VALUE="4">April</OPTION>
                <OPTION VALUE="5">May</OPTION>
                <OPTION VALUE="6">June</OPTION>
                <OPTION VALUE="7">July</OPTION>
                <OPTION VALUE="8">August</OPTION>
                <OPTION VALUE="9">September</OPTION>
                <OPTION VALUE="10">October</OPTION>
                <OPTION VALUE="11">November</OPTION>
                <OPTION VALUE="12">December</OPTION>
            </SELECT>
            <INPUT TYPE="submit" VALUE="Show Charts">
        </FORM>

        <DIV ID="response"></div>

        <SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = "month=" + month;
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>
    </CENTER>
</BODY>
</HTML>

这是showCharts.php：

<?php
    include("../FusionCharts/FusionCharts.php");
    include("../DBConnect.php");

    $month = $_POST['month'];
    echo $month;
    //insert complex queries and fusioncharts code that already works!
?>

有人请帮助我，我已经盯着这个看了好几个小时，无法取得任何进展。

Answer 1

您还可以使用jQuery的.load方法：

function submit()
        {
             var month = 3;
             var formdata = month;
             $('#response').load('showCharts.php?month='+formdata);
        }

另外，您需要设置：

$month = $_REQUEST['month'];

Answer 2

另一种方法是：

$('select').change(function() {
          var formdata = { month: document.getElementsByName('monthSelector')[0].value };
          $('#response').load( 'showCharts.php', formdata);
      });

Answer 3

尝试更换

<FORM ID="form1" METHOD="post" ACTION="">

对于

<FORM ID="form1" METHOD="post" ONSUBMIT="submit(); return false;">

它应该工作。

在jQuery部分中，输入以下内容：

function submit()
{
    var month = $('select[name="monthSelector"]').val();
    $.ajax({
        type: 'POST',
        url: 'showCharts.php',
        data:{'month':month},
        success: function(data)
        {
            $("#response").html(data);
        }
    });
}

还有一件事：尝试改进HTML代码，它将为您的网页提供更好的图像。

Answer 4

您确定Submit函数甚至被调用了吗？ 您是否绑定了表单的Submit事件？

我会做类似$("#form1").submit(submit);事情$("#form1").submit(submit);

另外，您应该在submit（）的末尾返回false，以阻止默认的表单操作（刷新相信的当前页面）

Answer 5

尝试更新变量formdata以使其成为json对象而不是字符串。

<SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = {'month': month}; //change made here
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>

Answer 6

您的jQuery代码应如下所示：

$(function() {
      var month = 3;
      var formdata = { month: month };
      $('#response').load( 'showCharts.php', formdata );

      $('#form1').submit(function( e ) {
          e.preventDefault();
          var formData = { month: this.monthSelector.value };
          $('#response').load( 'showCharts.php', formData);
      });
});

使用ajax .load()方法时，应注意以下几点：

申请方法

如果将数据作为对象提供，则使用POST方法。 否则，假定为GET。

因此，使用上述jQuery代码，无需更改您的PHP脚本。

HTML PHP显示表单在同一页面上提交结果

问题描述

6 个解决方案

解决方案1
1 2014-06-30 18:22:25

解决方案2
1 2014-06-30 19:40:34

解决方案3
0 2014-06-30 18:27:51

解决方案4
0 2014-06-30 18:28:41

解决方案5
0 2014-06-30 18:30:32

解决方案6
0 2014-06-30 18:30:51

HTML PHP显示表单在同一页面上提交结果

问题描述

6 个解决方案

解决方案1 1 2014-06-30 18:22:25

解决方案2 1 2014-06-30 19:40:34

解决方案3 0 2014-06-30 18:27:51

解决方案4 0 2014-06-30 18:28:41

解决方案5 0 2014-06-30 18:30:32

解决方案6 0 2014-06-30 18:30:51

解决方案1
1 2014-06-30 18:22:25

解决方案2
1 2014-06-30 19:40:34

解决方案3
0 2014-06-30 18:27:51

解决方案4
0 2014-06-30 18:28:41

解决方案5
0 2014-06-30 18:30:32

解决方案6
0 2014-06-30 18:30:51