我正在尝试构建一个用于创建其他表单的表单。我填写了所有信息，它创建了一个存储在数据库中的 json 字符串。 我已经构建了我的表单，并且能够动态添加多个表单字段。但是，我希望字段选项在下拉选择框中更改字段类型时更改。例如，如果我选择字段类型"text"，则只会显示"必填"复选框，但是如果我选择"选择"类型，则会出现"必填"复选框，并且会出现"选项"文本框。每个不同的选项都在自己的div 容器中。我不想只是简单地根据下拉选择隐藏和显示div，因为我不希望在提交表单时发布空文本框或复选框。
我对jQuery很陌生。我可以使用 html 模板吗？如果是这样呢？我希望从那以后。我很乐意进一步解释。
'
<?php echo validation_errors(); ?>
<?php echo form_open(); ?>
<div class="form-horizontal">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
<li role="presentation"><a href="#fields" aria-controls="fields" role="tab" data-toggle="tab">Fields</a></li>
<li role="presentation"><a href="#after_submit" aria-controls="after_submit" role="tab" data-toggle="tab">After Submit</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="html-container"></div>
<br>
<!-- GENERAL FORM INFO TAB -->
<div role="tabpanel" class="tab-pane active" id="general">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-5">
<?php echo form_input('name', set_value('name', $form->name), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="slug" class="col-sm-3 control-label">Slug:</label>
<div class="col-sm-5">
<?php echo form_input('slug', set_value('slug', $form->slug), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="send_button_text" class="col-sm-3 control-label">Send Button Text:</label>
<div class="col-sm-5">
<?php echo form_input('send_button_text', set_value('send_button_text', $form->send_button_text), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="save_entries" class="col-sm-3 control-label">Save Entries</label>
<div class="col-sm-5">
<label class="radio-inline">
<?php echo form_radio('save_entries', 'yes', set_value('save_entries', $form->save_entries)); ?> Yes
</label>
<label class="radio-inline">
<?php echo form_radio('save_entries', 'no', set_value('save_entries', $form->save_entries)); ?> No
</label>
</div>
</div>
<div class="form-group">
<label for="is_public" class="col-sm-3 control-label">Public</label>
<div class="col-sm-5">
<label class="radio-inline">
<?php echo form_radio('is_public', 'yes', set_value('is_public', $form->is_public)); ?> Yes
</label>
<label class="radio-inline">
<?php echo form_radio('is_public', 'no', set_value('is_public', $form->is_public)); ?> No
</label>
</div>
</div>
</div> <!-- //..end of 'general' tab panel -->
<!-- INPUT FIELDS TAB -->
<div role="tabpanel" class="tab-pane" id="fields">
<div class="repeat">
<div class="repeat-wrapper">
<div class="repeat-container">
<div class="repeat-template repeat-row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{row-count}}">
<h3 class="panel-title pull-left">
<span class="move"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></span>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{row-count}}" aria-expanded="true" aria-controls="collapse{{row-count}}">
Panel title
</a>
</h3>
<?php echo form_button('remove_field_button', '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove', 'class="remove btn btn-link pull-right"'); ?>
<div class="clearfix"></div>
</div>
<div id="collapse{{row-count}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{row-count}}">
<div class="panel-body">
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][name]" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-5">
<?php echo form_input('inputs[{{row-count}}][name]', '', 'class="form-control"'); ?>
</div>
</div>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][label]" class="col-sm-2 control-label">Label:</label>
<div class="col-sm-5">
<?php echo form_input('inputs[{{row-count}}][label]', '', 'class="form-control"'); ?>
</div>
</div>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][type]" class="col-sm-2 control-label">Type:</label>
<div class="col-sm-3">
<?php echo form_dropdown('inputs[{{row-count}}][type]', $types, '', 'class="form-control input_type" data-counter="{{row-count}}"'); ?>
</div>
</div>
<div id="input_required_{{row-count}}" class="form-group input-type-show-hide">
<div class="col-sm-offset-2 col-sm-5">
<div class="checkbox">
<label>
<?php echo form_checkbox('inputs[{{row-count}}][required]', 'yes', ''); ?>
<?php echo form_checkbox('inputs[{{row-count}}][required]', 'no', ''); ?> Required
</label>
</div>
</div>
</div>
<div id="input_options_{{row-count}}" class="row input-type-show-hide">
<div class="col-sm-offset-2 col-sm-10">
<table class="table repeat-wrapper">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div class="form-group">
<div class="col-sm-12">
<?php echo form_button('add_option_button', 'Add Option', 'class="add btn btn-link"'); ?>
</div>
</div>
</td>
<td></td>
</tr>
</tfoot>
<tbody class="repeat-container">
<tr class="form-inline repeat-template repeat-row">
<td>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][options][{{row-count}}][label]" class="sr-only">Label</label>
<div class="col-sm-6">
<?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][label]', '', 'class="form-control" placeholder="Label"'); ?>
</div>
</div>
</td>
<td>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][options][{{row-count}}][value]" class="sr-only">Value</label>
<div class="col-sm-6">
<?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][value]', '', 'class="form-control" placeholder="Value"'); ?>
</div>
</div>
</td>
<td>
<span class="remove">Remove</span>
</td>
</tr> <!-- //..end of repeat-template for options -->
</tbody> <!-- //..end of repeat-container for options -->
</table> <!-- //..end of repeat-wrapper for options -->
</div>
</div>
<div class="att_block_{{row-count}}"></div>
</div> <!-- //..end of panel body -->
</div> <!-- //..end of tabpanel -->
</div> <!-- //..end of panel div -->
</div> <!-- //..end of panel group -->
</div> <!-- //..end of repeat-template -->
</div> <!-- //..end of repeat-container -->
<div class="form-group">
<div class="col-sm-12">
<?php echo form_button('add_field_button', 'Add Another', 'class="add btn btn-link"'); ?>
</div>
</div> <!-- //..end of 'add another' form-group -->
</div><!-- //..end of repeat-wrapper -->
</div> <!-- //..end of repeat div -->
</div> <!-- //..end of 'fields' tab panel -->
<!-- AFTER SUBMIT TAB -->
<div role="tabpanel" class="tab-pane" id="after_submit">
<div class="form-group">
<label for="email_recipients" class="col-sm-3 control-label">Email Recipients:</label>
<div class="col-sm-5">
<?php echo form_input('email_recipients', set_value('email_recipients', $form->email_recipients), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_cc" class="col-sm-3 control-label">Email CC:</label>
<div class="col-sm-5">
<?php echo form_input('email_cc', set_value('email_cc', $form->email_cc), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_bcc" class="col-sm-3 control-label">Email BCC:</label>
<div class="col-sm-5">
<?php echo form_input('email_bcc', set_value('email_bcc', $form->email_bcc), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_subject" class="col-sm-3 control-label">Email Subject:</label>
<div class="col-sm-5">
<?php echo form_input('email_subject', set_value('email_subject', $form->email_subject), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_message" class="col-sm-3 control-label">Email Message:</label>
<div class="col-sm-6">
<?php echo form_textarea('email_message', set_value('email_message', $form->email_message), 'class="tinymce"'); ?>
</div>
</div>
<div class="form-group">
<label for="after_submit_text" class="col-sm-3 control-label">After Submit Text:</label>
<div class="col-sm-6">
<?php echo form_textarea('after_submit_text', set_value('after_submit_text', $form->after_submit_text), 'class="tinymce"'); ?>
</div>
</div>
<div class="form-group">
<label for="return_url" class="col-sm-3 control-label">Return URL:</label>
<div class="col-sm-5">
<?php echo form_input('return_url', set_value('return_url', $form->return_url), 'class="form-control"'); ?>
</div>
</div>
</div> <!-- //..end of 'after_submit' tab panel -->
</div> <!-- //..end of tab-content -->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<?php echo form_submit('submit', 'Save', 'class="btn btn-default"'); ?>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
tinymce.init({
selector: ".tinymce",
plugins: "code",
toolbar: "undo redo | bold italic | bullist numlist | code",
menubar: false
});
$('.repeat').each(function() {
$(this).repeatable_fields({
wrapper: '.repeat-wrapper',
container: '.repeat-container',
row: '.repeat-row',
template: '.repeat-template',
row_count_placeholder: '{{row-count}}'
});
});
template = $("#test_html").clone();
template.appendTo(".html-container");
//$( ".html-container" ).append( $( "#test_html" ) );
$("body").on("change", ".input_type", function () {
});
});
</script>'
> 使用 jQuery hide() 方法隐藏您希望与表单一起提交的 DOM 部分，并使用remove()将它们完全从 DOM 中取出，从而阻止它们提交。
请参阅 jQuery remove 方法