Javascript 如何将动态添加的输入字段与父元素/id关联？_Javascript_Php_Arrays

Javascript 如何将动态添加的输入字段与父元素/id关联？

javascript php arrays

Javascript 如何将动态添加的输入字段与父元素/id关联？,javascript,php,arrays,Javascript,Php,Arrays,我使用bootstrap和jquery设计了一个用户数据库系统。问题是，无论何时按下按钮，它都会附加一个附加字段供用户输入假设字段的第一个数组的数组名为ref\u title[0] <pre><?php var_export($_POST); ?></pre> name="foo[a]" name="foo[b]" name="foo[bar][]" name="foo[bar][]" name="foo[bar][]" 按下“追加”按钮后，另一个具有相

我使用bootstrap和jquery设计了一个用户数据库系统。问题是，无论何时按下按钮，它都会附加一个附加字段供用户输入

假设字段的第一个数组的数组名为

ref\u title[0]

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

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

按下“追加”按钮后，另一个具有相同属性的文本字段将出现，但数组值将为

ref\u title[1]

但是，在代码本身上，它将只显示

ref\u title[]

。这是可以的，因为任何新字段都将继续添加到数组

ref\u title[]

。我说得对吗

接下来，当单击SaveChanges按钮时，我将使用

onclick=“newdata（“”）”

'drugh\u id'

是一个唯一的数字，例如1、2或3

当我检查第一个框的输入字段时

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

JS:

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

$(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--;
    })
});

这不完全是对你问题的回答，而是关于你能做什么的建议

先决条件：test.php

test.php的输出将是

导致php构建_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'
        )
    )
);

告诉hte php脚本它应该用于药品项目，哪一个（145），它应该添加一些东西加上[]，这样你就可以添加（实际上）任意数量的项目。
那么一个像

<!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>

（是的，是的，编码关闭了……）

会导致

告诉您的php脚本在项目145中添加/附加两个描述

drug145.1

和

drug145.2

，在项目22中添加/附加这两个描述

下面是一个使用html/javascript/jquery的示例


...
adddrugdesc{
左边距：1米；
光标：指针；
背景颜色：玉米丝；
边框：1px纯银；
}
药物A
药物B
药物C
药物D
$（文档）.ready（函数（）{
var dl=$（“.druglist”）；
//向每个字段集/图例添加某种编辑/添加按钮
dl.find（“字段集图例”）。每个（函数（x）{
$（this.append（'adddescription'）；
});
//为所有编辑/添加按钮添加事件处理程序
dl.on（'click'，'adddrugdesc'，函数（e）{
var me=$（this）；//这将是usr单击的span元素
var legend=me.parent（'legend'）；//这将是跨度所在的legend元素
var fset=legend.parent（'fieldset'）；//与legend相同
var drugid=legend.data（）['drugid']；//通过data（）访问元素的data-*属性并选择元素“drugid”
var newinput=$（''）；
newinput.attr（“名称”、“药物[”+药物ID+“][add][]”）；
fset.append（newinput）；
});
});

（为了让它“可以理解”，这有点冗长。而且……这只是一个例子。有些东西可能更漂亮、更健壮等等）

我如何阅读数组部分？var ref=$（'#ref_title'+str）.val（）；？在“PHP”下有一个文本，它可能是html输入元素的一部分，但不是PHP。请详细说明。确定其html sry。如果您添加一个提交按钮以允许提交表单，则条目将在PHP中作为数组

$\u POST['ref\u title']

提供。确定按钮将

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

$_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][]

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'
        )
    )
);

<!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>