如何在表單中傳遞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值作爲輸入？

回答

相關問題