本周我一直在努力解决这个问题。
我正在使用Jquery将表单数据提交到同一页面并提取php文件。但是$ _POST似乎总是空的。经过一些搜索后,我发现我需要首先通过Jquery序列化表单的数据,但仍然没有运气。任何人都可以向我解释我在这里做错了吗? - 我已经包含了表单,jquery和php
表格
<form action="" method="POST" id="searcher" name="searcher">
<div class="customsearchul">
<ul>
<li><h4>Area:</h4></li>
<li>All of London<input type="radio" name="area" value="london" checked="checked" /></li>
<li>North<input type="radio" name="area" value="north" /></li>
<li>East<input type="radio" name="area" value="east" /> </li>
<li>South<input type="radio" name="area" value="south" /></li>
<li>West<input type="radio" name="area" value="west" /></li>
<li>Central<input type="radio" name="area" value="central" /></li>
</ul>
</div>
<div class="customsearchul">
<ul>
<li><h4>Music:</h4></li>
<li>House<input type="checkbox" name="music[]" value="house" /></li>
<li>Techno<input type="checkbox" name="music[]" value="techno" /></li>
<li>Trance<input type="checkbox" name="music[]" value="trance" /></li>
<li>Electronica<input type="checkbox" name="music[]" value="electronica" /></li>
<li>Drum and Bass<input type="checkbox" name="music[]" value="drum-and-bass" /></li>
<li>Garage<input type="checkbox" name="music[]" value="garage" /></li>
<li>Dubstep<input type="checkbox" name="music[]" value="dubstep" /></li>
<li>Trap<input type="checkbox" name="music[]" value="trap" /></li>
</div>
</ul>
<div class="customsearchul" style="margin-top: 34px;">
<ul>
<li>Hip-Hop<input type="checkbox" name="music[]" value="hip-hop" /></li>
<li>R'n'B<input type="checkbox" name="music[]" value="rnb" /></li>
<li>Rock<input type="checkbox" name="music[]" value="rock" /></li>
<li>Indie<input type="checkbox" name="music[]" value="indie" /></li>
<li>Reggae<input type="checkbox" name="music[]" value="reggae" /></li>
<li>Retro 80's/90's<input type="checkbox" name="music[]" value="retro" /></li>
<li>Party Bangers<input type="checkbox" name="music[]" value="party-bangers" /></li>
<li>Chart Hits<input type="checkbox" name="music[]" value="chart-hits" /></li>
</ul>
</div>
<div class="customsearchul">
<ul>
<li><h4>Search Type:</h4></li>
<!--<li>Everything<input type="checkbox" name="occasion[]" value="debauchery" /></li> -->
<li>Nightclubs<input type="checkbox" name="occasion[]" value="nightclub" checked="checked" /></li>
<li>Events & Tickets<input type="checkbox" name="occasion[]" value="event" checked="checked" /> </li>
<li>Live Venues<input type="checkbox" name="occasion[]" value="live-venue" checked="checked" /></li>
<li>Artist Interviews<input type="checkbox" name="occasion[]" value="artist" checked="checked" /></li>
<li>Gay & Lesbian<input type="checkbox" name="occasiongay[]" value="gay-lesbian"/></li>
<li>£££ Big Spender<input type="checkbox" name="occasionmoney[]" value="big-spender"/></li>
<li>££ Keep it Average<input type="checkbox" name="occasionmoney[]" value="keep-it-average"/></li>
<li>£ Cheap As Chips<input type="checkbox" name="occasionmoney[]" value="cheap-as-chips"/></li>
</ul>
</div>
<center><input type="image" id="performsearch" src="http://www.*******.com/wp-content/themes/bigformat/images/calltoactionindexbutton.jpg">
</center>
Jquery的
<script type="text/javascript">
jQuery(document).ready(function($){
$("#performsearch").click(function(){
$("#displayresults").empty();
$( "#displayresults" ).html('<center><img src="/wp-content/themes/bigformat/images/ajax-loader.gif"></center>').load( '/wp-content/themes/bigformat/template-home-search.php');
$("searcher").submit(function(){
var querystring = $(this).serialize();});
return false;
});
});
</script>
PHP
// Get Form Data For search
$locationarea = $_POST['area'];
$music = $_POST['music'];
$occasion = $_POST['occasion'];
$occasiongay = $_POST['occasiongay'];
$occasionmoney = $_POST['occasionmoney'];
echo 'User has selected';
print_r($_POST);
var_dump($_POST);
echo '<br><br>';
答案 0 :(得分:1)
$("searcher")
在您的情况下没有做任何事情......您正在使用寻找<searcher>
元素的元素选择器。您应该使用ID选择器。
将$("searcher")
更改为$("#searcher")
。
要实际发布您的表单,请使用以下内容:
$("searcher").submit(function(event) {
// Prevent form from submitting the normal way
event.preventDefault();
$("#displayresults").html('<center><img src="/wp-content/themes/xxx/images/ajax-loader.gif"></center>').load( '/wp-content/themes/xxx/template-home-search.php');
// Get URL from Form action attribute instead of window.location
$.post($(this).attr("action"), $(this).serialize());
}