contact.php
... html form ...
$('#submit').click(function(){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
mail.php is a separate file (for sending mail), and everything works in this arrangement.
But I need to load contact.php into index.php
$('#divR').load('chapters/contact.php');
so corresponding js line becomes
$.post("chapters/mail.php", $("#contact").serialize(), function(response) {...
Submitting the form in this case response from mail.php is received, but POST array is empty, i.e. form doesn't send any data to mail.php !?
I wrote your code in 2 new pages to see what it actually does, and noticed a few things. A few small things such as calling the submit handler instead of click, since people can also press Enter to submit a form, but most important the data itself: A form doesn't need to be serialized, the browser will already do that for you. In this script I store the data in a new object and pass it to the $.post method.
<form method="post" action="" id="contact">
<div>
<input id="email" type="text">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
Script:
$("#contact" ).on("submit", function () {
var data = {
email: $("#email").val()
};
$.post("test.php", data, function (response) {
$('#success').html(response);
});
return false;
});
In test.php I simply do a print_r($_POST), which is also the response. It will output something like:
Array
(
[email] => test
)
Hope this helps.
I've made a simple test, trying to mimic your goal: testLoad.php = index.php in your case:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$('#testLoad').load('Test/testForm.php');
});
</script>
</head>
<body>
<div id="testLoad"></div>
<div id="success"></div>
</body>
</html>
testForm.php and testTarget.php are respectively - contact.php and mail.php and are situated in folder Test their code is as follows: testForm.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form id="contact" method="post" action="">
<p>
<label for="textfield">Name:</label>
<input type="text" name="textfield" id="textfield">
</p>
<p>
<label for="textfield2">Address:</label>
<input type="text" name="textfield2" id="textfield2">
</p>
<p>
<label for="textfield3">Mail:</label>
<input type="text" name="textfield3" id="textfield3">
</p>
<p>
<label for="textfield4">Subject:</label>
<input type="text" name="textfield4" id="textfield4">
<br>
</p>
<p>
<label for="textarea">Message:</label>
<textarea name="textarea" id="textarea"></textarea>
</p>
<p>
<input type="button" name="submit" id="submit" value="Submit" onClick="sendForm();">
</p>
</form>
<script>
$('#submit').bind('click', function(){
//console.log($("#contact").serialize());
$.post("Test/testTarget.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
</script>
</body>
</html>
and testTarget.php :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php print_r($_POST);?>
</body>
</html>
when testing in success div I receive the POST printed out. Hope this helps.