在php文件中动态添加或删除输入字段

时间：2018-10-29 05:24:23

标签： javascript php html css

我目前正在尝试在CMS的网页中添加正负功能。加号将添加将显示在网页上的输入字段的副本。减号将删除相应的输入字段。到目前为止，我已经能够通过网页本身的代码手动添加字段。添加的内容基本上是原始字段的完整副本和粘贴。唯一的问题是，当我为其他选项选择一个选项时，它不会在页面刷新时停留。所有字段均相等，即最后一个字段为准。

以下是相关代码：

 <?php 



if ( ! module_config::can_i( 'edit', 'Settings' ) ) {
    redirect_browser( _BASE_HREF );
}

if ( isset( $_REQUEST['extra_default_id'] ) && $_REQUEST['extra_default_id'] ) {
    $show_other_settings = false;
    $extra_default       = module_extra::get_extra_default( $_REQUEST['extra_default_id'] );
?>
<form action="" method="post">
<input type="hidden" name="_process" value="save_extra_default">
<input type="hidden" name="extra_default_id" value="<?php echo (int) $_REQUEST['extra_default_id']; ?>"/>
<?php
$fieldset_data = array(
    'heading'  => array(
        'type'  => 'h3',
        'title' => 'Edit Extra Default Field',
    ),
    'class'    => 'tableclass tableclass_form tableclass_full',
    'elements' => array(
        array(
            'title' => 'Name/Label',
            'field' => array(
                'type'  => 'text',
                'name'  => 'extra_key',
                'value' => $extra_default['extra_key'],
            ),
        ),
        array(
            'title' => 'Table',
            'field' => array(
                'type'  => 'html',
                'value' => $extra_default['owner_table'],
            ),
        ),
    )
);
switch($extra_default['owner_table']){
    case 'customer':

        $fieldset_data['elements'] [] = array(
            'title' => 'Customer Type1',
            'field' => array(
                'type'    => 'select',
                'name'    => 'owner_table_child',
                'value'   => $extra_default['owner_table_child'],
                'options' => module_customer::get_customer_types(),
                'options_array_id' => 'type_name',
                'blank'   => ' - All - ',
                'help'    => 'Default will display the extra field when opening an item (eg: opening a customer). If a user can view the customer they will be able to view the extra field information when viewing the customer. Public In Column means that this extra field will also display in the overall listing (eg: customer listing). More options coming soon (eg: private)',
            ),
        );

        $fieldset_data['elements'] [] = array(
            'title' => 'Customer Type2',
            'field' => array(
                'type'    => 'select',
                'name'    => 'owner_table_child2',
                'value'   => $extra_default['owner_table_child2'],
                'options' => module_customer::get_customer_types(),
                'options_array_id' => 'type_name',
                'blank'   => ' - All - ',
                'help'    => 'Default will display the extra field when opening an item (eg: opening a customer). If a user can view the customer they will be able to view the extra field information when viewing the customer. Public In Column means that this extra field will also display in the overall listing (eg: customer listing). More options coming soon (eg: private)',
            ),
        );

        $fieldset_data['elements'] [] = array(
            'title' => 'Customer Type3',
            'field' => array(
                'type'    => 'select',
                'name'    => 'owner_table_child3',
                'value'   => $extra_default['owner_table_child3'],
                'options' => module_customer::get_customer_types(),
                'options_array_id' => 'type_name',
                'blank'   => ' - All - ',
                'help'    => 'Default will display the extra field when opening an item (eg: opening a customer). If a user can view the customer they will be able to view the extra field information when viewing the customer. Public In Column means that this extra field will also display in the overall listing (eg: customer listing). More options coming soon (eg: private)',
            ),
        );



        break;
}

仅供参考，这不是我的原始代码。 “客户类型1”是原始字段2，而字段3仅是复制和粘贴。如果有人可以帮助我，让每个人都有自己独特的价值，那将是有帮助的。

为实现所需的功能，我怀疑我会将其链接到JavaScript文件以创建动态+和减号功能。如果有人可以指导我从概念的角度讲如何用JavaScript实现这一目标，那么将不胜感激。

这也是整个页面的屏幕截图，因此您可以更好地了解正在发生的事情。

enter image description here

简而言之，这是我的优先顺序问题：

  • 如何创建其他字段，这些字段在刷新页面后不会消失，并且可以成功应用。
  • 实现加减功能的最佳方法是什么。

1 个答案:

答案 0 :(得分：0)

这可以通过各种不同的方式来实现。但是，让我为您提出一种使用jQuery和localStorage的方法。

假设您有一个HTML输入块，看起来像这样，

enter image description here

当您单击“添加”按钮时，它将复制输入块及其值，就像这样，

enter image description here

和删除按钮，将删除整个块（带有“添加”和“删除”按钮）。

如果我的问题很清楚（如果没有，请稍作调整），则可以使用浏览器的localStorage保留这些操作（行和数据），并在刷新页面时将其检索。因此，先前添加的行和数据不会丢失。

示例HTML （在此示例中，我正在使用Bootstrap4）

<div class="container multi-input-area" style="width: 20%;">
        <div class="row p-3">
            <div class="col-12">
                <input type="text" name="inputfield[]" class="form-control" value=""/>              
                <button type="button" class="btn btn-primary add-btn">Add</button>              
                <button type="button" class="btn btn-secondary remove-btn">Remove</button>
            </div>
        </div>      
    </div>

JavaScript块

快速演练

  1. 如果在localStorage中找不到items或items的长度为零，它将带来一个默认行，因此用户可以添加更多行。 （功能initDefaultInputRow）。
  2. 每次用户按下Add或Remove按钮时，它都会扫描dom并将当前实例添加到localStorage或从localStorage中删除（我假设输入字段为value因此，我将其添加到localStorage项目中。
  3. 当用户刷新页面时，它将检查localStorage中的items键，并遍历页面并用值（函数prepareInputFields()和initDefaultInputRow()的输入字段块填充页面。
    4. li>

  4. 函数getAllInputs()将当前方案（输入行及其值）更新到localStorage。

    var items = [];
$(document).ready(function(){
    prepareInputFields();

    $(document).on('click', '.add-btn', function(){                                 
        $(this).closest('.row').clone().appendTo(".multi-input-area");
        getAllInputs();
    });

    $(document).on('click', '.remove-btn', function(){              
        $(this).closest('.row').remove();
        getAllInputs();
    });
});

function getAllInputs() {
    items = [];
    $('.multi-input-area .row').each(function (){               
        var inputFieldVal = $(this).find('input').val();
        var itemDetails = { 'value' : inputFieldVal };
        items.push(itemDetails);                
    });         
    localStorage.setItem('items', JSON.stringify(items));
}

function prepareInputFields() {
    var lsItems = localStorage.getItem('items');
    if (lsItems !== null) {
        jsDecode = JSON.parse(lsItems);
        var arrayLength = jsDecode.length;
        if (arrayLength === 0) {
            initDefaultInputRow();
        } else {
            var newHtml = '';
            for (var i = 0; i < arrayLength; i++) {
                var value = jsDecode[i].value;
                newHtml += '<div class="row p-3"><div class="col-12">';
                newHtml += '<input type="text" name="inputfield[]" class="form-control" value="'+ value +'"/>' +
                            '<button type="button" class="btn btn-primary add-btn">Add</button>' + 
                            '<button type="button" class="btn btn-secondary remove-btn">Remove</button>';
                newHtml += '</div></div>';

            }
            $('.multi-input-area').html(newHtml);       
        }                       
    } else {
        initDefaultInputRow();
    }
}

function initDefaultInputRow() {
    var html = '<div class="row p-3"><div class="col-12"><input type="text" name="inputfield[]" class="form-control" value=""/>';
        html += '<button type="button" class="btn btn-primary add-btn">Add</button>';
        html += '<button type="button" class="btn btn-secondary remove-btn">Remove</button></div></div>';
    $('.multi-input-area').html(html);
}

    功能完备的HTML文件（在HTML和JS块上方结合使用）。您可以将以下代码复制并粘贴到HTML文件中，然后亲自查看。

    <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
    <div class="container multi-input-area" style="width: 20%;">
        <div class="row p-3">
            <div class="col-12">
                <input type="text" name="inputfield[]" class="form-control" value=""/>              
                <button type="button" class="btn btn-primary add-btn">Add</button>              
                <button type="button" class="btn btn-secondary remove-btn">Remove</button>
            </div>
        </div>      
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
    var items = [];
    $(document).ready(function(){
        prepareInputFields();

        $(document).on('click', '.add-btn', function(){                                 
            $(this).closest('.row').clone().appendTo(".multi-input-area");
            getAllInputs();
        });

        $(document).on('click', '.remove-btn', function(){              
            $(this).closest('.row').remove();
            getAllInputs();
        });
    });

    function getAllInputs() {
        items = [];
        $('.multi-input-area .row').each(function (){               
            var inputFieldVal = $(this).find('input').val();
            var itemDetails = { 'value' : inputFieldVal };
            items.push(itemDetails);                
        });         
        localStorage.setItem('items', JSON.stringify(items));
    }

    function prepareInputFields() {
        var lsItems = localStorage.getItem('items');
        if (lsItems !== null) {
            jsDecode = JSON.parse(lsItems);
            var arrayLength = jsDecode.length;
            if (arrayLength === 0) {
                initDefaultInputRow();
            } else {
                var newHtml = '';
                for (var i = 0; i < arrayLength; i++) {
                    var value = jsDecode[i].value;
                    newHtml += '<div class="row p-3"><div class="col-12">';
                    newHtml += '<input type="text" name="inputfield[]" class="form-control" value="'+ value +'"/>' +
                                '<button type="button" class="btn btn-primary add-btn">Add</button>' + 
                                '<button type="button" class="btn btn-secondary remove-btn">Remove</button>';
                    newHtml += '</div></div>';

                }
                $('.multi-input-area').html(newHtml);       
            }                       
        } else {
            initDefaultInputRow();
        }
    }

    function initDefaultInputRow() {
        var html = '<div class="row p-3"><div class="col-12"><input type="text" name="inputfield[]" class="form-control" value=""/>';
            html += '<button type="button" class="btn btn-primary add-btn">Add</button>';
            html += '<button type="button" class="btn btn-secondary remove-btn">Remove</button></div></div>';
        $('.multi-input-area').html(html);
    }
</script>
<body>

我只是一个开始，因此您可以了解概念/想法并继续进行非常具体的要求。我以localStorage为例。您可以根据需要使用Cookies。我希望这可以帮助您在某种程度上确定您需要朝哪个方向移动。

欢呼

相关问题
最新问题