3

Como não tenho muita experiencia em javascript gostaria de saber como realizar a troca entre 2 campos ao clicar em um link com onclik

   Exemplo

  <a herf="#"  oncllik="">Mudar Campo</a>

   <input type"text" name="nome">  // Ativo <-----------|
                                                        |  Enverter
   <select name"nome">             // Escondido <-------|
   <option value=""></option>
   </select>

2 Respostas 2

3

Se isso é para um formulário que vai ser submetido para além de esconder convem desabilitar o campo para ele não ser submetido.

Repara que tens um erro em oncllik deve ser onclick com 1 L. Outra coisas que tens de ter nesse onclick="" é a função que corre. Por exemplo: onclick="subsituir()" onde substituir é uma função global. Eu prefiro fazer isso no JavaScript e não inline no HTML, por isso vou dar um ID a esse <a> e usar assim no exemplo em baixo.

No exemplo em baixo coloquei uma div.alternativos para ser mais seguro usar o seletor no .querySelector() e não correr o risco de selecionar outros inputs/selects da página.

Podes fazer assim usando JavaScript nativo:

document.getElementById('mudar').addEventListener('click', substituir);

    function substituir(e) {
        var input = document.querySelector('.alternativos input');
        var select = document.querySelector('.alternativos select');

        mudarEstado(input, !select.disabled);
        mudarEstado(select, select.disabled);
    }

    function mudarEstado(el, mostrar) {
        el.style.display = mostrar ? 'block' : 'none';  // mostra ou esconde
        if (mostrar) el.removeAttribute('disabled');    // ativa ou desativa
        else el.setAttribute('disabled', true);
    }

E o HTML, onde o select já tem disabled="true":

<a herf="#" id="mudar">Mudar Campo</a>

<div class="alternativos">
    <input type "text" name="nome" />
    <select name="nome" disabled="true">
        <option value="">Escolha 1</option>
    </select>
</div>

Exemplo: http://jsfiddle.net/qq9w1c86/

Se quiseres fazer a transição mais suave podes fazer uma animação com CSS, usando transition: opacity e aplicando o visibility no final da animação com setTimeout / JavaScript.

Exemplo: http://jsfiddle.net/qq9w1c86/2/

Se quiseres fazer isso em multiplos casos sugiro usares um data-index por exemplo, assim guardas na acora a informaçõ de qual o grupo que deve mudar.

O JS é praticamente o mesmo, só mudando para:

function substituir(e) {
    var index = this.dataset.index - 1;
    var grupo = document.querySelectorAll('.alternativos')[index];
    var input = grupo.querySelector('input');
    var select = grupo.querySelector('select'); 

Exemplo: http://jsfiddle.net/8jhL4ao4/

3
  • Perfeito... era isso mesmo só que tentei colocar em mais em 1 campo e ta dando conflito oque devo esta fazendo de errado jsfiddle.net/fabioo7/z8n92c49 17/05/2015 às 14:04
  • @FabioHenrique ok, 2 min e envio outra versão.
    – Sergio
    17/05/2015 às 14:18
  • @FabioHenrique não dupliques código dessa maneira. Isso dá muito trabalho a manter. Aqui está uma versão com o que queres: jsfiddle.net/8jhL4ao4 vou juntar à resposta também
    – Sergio
    17/05/2015 às 14:32
1

Segue outro exemplo para responder a pergunta duplicada: Alterar option de um select via javascript

 <?php
    if($_POST) {

        if (isset($_POST['grupo'])) {
            $grupo = $_POST['grupo'];

            if (in_array($grupo, array('A',''))) {
               $return = array(
                  array('id'=>'B','nome'=>'grupo B'),
                  array('id'=>'T','nome'=>'grupo T'),
                );
            }

            if (in_array($grupo, array('B','B1','B2','B3'))) {
               $return = array(
                  array('id'=>'T1','nome'=>'Opção 1 grupo B'),
                  array('id'=>'T2','nome'=>'Opção 2 grupo B'),
                  array('id'=>'T3','nome'=>'Opção 3 grupo B'),
                );
            }

            if (in_array($grupo, array('T','T1','T2','T3'))) {
               $return = array(
                  array('id'=>'B1','nome'=>'Opção 1 grupo T'),
                  array('id'=>'B2','nome'=>'Opção 2 grupo T'),
                  array('id'=>'B3','nome'=>'Opção 3 grupo T'),
                );
            }
       echo json_encode($return);  
       exit();
       }
    }


    ?>


    <a href="javascript:void(0)" id="post_x">Abrir opções</a>

    <div id="select_a">Grupos: <select id="post_a"></select></div>
    <div id="select_b">Grupos nivel 1:<select id="post_b"></select></div>
    <div id="select_c">Grupos nivel 2:<select id="post_c"></select></div>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>

    $(function(){
      $('#select_a,#select_b,#select_c').hide();
        $('#post_x').on('click', function(){
           var valor = 'A';
           carregarDados('<?php echo $_SERVER["SCRIPT_NAME"]?>', valor, 'a');

            if(valor == '') {
                  $('#select_a').hide();
             } else {
                  $('#select_a').show();
             }
        });
       $('#select_a select').on('change', function() {
          var valor = $(this).val();
             if(valor == '') {
                  $('#select_b').hide();
             } else {
                  $('#select_b').show();
             }
           carregarDados('<?php echo $_SERVER["SCRIPT_NAME"]?>', valor, 'b');

        });
       $('#select_b select').on('change', function() {
            var valor = $(this).val();

             if(valor == '') {
                  $('#select_b').hide();
             } else {
                  $('#select_b').show();
             }
           carregarDados('<?php echo $_SERVER["SCRIPT_NAME"]?>', valor, 'c');
            $('#select_c').show();
        });

        $('#select_c select').on('change', function() {
            var valor = $(this).val();

             if(valor == '') {
                  $('#select_c').hide();
             } else {
                  $('#select_c').show();
                   alert('Submeter form com valor: '+valor);
             }

        });

    });

    function carregarDados(url, grupo, id_select) {

    var data = {
      grupo:grupo
    };
        $.post(url,data,function(e) {
        var options = [];
     var default_option = '<option value="" selected>Selecione...</option>';
        var grupo = jQuery.parseJSON(e);

           for(var i in grupo){
              options[i] = '<option value="' + grupo[i].id + '">'
                        + grupo[i].nome + 
                      '</option>';
           }
                 var opc = options.join("\n");
            var selects = [
            default_option, 
            opc].join("");
             $('#post_'+id_select).html(selects);
        });

    }

    </script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .