form display image depending on choice type-CodePudding

im learning symfony. I'm trying to display an image when i select a choice from dropdown menu in the form.

this is my form

$collection = array(
'jewel1' => 'jewel1.jpg',
'jewel2' => 'jewel2.jpg',
.
.
.
)
$builder
        ->add('product_group_id', HiddenType::class,['data'=> $productId])
        ->add('jewel_name', TextType::class)
        ->add('jewel_rotation', IntegerType::class)
        ->add('price', IntegerType::class)
        ->add('image_name', ChoiceType::class, [
            'label' => 'Jewel Image',
            'required' => false,
            'choices' => $collection
        ])
        ->add('save', SubmitType::class, ['label' => 'Save']);

and this is my twig (i don't know what to do yet)

{% block javascript %}
    <script>
        $(function() {
            $('form.image_name.vars.value').change(
                var tt = $(this).val();
                alert(tt);
            )

        })
    </script>
{% endblock %}
{% block main %}
{{form_start(form)}}

{{form_widget(form)}}
<div >
    {% set path = 'customRing/jewel/' ~ form.image_name.vars.value ~%}
    {{form.image_name.vars.value}}
    <img src="{{ asset(path, 'save_image') }}" width="200" height="200"/>
</div>
{{form_end(form)}}
{% endblock %}

so when i select one choice in the dropdown menu, the preview image will be display so i can press the submit button with the right image. however, I have no idea how i can get a changed value from choicetype before sumbit.

CodePudding user response：

You can get the changed value of the select via javascript and display it in the img tag

<script>
    document.getElementById('YOUR_IMAGE_SELECT').addEventListener('change', function() {
        document.getElementById('YOUR_IMG').src = "customRing/jewel/"   this.value;
    });
</script>