0

La idea es que si pulso tanto los operadores de id 25 y 26 se cambie el inputtype del input value. ¿Cómo hago con este js?

function changevaluefield(e){
    if (e.value == 25 || e.value == 26){
        if (document.getElementById(e.id.replace("operator","value")).type != "file"){
        document.getElementById(e.id.replace("operator","value")).classList.remove("form-control");
        document.getElementById(e.id.replace("operator","value")).classList.add("custom-file-input");
        document.getElementById(e.id.replace("operator","value")).type = "file";
        }
    }else{
        if (document.getElementById(e.id.replace("operator","value")).type != "text"){
            document.getElementById(e.id.replace("operator","value")).classList.remove("custom-file-input");
            document.getElementById(e.id.replace("operator","value")).classList.add("form-control");
            document.getElementById(e.id.replace("operator","value")).type = "text";
        }

    }
}

La idea es de cierto modo hacer esto dentro del php que he creado donde tengo un formulario personalizado y hacerlo mediante eventos, este es el formulario actual:

<?php

namespace App\Form\Type;

class FiltercampaignvalueType extends AbstractType
{
    private $campaign;
    private $filtergroup;
    private $class;

    public function buildForm(FormBuilderInterface $builder, array $options)
    {

        $this->campaign = $options['attr']['campaign'];
        $this->filtergroup = $options['attr']['filtergroup'];
        $this->class = 'row';
        $builder->add('fieldcampaign', EntityType::class, array(
                        'query_builder' => function (EntityRepository $er) {
                                return $er->createQueryBuilder('u')
                                ->where('u.campaign = :campaign')
                                ->setParameter('campaign', $this->campaign)
                                ->orderBy('u.name', 'ASC');
                            },
                        'class' => Fieldcampaign::class,
                        'choice_label' => 'name',
                        'choice_value' => 'id',
                        'required' => true,
                        'label' => false,
                        'placeholder' => 'Choose a field',
                        'attr' => array(
                                'class' => 'fieldcampaign_select',
                                'onchange' => 'return preseclet(this);'
                        )
                    )
                );

        $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
                $data = $event->getData();
                $form = $event->getForm();

                if (!$data || null === $data->getId()) {
                        $form->add('operator', EntityType::class, array(
                                'class' => Operator::class,
                                'choice_label' => 'name',
                                'choice_value' => 'id',
                                'required' => true,
                                'label' => false,
                                'placeholder' => 'Choose an operator'
                                )
                        );
                }
        });

        $formModifier = function (FormInterface $form, Fieldtype $type = null) {
   
            $form->add('operator', EntityType::class, array(
                                'class' => Operator::class,
                                'query_builder' => function (EntityRepository $er) use ($type) {
                                        return $er->createQueryBuilder('u')
                                        ->where('u.fieldtype = :fieldtype')
                                        ->setParameter('fieldtype', $type);
                                        //->orderBy('u.name', 'ASC');
                                },
                                'choice_label' => 'name',
                                'choice_value' => 'id',
                                'required' => true,
                                'label' => false,
                                'placeholder' => 'Choose an operator',
                                'attr' => array(
                                    'class' => 'valuefield',
                                    'onchange' => 'return changevaluefield(this);'
                                )
                                )
                        );

        };

        $builder->add('value', TextType::class, array (
                        'label' => 'Value',
                        'required' => false,
                        'label' => false,
                        'attr' => array(
                                'placeholder' => 'Insert value')
                    )
                );
        $builder->add('filtercampaigngroup', EntityType::class, array(
                        'query_builder' => function (EntityRepository $er) {
                                return $er->createQueryBuilder('u')
                                ->where('u.id = :id')
                                ->setParameter('id', $this->filtergroup)
                                ->orderBy('u.name', 'ASC');
                            },
                        'class' => Filtercampaigngroup::class,
                        'label' => false,
                        'choice_label' => 'name',
                        'choice_value' => 'id',
                        'required' => true,
                        'attr' => array(
                            'readonly' => true,
                        )
                    )
                );
        $value="";
        $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) use ($formModifier) {
                
                $data = $event->getData();

                if($data !== null) {
                        if($data->getOperator() !== null) {
                            if ($data->getOperator()->getId() == 26 || $data->getOperator()->getId() == 25){
                                $value="file";
                                /*   $builder->add('value', TextType::class, array (
                                           'label' => 'Value',
                                           'required' => false,
                                           'label' => false,
                                           'attr' => array(
                                               'placeholder' => 'Insert value')
                                       )
                                   );*/
                            }else{
                                $value = "number";
                            }
                                $formModifier($event->getForm(), $data->getOperator()->getFieldtype());
                        } else {
                                $formModifier($event->getForm(), null);
                        }
                } else {

                        $formModifier($event->getForm(), $data);
                }
                
            }
        );
        if ($value == "file"){
            $builder->add('value', FileType::class, array (
                    'label' => 'Value',
                    'required' => false,
                    'label' => false,
                    'attr' => array(
                        'placeholder' => 'Insert File')
                )
            );
        }else{
            $builder->add('value', TextType::class, array (
                    'label' => 'Value',
                    'required' => false,
                    'label' => false,
                    'attr' => array(
                        'placeholder' => 'Insert value')
                )
            );
        }

        $builder->get('fieldcampaign')->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) use ($formModifier) {
               
                $type = $event->getForm()->getData()->getType();

                $formModifier($event->getForm()->getParent(), $type);
            }
        );

    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Filtercampaign::class,
            'csrf_protection' => false,
        ]);
    }

}

