I have the following code in my main page
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function loadQueryResults() {
$('#DisplayDiv').load('toaction.php');
return false;
}
</script>
<body>
<div id="page">
<form id="QueryForm" method="post">
<div id="SubmitDiv" style="background-color:black;">
<input type = "text" name="song"></input>
<button type="submit" form="QueryForm" onclick="return loadQueryResults();">Submit Query</button>
</div>
</form>
<div id="DisplayDiv" style="background-color:red;">
</div>
</div>
</body>
</html>
And the following in my toaction.php
<html>
<meta charset="utf-8">
<body>
<div id="page" style="background-color:yellow;">
<?php
if( isset($_POST['song']) )
{
$song = $_POST['song'];
echo $song;
}
else
{
echo "form didn't submit";
}
?>
</div>
</body>
</html>
The idea is to dynamically refresh the div without reloading the page. Which works, but the variable "song" is not passed through - so the div updates with "form didn't submit".
Thanks in advance,
-
How should it magically know which form to submit without you pointing it out?Niels Keurentjes– Niels Keurentjes2014年09月07日 00:59:46 +00:00Commented Sep 7, 2014 at 0:59
-
lol,I know its a stupid mistake but I am pretty new to both languages so can u please expanduser2981725– user29817252014年09月07日 01:01:03 +00:00Commented Sep 7, 2014 at 1:01
-
BTW, you shouldn't load two versions of jQuery.Barmar– Barmar2014年09月07日 01:04:18 +00:00Commented Sep 7, 2014 at 1:04
-
Thank you...I took care of it.user2981725– user29817252014年09月07日 02:35:03 +00:00Commented Sep 7, 2014 at 2:35
1 Answer 1
You didn't send any parameters in your $.load() call. Also, $.load() sends a GET request, not POST. Try this:
function loadQueryResults() {
$.post('toaction.php', $("#QueryForm").serialize(), function(response) {
$('#DisplayDiv').html(response);
});
return false;
}
.serialize() will construct a parameter list from all the fields in the given form, similar to normal form submission (one difference is that the submit button won't be included in the parameters).
answered Sep 7, 2014 at 1:01
Barmar
789k57 gold badges555 silver badges669 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
user2981725
developing this further...if I have two submit buttons such as <button name="song" type="submit" value="1" form="QueryForm" onclick="return loadQueryResults();">Play Song</button> and <button name="song" type="submit" value="2" form="QueryForm" onclick="return loadQueryResults();">Play Song</button> toaction.php doesn't pickup the value from a submit button .. what am I doing wrong?
Barmar
Read the last line of my answer, that explains it; submit buttons are only sent when the browser submits the form as a result of you clicking on it, AJAX doesn't know anything about it. If you need to include the submit button, you will have to add it to the parameters in your script. Or you could use a hidden input, and have the button click handlers fill this in.
lang-js