1
我正在嘗試創建用於創建其他表單的表單。我填寫所有信息，並創建一個存儲在數據庫中的json字符串。我有我的表單構建，我可以動態地添加多個表單域。不過，我希望字段選項可以在下拉選擇框中更改字段類型時進行更改。例如，如果我選擇字段類型「文本」，則只會顯示「必填」複選框，但如果我選擇「選擇」類型，則會出現「必需」複選框，並顯示「選項」文本框。每個不同的選項都在他們自己的div容器中。我不想只根據下拉選擇來隱藏和顯示div，因爲我不想在提交表單時發佈空的文本框或複選框。根據下拉框在添加和刪除HTML之間切換
我對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>'
我們對此深感抱歉......我作出改變......甚至沒去想它 – speck1990