HTML PHP顯示表單在同一頁面上提交結果
[英]HTML PHP show form submit results on same page
問題描述
我正在嘗試制作一組網頁，這些網頁將基於僅具有選擇器框和提交按鈕的簡單表單顯示唯一的圖形。 基本上我想發生的是，當用戶在選擇器中更改月份並按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!
?>
有人請幫助我，我已經盯着這個看了好幾個小時，無法取得任何進展。
6 個解決方案
解決方案1
1 2014-06-30 18:22:25
您還可以使用jQuery的.load方法：
function submit()
{
var month = 3;
var formdata = month;
$('#response').load('showCharts.php?month='+formdata);
}
另外，您需要設置：
$month = $_REQUEST['month'];
解決方案2
1 2014-06-30 19:40:34
另一種方法是：
$('select').change(function() {
var formdata = { month: document.getElementsByName('monthSelector')[0].value };
$('#response').load( 'showCharts.php', formdata);
});
解決方案3
0 2014-06-30 18:27:51
嘗試更換
<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代碼，它將為您的網頁提供更好的圖像。
解決方案4
0 2014-06-30 18:28:41
您確定Submit函數甚至被調用了嗎？ 您是否綁定了表單的Submit事件？
我會做類似$("#form1").submit(submit);事情$("#form1").submit(submit);
另外，您應該在submit（）的末尾返回false，以阻止默認的表單操作（刷新相信的當前頁面）
解決方案5
0 2014-06-30 18:30:32
嘗試更新變量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
您的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，回顯結果保留在同一頁面上，提供電子郵件表單結果示例
[英]Hide html when submit button clicked, echo results staying on same page, email form results EXAMPLE PROVIDED
提交表單后顯示PHP POST結果，然后在單擊“刷新”頁面時重新加載相同的空白表單
[英]Display PHP POST results after a form submit, then reload same blank form when page “Refresh” clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.