新: 更改ID和名称有效,但如果有更多输入怎么办? codepen只有一个,但真正的项目会有几个,即component_date,component_owner,我如何设置这些输入也是唯一的?
我有这种形式,其中有一部分可以复制。复制的部分有几个输入需要是唯一的。目前,当复制名称和ID更改时,我想保留现有名称和 id,只需添加一个递增的数字。目前,可复制的输入会发生变化。因此,最初,name =“component_name”和id =“input-name在复制时,新输入具有名称componentName_0 componentID_0。我希望初始输入具有_0,然后每个复制的输入具有下一个增量。因此组件2将具有名称=“component_1 id =”input-name_1,依此类推。
基本上我想使用原始组件id和名称,但只是为每个添加一个递增的数字。另外,如果有一个数字(0?)已经贴在它上面会很好。目前,当复制时,名称和ID从最初的变化 这是一个简化的codepen来显示我的意思:
https://codepen.io/anon_guy/pen/VMZWWW?editors=1010
HTML:
<div class="wrapper">
<div class="panel panel-default" id="add-components">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_add_component; ?></h3>
</div>
<div class="panel-body" id="addon">
<div class="tab-content">
<div class="tab-pane active" id="tab-general">
<?php foreach ($languages as $language) { ?>
<div class="tab-pane" id="language<?php echo $language['language_id']; ?>">
<div class="form-group required">
<div class= "row">
<div class="col-sm-8 col-sm-push-1 form-group required" >
<label for="input-name<?php echo $language['language_id']; ?>"><?php echo $entry_name; ?></label>
<input type="text" name="component_name" placeholder="<?php echo $entry_name; ?>" id="input-name<?php echo $language['language_id']; ?>" class="form-control" value="<?php echo $component_name; ?>" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-2 col-sm-push-1 form-group required">
<div class="campaign-group form-group">
<div class="dropdown">
<button class="btn btn-primary pull-left dropdown-toggle" type="button" id="button-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_type;?><span class="caret"></span></button>
<ul class="campaign-form-type dropdown-menu">
<li class="campaign-dropdown-list">Direct Mail</li>
<li class="campaign-dropdown-list">Email</li>
<li class="campaign-dropdown-list">Event</li>
<li class="campaign-dropdown-list">Text Message</li>
<li class="campaign-dropdown-list">Letter</li>
<li class="campaign-dropdown-list">Postcard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-beginning"><?php echo $entry_campaign_start_date; ?></label>
<div class="input-group date required">
<input type="text" name="component_date" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-component_date" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_date_starting; ?></label>
<?php } ?>
</div>
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" ><?php echo $entry_owner; ?></label>
<select name="component_owner" id="component_owner">
<?php foreach ($users as $user) { ?>
<option value="<?php echo $user['username']; ?>"><?php echo $user['username']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<!--label class="control-label" for="input-code"><?php echo $entry_code; ?></label-->
<div class="input-code required">
<input type="text" name="campaign_code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-campaign_code" class="form-control" readonly />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
</div>
JS:
<script type="text/javascript">
let cloneList = [];
var i = 0;
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
clonedNode.id = i++;
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
</script>
答案 0 :(得分:1)
在php上使用循环,跟踪计数器,并将计数器与名称或ID连接。
E.g
for($i=0; $i<5; $i++){
echo '<div id="myID_"' . $i . 'andSoOn>'
}
答案 1 :(得分:1)
看起来你想通了。我相信,appendChild
在您的CodePen中拼写错误。对于标识为0
的初始组件,您可以在HTML中将组件的名称和ID更改为componentID_0
,然后设置var i = 1
。