如何在表单中传递Div值作为输入？

我想通过一个HTML Div值（Div内的整个HTML代码）作为通过Ajax的表单中的输入值。这是我的表单代码： Div“Fetch_Applicant”动态获取我想通过ajax传递的表。我用桌子更新了DIV。如何在表单中传递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 <[email protected]>" . "\r\n" . 
      "Content-type: text/html" . "\r\n"; 

    mail($to, $subject, $message, $headers); 



?>

当我提交表单，邮件ID是越来越贴，但股利内容没有发布。它仍然是空的。 $_POST['fetch_applicant']的值始终为NULL。

请注意，此链接：how to submit a div value in a form没有帮助。

来源

2015-10-20 Arijit Aich

因为他们是表的一部分，你不能发送DIV值。要么在表单提交之前将该div值克隆到某个隐藏字段，要么选择每个表单元素并发布这些值。 –

@Arijit，'$ _POST ['fetch_applicant']'应该是什么值？你想传递什么，因为它的价值？ –

如果你能帮我解决代码问题，那将会很棒。 –

解决方案：获取相同的表值在一个隐藏的文本区再发文本区域作为输入的价值。

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 <[email protected]>" . "\r\n" . 
      "Content-type: text/html" . "\r\n"; 

    mail($to, $subject, $message, $headers); 



?>

来源

2015-10-20 10:17:27

当你在防止提交和使用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 <[email protected]>" . "\r\n" . 
      "Content-type: text/html" . "\r\n"; 

    mail($to, $subject, $message, $headers); 
?>

来源

2015-10-20 05:56:26 kosmos

它会有帮助，因为我想传递div内容的整个html代码。它将被用作邮件正文。 –

如果您想传递'＃fetch_applicant'的整个代码，请使用'.html（）'。我更新了答案。 – kosmos

没有任何值通过此代码传递。即使邮件编号did'nt以前通过。 –

你可以尝试这样的： -

//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*/

来源

2015-10-20 05:56:34

你的答案和op quetion之间有什么区别 –

请检查我已添加的评论。增加了隐藏字段和存储值 –

没有。它不工作。它只通过电子邮件。 –

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调用。

所以你的最终代码会，

$（文件）。就绪（函数（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*/

来源

2015-10-20 06:08:12

此代码不调用ajax函数。该页面只是刷新。 –

@ArijitAich，好的。所以，不要从提交按钮提交表单。你可以请点击按钮，并按照这种方法提交您的表单与自定义数据。 –

如何在表单中传递Div值作为输入？

回答

相关问题