我试图通过Ajax传递HTML Div值（Div中的整个HTML代码）作为表单中的输入值。 这是我的表格代码： Div＆＃34; Fetch_Applicant＆＃34;动态获取一个表，我希望通过ajax传递。我已经用桌面更新了DIV。
//Form Starts
<form name="mail_applicant" novalidate id="mail_applicant" action="" method="post" >
<div id="fetch_applicant">
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
<input name="mail_id" id="mail_id" value="" type="email" required />
<button type="submit" id="mail_applicant" name="mail_applicant" >Send Mail</button>
</form> //Form Ends
<div id="fetch_applicant_mail"></div> //This Is Where I Am Printing The Status Of The Post.
这是我的AJAX代码：
<script type="text/javascript">
$(document).ready(function (e) {
$("#mail_applicant").on('submit',(function(e) { /*On Submit Of Form Named Mail Applicant */
e.preventDefault();
$.ajax({
url: "send_mail_applicant.php", /*Posting The Data*/
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#fetch_applicant_mail").html(data); /*Fetching POST Status*/
},
error: function()
{
}
});
}));
});
</script> /*Script Ends*/
这是我的PHP代码：
<?php
echo "Content".$_POST['fetch_applicant'];
echo "Mail-id:".$_POST['mail_id'];
$to = $_POST['mail_id'];
$subject = "Mail Data";
$message = $_POST['fetch_applicant'];
$headers = "From: The Server <bot@abcd.com>" . "\r\n" .
"Content-type: text/html" . "\r\n";
mail($to, $subject, $message, $headers);
?>
当我提交表单时，邮件ID已发布但div内容未发布。它仍然是空的。 $_POST['fetch_applicant']的值始终为NULL。
请注意，此链接：how to submit a div value in a form没有帮助。
答案 0 :(得分：1)
由于您要阻止提交并使用AJAX发送数据而不是提交数据，您只需传递div的值：
更新：我发布的此代码应该按预期工作。我建议您在发送数据时保持控制台处于打开状态以避免JS错误。
<script type="text/javascript">
$(document).ready(function() {
$("#mail_applicant").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "send_mail_applicant.php",
type: "post",
data: {
fetch_applicant: $('#fetch_applicant').html(),
mail_id: $('#mail_id').val()
},
success: function(data) {
$("#fetch_applicant_mail").html(data);
}
});
return false;
}));
});
</script>
PHP代码：
<?php
$to = $_POST['mail_id'];
$subject = "Mail Data";
$message = $_POST['fetch_applicant'];
$headers = "From: The Server <bot@abcd.com>" . "\r\n" .
"Content-type: text/html" . "\r\n";
mail($to, $subject, $message, $headers);
?>
答案 1 :(得分：1)
解决方案：在隐藏的Textarea中获取相同的表值。然后将文本区域的值作为输入发送。
AJAX代码：
<script type="text/javascript">
$(document).ready(function (e) {
$("#mail_applicant").on('submit',(function(e) { /*On Submit Of Form Named Mail Applicant */
e.preventDefault();
$.ajax({
url: "send_mail_applicant.php", /*Posting The Data*/
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#fetch_applicant_mail").html(data); /*Fetching POST Status*/
},
error: function()
{
}
});
}));
});
function SetData()
{
$("#hddenID").val($("#fetch_applicant_mail").html()); //here we have store value into hidden field
}
</script>
HTML代码：
<div id="fetch_applicant"></div> //Fetches The Table Here
<form name="mail_applicant" novalidate id="mail_applicant" action="" method="post" onclick="SetData()" >
<textarea hidden id="fetch_applicant_m" name="fetch_applicant_m" value="" type="text" required ></textarea> //Fetches The Same Table Here AS Well
<input name="mail_id" id="mail_id" value="" type="email" required />
<button type="submit" id="mail_applicant" name="mail_applicant" >Send Mail</button>
<input name="fetch_applicant_mail" id="hddenID" value="" type="hidden" />
</form>
<div id="fetch_applicant_mail"></div> //Fetches The Value Passed Through Ajax After POST.
PHP代码：
<?php
echo "Content".$_POST['fetch_applicant_m'];
echo "Mail-id:".$_POST['mail_id'];
$to = $_POST['mail_id'];
$subject = "Mail Data";
$message = "'".$_POST['fetch_applicant_m']."'";
$headers = "From: The Server <bot@abcd.com>" . "\r\n" .
"Content-type: text/html" . "\r\n";
mail($to, $subject, $message, $headers);
?>
答案 2 :(得分：0)
你可以尝试这样： -
//Form Starts
<form name="mail_applicant" novalidate id="mail_applicant" action="" method="post" onclick="SetData()" >
<div id="fetch_applicant"></div>
<input name="mail_id" id="mail_id" value="" type="email" required />
<button type="submit" id="mail_applicant" name="mail_applicant" >Send Mail</button>
<input name="fetch_applicant_mail" id="hddenID" value="" type="hidden" /> //Added hidden field
</form> //Form Ends
<div id="fetch_applicant_mail"></div>
提交
<script type="text/javascript">
$(document).ready(function (e) {
$("#mail_applicant").on('submit',(function(e) { /*On Submit Of Form Named Mail Applicant */
e.preventDefault();
$.ajax({
url: "send_mail_applicant.php", /*Posting The Data*/
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#fetch_applicant_mail").html(data); /*Fetching POST Status*/
},
error: function()
{
}
});
}));
});
function SetData()
{
$("#hddenID").val($("#fetch_applicant_mail").html()); //here we have store value into hidden field
}
</script> /*Script Ends*/
答案 3 :(得分：0)
new FormData(this)不会为fetch_applicant生成属性，因为FormData()只会查看表单中的input元素。
因此，您需要添加属性fetch_applicant并手动为其指定值。
如何
您可以使用变量来保存由new FormData(this)生成的所有数据，并为其添加属性并为其指定值。
var myData = new FormData(this);
myData.fetch_applicant = $('#fetch_applicant').html();// It will create a new property and assign it with the html content inside your dive
所以，现在你可以将这个变量myData作为参数传递给你的ajax调用。
所以你的最终代码将是，
$（document）.ready（function（e）{
$("#mail_applicant").on('submit',(function(e) { /*On Submit Of Form Named Mail Applicant */
e.preventDefault();
var myData = new FormData(this);
myData.fetch_applicant = $('#fetch_applicant').html();// It will create a new property and assign it with the html content inside your dive
$.ajax({
url: "send_mail_applicant.php", /*Posting The Data*/
type: "POST",
data: myData, // Pass your myData here.
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#fetch_applicant_mail").html(data); /*Fetching POST Status*/
},
error: function()
{
}
});
}));
});
</script> /*Script Ends*/