Show a div with jQuery

Navigation
1

I'm trying to show two divs ( container-imagem-upload , container-tipo-video ), but it did not work. It is showing div and disappearing.

CSS 

    .container-tipo-video {margin-top: 50px; display: none;}
    .container-tipo-video input{text-align: center;}
    .container-tipo-video video{margin-top: 30px;}

    .container-imagem-upload{display: none;}

HTML 

    <div id="center">
        <div id="selecionar">
            <h1>Selecione o tipo</h1>
            <form>
                <input type="radio" name="opcao" value="op_video" id="op_video">Video
                <input type="radio" name="opcao" value="op_imagem" id="op_imagem" checked>Imagem    
                <input type="submit" id="btn_selecionar" >  
            </form>
        </div>
        <div class="container-tipo-video" >         
            <input type="text" id="mudarVideo" value="">
            <input type="button" id="btn-insere"  value="Inserir novo video"/>
            <video  width="100%" height="" id="meuVideo" >
                <source src="" id="tv_main_channel">
            </video>            

        </div>
        <div class="container-imagem-upload">
        <form action="uploadArquivo.php" method="post" enctype="multipart/form-data" id="UploadForm">   
            <input name="arquivoUpload" type="file" /><br>
            <input type="submit" value="Upload">
        </form>
        </div>
        <span id="output"/>
    </div>

jQuery 

         $('#btn_selecionar').click(function(){
             $('.container-imagem-upload').show(); 
             $('.container-tipo-video').show(); 
         });
    
asked by anonymous 16.03.2015 / 01:19

1 answer

1

Well, first of all, it's not working since you're using id inside the submit in form , which is not ideal.

From what I understand, you're wanting to display div based on the option the person chooses. I do not know if it suits you, because you did not say the final goal.

But I have this code using <option> that makes this type of selection. You can modify it to use a radio as well.

jQuery: 

var $campo = $(".campo"), //Div selecionada a ser exibida quando escolhido a opção
    $selector = $('#meucampo'); //Form usado para selecionar a opção
    $selector.change(function() { //Opção que verifica a mudança do 'value'
        var selected = $(this).find('option:selected').attr('class'); //Pega o value da opção selecionada
        $campo.hide(); //esconde os demais campos
        $('#' + selected + '.campo').show(); //exibe o campo de value igual ao selecionado
    });

HTML: 

<form>
    <select name="nomecampo" id="meucampo" class="i-form">
        <option value="1" class="x"></option>
        <option value="2" class="a">Opção 01</option>
        <option value="3" class="b">Opção 02</option>
    </select>
</form>

<div id="a" class="meucampo">
    //seu primeiro conteúdo
</div>

<div id="b" class="meucampo">
    //seu segundo conteúdo
</div>

I hope this helps.

    
16.03.2015 / 01:52
Incremental key Convert DTO to Entity Java