表單中的jQuery克隆錶行不提交克隆字段

下面是一個簡化示例，演示了我遇到的問題。百分之百的代碼在下面發佈。表單中的jQuery克隆錶行不提交克隆字段

三個文件一起工作：testa.php，testb.php和testc.js。（FWIW，testa.php可能充當的index.php，但是這僅僅是一個演示）

概述：

TESTA.PHP

當用戶點擊錨標記，將value to testb.php
接收從testb.php到div #reportstable，在FORM結構中的ajax響應
表單提交給它自己，因此它打印$ _POST數據 -

TESTB.PHP

接收值從TESTA.PHP，通過AJAX對應於接收到的值
輸出表（在本例中，我刪除接收到的值是如何使用的，但仍然保留該結構，因爲它影響了jQuery在testc.js）

tESTC.JS

jQuery的，使得它的（部分）工作

問題1：如果用戶將一個以上的「文件」（即行），只有最後一個文檔的數據出現在POST數據中。。

問題2：DocTitle和FileName ID（dt1，fn1）在DOM中出現時沒有POSTED。在DOM中，它們的ID會正確遞增（dt11，dt12，dt13等），但是隻有一個通過時纔會增加。（使用Firebug添加了幾個文件後檢查表元素

PROBLEM3：首先點擊不「拿」點擊「選擇文件」錨添加新文檔時，當有什麼想法就這一個。？

TESTA.PHP

<?php 
    If (empty($_POST)===false) { 
     echo '<pre>'; 
     print_r($_POST); 
     echo '</pre>'; 
     die(); 
    } 
?> 
<html><body> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery-custom-file-input.js"></script> 
<script type="text/javascript" src="testc.js"></script> 
<br /> 

Project*:<br /> 
<a href="#" id="project_pick">Click Me</a> 

<form action="" method="post"> 
    <div id="reportstable"> 
    </div> 
</form> 

</body></html>

TESTB.PHP

<?php 
    $project_id = $_POST['project_id']; 

    if ($project_id == 5) { 
     echo ' 
      <table id="DocTable"> 
       <tr> 
        <th width="150">Document Title</th> 
        <th width="150">File Name</th> 
       </tr> 
       <tr name="tr2" id="tr2" style="display:none;"> 
        <td><input type="text" name="dt1" id="dt1"></td> 
        <td> 
         <input type="hidden" name="fn1" id="fn1"> 
         <span id="sp1"><a href="#" id="ah1">choose file</a><span> 
        </td> 
       </tr> 
      </table> 
      <br /> 
      <a href="#" id="add_row">add document</a><br /> 
      <br /> 
      <input type="submit" name="submit" id="submit_it" value="Submit"> 
     '; 
    }

TESTC。JS

$(function(){ 

var count = 1; 
//*******************************************************************  
$('#project_pick').click(function(e) { 
    $(this).hide(); 
    $.ajax({ 
     type: "POST", 
     url: "testb.php", 
     data: "project_id=5", 
     success:function(data){ 
      $('#reportstable').html(data); 
     } 
    }); 
}); 
//*******************************************************************  
$(document).on('click','#ah11',function() { 
    $(this).file().choose(function(e, input) { 
     $('#fn11').val(input.val()); 
     $('#sp11').html(input.val()); 
     $('#sp11').css('color','grey'); 
    }); 
}); 
//*******************************************************************  
$(document).on('click','#ah12',function() { 
    $(this).file().choose(function(e, input) { 
     $('#fn12').val(input.val()); 
     $('#sp12').html(input.val()); 
     $('#sp12').css('color','grey'); 
    }); 
}); 
//*******************************************************************  
$(document).on('click','#ah13',function() { 
    $(this).file().choose(function(e, input) { 
     $('#fn13').val(input.val()); 
     $('#sp13').html(input.val()); 
     $('#sp13').css('color','grey'); 
    }); 
}); 
//*******************************************************************  
$(document).on('click', '#add_row', function() { 
    $("table#DocTable tr:nth-child(2)") 
     .clone() 
     .show() 
     .find("a, input, span, tr").each(function() { 
      $(this) 
       .val('') 
       .attr('id', function(_, id) { 
        return id + count; 
        }); 
     }) 
     .end() 
     .appendTo("table"); 

    count++; 
    if (count == 4) { 
     $('#add_row').prop('disabled', 'disabled'); 
    } 
}); //end fn add_row 
//*******************************************************************  
$(document).on('click', '#submit_it', function() { 
    alert('This will be submitted now'); 
}); 
//******************************************************************* 
});

來源

2012-09-11 gibberish

在您的javascript似乎只改變id屬性的值。但是，當您發佈表單時，id屬性不相關且不會發布，您需要改爲name屬性。

所以，當你改變id的時候，你應該改變名字（如果你真的需要它們，那麼id應該是唯一的）。

然而，一個更容易的解決辦法是使用數組的名稱，如：如果您複製這些名稱/克隆元素

<input type="text" name="dt[]">

和發佈表單，您將在$_POST['dt']得到一個數組。

來源

2012-09-11 20:08:17 jeroen

解決方案可以直截了當嗎？（這是webdev;我是一個相對的新手;當然可以）。謝謝Jeroen，我會試試看。 – gibberish

@gibberish我很確定它是:-) – jeroen

沒錯。那麼，現在我也確定。像魅力一樣工作，謝謝。順便說一句，點擊「選擇文件」錨點時，對「首次點擊不會帶來」問題的任何想法？你是否看到我用這個元素描述的問題？ – gibberish

表單中的jQuery克隆錶行不提交克隆字段

回答

相關問題