HTML PHP显示表单在同一页面上提交结果
[英]HTML PHP show form submit results on same page
问题描述
I am trying to make a set of webpages that will display a unique graph based on a simple form that only has a selector box and a submit button. 
我正在尝试制作一组网页，这些网页将基于仅具有选择器框和提交按钮的简单表单显示唯一的图形。 Basically what I want to happen is when the user changes the month in the selector and presses submit, a new chart set will render on the same page. 基本上我想发生的是，当用户在选择器中更改月份并按Submit时，新的图表集将呈现在同一页面上。
Here is the HTML initial page: 这是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>
and here is showCharts.php: 这是showCharts.php：
<?php
include("../FusionCharts/FusionCharts.php");
include("../DBConnect.php");
$month = $_POST['month'];
echo $month;
//insert complex queries and fusioncharts code that already works!
?>
Someone please help me, I've been staring at this for hours and can't make any progress. 有人请帮助我，我已经盯着这个看了好几个小时，无法取得任何进展。
6 个解决方案
解决方案1
1 2014-06-30 18:22:25
You can also use the .load method of jQuery: 您还可以使用jQuery的.load方法：
function submit()
{
var month = 3;
var formdata = month;
$('#response').load('showCharts.php?month='+formdata);
}
Also, you will need to set: 另外，您需要设置：
$month = $_REQUEST['month'];
解决方案2
1 2014-06-30 19:40:34
Another way to do it would be: 另一种方法是：
$('select').change(function() {
var formdata = { month: document.getElementsByName('monthSelector')[0].value };
$('#response').load( 'showCharts.php', formdata);
});
解决方案3
0 2014-06-30 18:27:51
Try replacing 尝试更换
<FORM ID="form1" METHOD="post" ACTION="">
for 对于
<FORM ID="form1" METHOD="post" ONSUBMIT="submit(); return false;">
It should work. 它应该工作。
In the part of jQuery, put this: 在jQuery部分中，输入以下内容：
function submit()
{
var month = $('select[name="monthSelector"]').val();
$.ajax({
type: 'POST',
url: 'showCharts.php',
data:{'month':month},
success: function(data)
{
$("#response").html(data);
}
});
}
One more thing: try to improve the HTML code, it will give a better image to your webpage. 还有一件事：尝试改进HTML代码，它将为您的网页提供更好的图像。
解决方案4
0 2014-06-30 18:28:41
Are you sure the submit function is even called? 您确定Submit函数甚至被调用了吗？ Do you bind the form's submit event at all? 您是否绑定了表单的Submit事件？
I would do something like $("#form1").submit(submit); 我会做类似$("#form1").submit(submit);事情$("#form1").submit(submit);
Also, you should return false at the end of submit() to block the default form action (which is refresh the current page I believe) 另外，您应该在submit（）的末尾返回false，以阻止默认的表单操作（刷新相信的当前页面）
解决方案5
0 2014-06-30 18:30:32
Try to update the variable formdata to make it a json object rather than a string. 尝试更新变量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>
解决方案6
0 2014-06-30 18:30:51
Your jQuery code should be as follows: 您的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);
});
});
When using the ajax .load() method, here is what you should be aware of: 使用ajax .load()方法时，应注意以下几点：
Request Method
The POST method is used if data is provided as an object;
Therefore, with the above jQuery code, your PHP script need not be changed. 因此，使用上述jQuery代码，无需更改您的PHP脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.