<style>
#present_type,
#illustdownload_file_name,
#book_name,
#order_id,
#customer_id{
display:none;
}
input[name="contact[present_type]"]{
width: auto;
height: auto;
display: inline-block;
-webkit-appearance: auto;
}
</style>
<script>
$(function(){
$('#present_type').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#illustdownload_file_name').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#book_name').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#order_id').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#customer_id').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#ContactType').insertBefore($('div.table-layout > div:nth-of-type(1)'));
$('#ContactType').on('change', function(){
var ContactType = $('option:selected').val()
if(ContactType == 1) {
$('#customer_id').show();
$('#customer_id').css('display', 'flex');
$('#order_id').hide();
$('#book_name').hide();
$('#illustdownload_file_name').hide();
$('#present_type').hide();
} else if(ContactType == 2) {
$('#customer_id').hide();
$('#order_id').show();
$('#order_id').css('display', 'flex');
$('#book_name').hide();
$('#illustdownload_file_name').hide();
$('#present_type').hide();
} else if(ContactType == 3) {
$('#customer_id').hide();
$('#order_id').hide();
$('#book_name').show();
$('#book_name').css('display', 'flex');
$('#illustdownload_file_name').hide();
$('#present_type').hide();
} else if(ContactType == 4) {
$('#customer_id').hide();
$('#order_id').hide();
$('#book_name').hide();
$('#illustdownload_file_name').show();
$('#illustdownload_file_name').css('display', 'flex');
$('#present_type').hide();
} else if(ContactType == 7) {
$('#customer_id').hide();
$('#order_id').hide();
$('#book_name').hide();
$('#illustdownload_file_name').hide();
$('#present_type').show();
$('#present_type').css('display', 'flex');
} else {
$('#customer_id').hide();
$('#order_id').hide();
$('#book_name').hide();
$('#illustdownload_file_name').hide();
$('#present_type').hide();
}
});
{% if form.ContactType.vars.value == 1 %}
$('#customer_id').show();
$('#customer_id').css('display', 'flex');
{% endif %}
{% if form.ContactType.vars.value == 2 %}
$('#order_id').show();
$('#order_id').css('display', 'flex');
{% endif %}
{% if form.ContactType.vars.value == 3 %}
$('#book_name').show();
$('#book_name').css('display', 'flex');
{% endif %}
{% if form.ContactType.vars.value == 4 %}
$('#illustdownload_file_name').show();
$('#illustdownload_file_name').css('display', 'flex');
{% endif %}
{% if form.ContactType.vars.value == 7 %}
$('#present_type').show();
$('#present_type').css('display', 'flex');
{% endif %}
});
</script>
<div class="tr" id="ContactType">
<div class="th w3">
{{ form_label(form.ContactType, 'お問い合わせ項目', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.ContactType) ? ' error' }}">
{{ form_widget(form.ContactType) }}
{{ form_errors(form.ContactType) }}
</div>
</div>
</div>
<div class="tr" id="customer_id">
<div class="th w3">
{{ form_label(form.customer_id, '顧客コード', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.customer_id) ? ' error' }}">
{{ form_widget(form.customer_id) }}
{{ form_errors(form.customer_id) }}
</div>
</div>
</div>
<div class="tr" id="order_id">
<div class="th w3">
{{ form_label(form.order_id, '注文No', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.order_id) ? ' error' }}">
{{ form_widget(form.order_id) }}
{{ form_errors(form.order_id) }}
</div>
</div>
</div>
<div class="tr" id="book_name">
<div class="th w3">
{{ form_label(form.book_name, '書籍名', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.book_name) ? ' error' }}">
{{ form_widget(form.book_name) }}
{{ form_errors(form.book_name) }}
</div>
</div>
</div>
<div class="tr" id="illustdownload_file_name">
<div class="th w3">
{{ form_label(form.illustdownload_file_name, 'ダウンロードしたい月', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.illustdownload_file_name) ? ' error' }}">
{{ form_widget(form.illustdownload_file_name) }}
{{ form_errors(form.illustdownload_file_name) }}
</div>
</div>
</div>
<div class="tr" id="present_type">
<div class="th w3">
{{ form_label(form.present_type, '送付方法', { 'label_attr': { 'class': 'ec-label' }}) }}
</div>
<div class="td w9">
<div class="ec-input{{ has_errors(form.present_type) ? ' error' }}">
{{ form_widget(form.present_type) }}
{{ form_errors(form.present_type) }}
</div>
</div>
</div>