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

Question

I'm currently trying to add a plus and minus feature to a webpage in a CMS. The plus would add a clone of an input field that would appear on the webpage. The minus would delete the respective input field. So far i have been able to manually add fields through the code of the webpage itself. The added ones are basically a complete copy and paste of the original field. The only problem with this is when i select an option for the additional ones it does not stick upon page refresh. All the fields just equal whichever the last one was set to.

Here is the relevant code:

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

FYI this is not my original code. "Customer Type1" is the original field 2 and 3 are just copy and pastes. If someone can help me have it so that each one will have its own unique value that would be helpful.

To achieve the desired functionality i suspect i will link it to a JavaScript file to create the dynamic + and minus functionality. If someone can direct me to how to achieve that in JavaScript from a conceptual basis that would be appreciated.

Also here is a screenshot of the whole page so you can get a better idea of what is going on.

So in short here are my questions in priority order:

• How can I create additional fields that will not be wiped away upon page refresh and will be successfully applied.
• What is the best way to acheive the plus and minus functionality.

Answer 1

This can be achieved in various different ways. But, let me propose you an approach which uses jQuery and localStorage .

Let's say you have an HTML input block which looks like this,

When you click on Add button, it duplicates the input block with its values, like this,

And the remove button, will remove the entire block (with Add and Remove buttons).

If I got your question clear (if not, with a little tweak) you can make use of browser's localStorage to keep these actions (rows and data) saved and retrieve it while refreshing the page. So, the previously added rows and data won't get lost.

A sample HTML (I am using Bootstrap4 in this sample),

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

A quick walkthrough,

1. If items not found in the localStorage or items length is zero, it will bring a default row, so users can add more rows. (function initDefaultInputRow ).
2. Every time user presses Add or Remove buttons, it scans the dom and add / remove to / from localStorage the current instance (I am assuming the value of input field is required so, I am adding that to the localStorage item).
3. When the user refreshes page, it checks for items key in the localStorage and iterate through and fill the page with input field blocks with values (functions prepareInputFields() and initDefaultInputRow() .

4. Function getAllInputs() updates the current scenario (input rows and its values) to the 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); } 

   A fully working HTML file (combining above HTML and JS block). You can copy and paste following code into a HTML file and see it by yourself.

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

I am giving you just a start so you can understand the concept / idea and move on with your very specific requirments. I used localStorage as an example. You can use Cookies if you like. I hope this helps you somewhat deciding which direction you need to move.

Cheers