如何將動態添加的輸入字段關聯到父元素/ ID？

我使用bootstrap和jquery設計了一個用戶數據庫系統。問題是，當一個按鈕按下，它會在用戶的附加字段追加到重點。如何將動態添加的輸入字段關聯到父元素/ ID？

讓我們假設該字段的第一個數組的數組名是後ref_title[0]追加按鈕按下，另一個文本字段將顯示具有相同的屬性，但數組值將爲ref_title[1]。

但是在代碼本身上，它只會顯示ref_title[]。這沒關係，因爲任何新字段都會繼續添加到數組ref_title[]。我對嗎？

當Save Changes按鈕被點擊時，我將使用 onclick="newdata('<?php echo $row['drug_id']; ?>')"

'drug_id'是一個唯一的數，例如1，2或3。

將數據定向到JS當我檢查的輸入字段下

第一盒是

<input class="form-control" id="ref_title3" name="ref_title[]" placeholder="Reference Title" type="text">

然而在第二盒（後追加按鈕按下並附加框出現）

<input class="form-control" id="ref_title" name="ref_title[]" placeholder="Reference Title" type="text">

看看id="ref_title"。值3不回顯。

HTML：

<input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title"> 
<button type="button" onclick="newdata('<?php echo $row['drug_id']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>

JS：

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title"/></div>"><a href="#" class="remove_field">Remove</a></div>'); //add input box   
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
});

點擊數

function newdata(str){ 
var ref = $('#ref_title'+str).val(); // !!Only can read the first array 

var datas="&ref="+ref; 

$.ajax({ 
    type: "POST", 
    url: "update.php", 
    data: datas 
}).done(function(data) { 
    $('#info').html(data); 
    viewdata(); 
}); 
};

來源

2016-02-28 john

我該如何讀取數組部分？ var ref = $（'＃ref_title'+ str）.val（）;？ – john

在「PHP」下，你有一個文本可能是html輸入元素的一部分，但不是php。請詳細說明。 – VolkerK

確定其關於該HTML的sry – john

不完全回答你的問題，B建議你可以做什麼。

先決條件：test.php的

<pre><?php var_export($_POST); ?></pre>

當你給輸入控制包含[...] PHP將把數據，就好像它是陣列的名稱。例如。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>...</title> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <form method="post" action="test.php"> 

      <input type="hidden" name="foo[a]" value="a" /> 
      <input type="hidden" name="foo[b]" value="b" /> 
      <input type="hidden" name="foo[bar][]" value="bar1" /> 
      <input type="hidden" name="foo[bar][]" value="bar2" /> 
      <input type="hidden" name="foo[bar][]" value="bar3" /> 
      <div> 
       <input type="submit" /> 
      </div> 
     </form> 
    </body> 
</html>

test.php的的輸出中會

<pre>array (
    'foo' => 
    array (
    'a' => 'a', 
    'b' => 'b', 
    'bar' => 
    array (
     0 => 'bar1', 
     1 => 'bar2', 
     2 => 'bar3', 
    ), 
), 
)</pre>

即名字

name="foo[a]" 
name="foo[b]" 
name="foo[bar][]" 
name="foo[bar][]" 
name="foo[bar][]"

造成PHP構建_POST陣列狀

$_POST = array(); 
$_POST['foo']['a'] = 'a'; 
$_POST['foo']['b'] = 'b'; 
// $_POST['foo'][bar] = array() 
$_POST['foo']['bar'][] = 'bar1'; 
$_POST['foo']['bar'][] = 'bar2'; 
$_POST['foo']['bar'][] = 'bar3';

現在我建議你建立這樣的輸入控件的名稱：

[drugs][145][add][]

告訴興田PHP腳本它應該在毒品上工作，哪一個（145），它應該加上一些東西加上[]，這樣你可以添加（幾乎）任意數量的物品。
因此，一個POST身體像

drugs[145][add][]=drug145.1&drugs[145][add][]=drug145.2&drugs[22][add][]=drug22.1

（是啊，是啊，編碼是關閉的....）

會導致

_POST==$_POST = array(
    'drugs' = >array(
     '145' => array(
      'add' => array(
       'drug145.1', 
       'drug145.2' 
      ), 
     '22' => array(
      'add' => 'drug22.1' 
     ) 
    ) 
);

告訴你的PHP腳本添加/追加drug145.1和drug145.2兩個描述到物品145和到物品22.

她和她E公司的一個例子，你可以如何與HTML/JavaScript的/ jQuery的

<!DOCTYPE html> 
<html> 
    <head> 
     <title>...</title> 
     <meta charset="utf-8" /> 
     <style type="text/css"> 
      .adddrugdesc { 
       margin-left: 1em; 
       cursor: pointer; 
       background-color: Cornsilk; 
       border: 1px solid silver; 
      } 
     </style> 
    </head> 
    <body> 

     <form method="post" action="test.php"> 
      <div class="druglist">  
       <!-- note the drugid as an data-* attribute, see e.g. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes 
       Your php script is supposed to output this id when serving the html document 
       --> 
       <fieldset><legend data-drugid="3">Drug A</legend></fieldset> 
       <fieldset><legend data-drugid="7">Drug B</legend></fieldset> 
       <fieldset><legend data-drugid="145">Drug C</legend></fieldset> 
       <fieldset><legend data-drugid="22">Drug D</legend></fieldset> 
      </div> 
      <input type="submit" /> 
     </form> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       var dl = $(".druglist"); 
       // add some kind of edit/add button to each fieldset/legend 
       dl.find("fieldset legend").each(function(x) { 
        $(this).append('<span class="adddrugdesc">add description</span>'); 
       }); 

       // add an event handler for all edit/add buttons 
       dl.on('click', '.adddrugdesc', function(e) { 
        var me = $(this); // this will be the span element the usr clicked on 
        var legend = me.parent('legend'); // this will be the legend element in which the span is located 
        var fset = legend.parent('fieldset'); // same as with legend 

        var drugid = legend.data()['drugid']; // access the data-* attribute of the element via data() and pick the element "drugid" 

        var newinput = $('<input type="text" />'); 
        newinput.attr("name", "drugs["+drugid+"][add][]"); 
        fset.append(newinput); 
       }); 

      }); 
     </script> 
    </body> 
</html>

（這是一個有點冗長，以保持它「理解」做到這一點。而且......這只是一個例子。有些東西可能會更漂亮，更健壯等）

來源

2016-02-28 16:59:03 VolkerK

如何將動態添加的輸入字段關聯到父元素/ ID？

回答

相關問題