[英]Add or delete input fields dynamically in a php file
我目前正在嘗試在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的方法，將不勝感激。
另外，這里是整個頁面的屏幕截圖，因此您可以更好地了解正在發生的事情。
簡而言之，這是我按優先順序排列的問題：
這可以通過各種不同的方式來實現。 但是，讓我為您提出一種使用jQuery和localStorage 。
假設您有一個HTML輸入塊，看起來像這樣，
當您單擊“添加”按鈕時，它將復制輸入塊及其值，如下所示，
刪除按鈕將刪除整個塊（帶有“添加”和“刪除”按鈕）。
如果我的問題很清楚（如果沒有，請稍作調整），則可以利用瀏覽器的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塊
快速演練
items或items長度為零，則將顯示默認行，因此用戶可以添加更多行。 （函數initDefaultInputRow ）。 Add或“ Remove按鈕時，它都會掃描dom並將當前實例添加到localStorage或從本地存儲中刪除（我假設輸入字段的value是必需的，因此我將其添加到localStorage項中）。 items ，並遍歷頁面，並使用值（函數prepareInputFields()和initDefaultInputRow()輸入字段塊填充頁面。 函數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。 我希望這可以幫助您確定需要朝哪個方向移動。
干杯
動態添加輸入字段，但字段由外部 PHP 函數生成
[英]Add input fields dynamically but fields are generated by external PHP functions
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.