Aparte de lo que he puesto me gustaría también poder hacer que persista la información cuando hago los cambios tanto de el filtercampaign como de operator si es el mismo tipo el value. Ahora mismo busco el poder hacer lo que hace el javascript pero mediante eventos de formulario de symfony: -Cambiar el type del input value a File cuando el input operator tiene id 25 o 26 y que vuelva a ser Text si es distinto a 25 y 26 y a poder ser que cuando cambio fieldcampaign no recargue todo el formulario dejando vacio el input value por ejemplo.

4
  • 1
    "no sé qué más escribir" <-- por ejemplo, podrías indicar cuál es el resultado esperado. No es claro qué buscas con la pregunta. O cuál es el error con el código que muestras. O qué pasa.
    – Alfabravo
    Commented el 4 oct. 2022 a las 14:14
  • Ahora mismo busco el poder hacer lo que hace el javascript pero mediante eventos de formulario de symfony: -Cambiar el type del input value a File cuando el input operator tiene id 25 o 26 y que vuelva a ser Text si es distinto a 25 y 26
    – Lennard
    Commented el 4 oct. 2022 a las 14:16
  • Como te han dicho, en lugar de introducir ruido a la pregunta, indica el resultado esperado y el obtenido actualmente. Pulsa en editar para mejorarla.
    – padaleiana
    Commented el 4 oct. 2022 a las 14:18
  • @padaleiana lo he vuelto a editar cualquier cosa mal puesta o que querais que explique mejor me decis, gracias
    – Lennard
    Commented el 4 oct. 2022 a las 14:20

1 respuesta 1

0

Normalmente el cambio de input type lo uso en campos como password cuando se requiere permitir al usuario evaluar su propia contraseña:

function toglePassword()
{
  let e = document.getElementById("password");
  if (e.type === "password") {
    e.type = "text";
  } else {
    e.type = "password";
  }
}
<input type="password" id="password" value="">
<input type="button" value="Ver Contraseña" onclick="toglePassword()">

como podras ver simplemente se trabaja con la propiedad type del elemento.

15
  • si ves la parte de js lo tengo asi pero lo quiero cambiar ya que si lo hago asi al poner el type file se queda en blanco ya que necesita de un label si no me equivoco
    – Lennard
    Commented el 4 oct. 2022 a las 15:25
  • no se si se pueden compartir imagenes por aqui si no te lo enseñaria
    – Lennard
    Commented el 4 oct. 2022 a las 15:27
  • usa imgur o puedes editar y pegar la captura en tu post
    – user46896
    Commented el 4 oct. 2022 a las 15:29
  • imgur.com/LRLrXVP el hueco vacio es lo que deberia ser un input typeFile
    – Lennard
    Commented el 4 oct. 2022 a las 15:36
  • no me queda claro ahora el contexto lo estas enrredando: tienes un input y ese input tiene un type, que type tiene y a cual quieres cambiarlo? en que evento quieres cambiarlo?
    – user46896
    Commented el 4 oct. 2022 a las 15:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.