【问题标题】:How to associate dynamically added input fields to parent element/id?如何将动态添加的输入字段关联到父元素/id?
【发布时间】:2016-06-11 12:08:17
【问题描述】:

我使用 bootstrap 和 jquery 设计了一个用户数据库系统。问题是,每当按下按钮时,它都会附加一个额外的字段供用户键入。

假设该字段的第一个数组的数组名称是ref_title[0] 按下追加按钮后,将出现另一个具有相同属性的文本字段,但数组值为ref_title[1]

但是在代码本身上,它只会显示ref_title[]。这没关系,因为任何新字段都会继续添加到数组ref_title[]。我说的对吗?

接下来点击保存更改按钮时,我将使用onclick="newdata('<?php echo $row['drug_id']; ?>')"将数据定向到js

'drug_id' 是唯一的数字,例如 1、2 或 3。

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

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

Onlick

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

【问题讨论】:

  • 如何读取数组部分? var ref = $('#ref_title'+str).val();?
  • 在“PHP”下,您有一个文本可能是 html 输入元素的一部分,但不是 php。请详细说明。
  • 好吧,它的 html 很抱歉
  • 如果您添加提交按钮以允许提交表单,则这些条目将在 PHP 中以数组 $_POST['ref_title'] 的形式提供。
  • 确定按钮将是 将进入 js var ref = $('#ref_title'+str).val();

标签: javascript php arrays


【解决方案1】:

不完全是对您问题的回答,而是对您可以做什么的建议。

先决条件: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][]

告诉 hte 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.1drug145.2 到项目 145 和 drug22.1 到项目 22。

下面是一个示例,您可以使用 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>

(保持“可理解”有点冗长。而且......这只是一个例子。有些东西可能更漂亮,更健壮等)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-05-07
    • 1970-01-01
    • 1970-01-01
    • 2014-02-25
    • 2019-05-21
    • 2020-01-12
    • 2013-07-26
    相关资源
    最近更新 更多