4

Tenho um formulário onde eu seleciono cores para a página, e nele há um checkbox com a opção de usar padrão do site, no momento que clico nesse checkbox ele remove o campo, mas quando eu desmarcar o checkbox ele deveria criar o campo novamente.

Como faria isso?

inserir a descrição da imagem aqui

<div class="form-group row">
    {{ Form::label('metadata', 'Título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('title', null, ['class' => 'form-control',  'placeholder' => 'Digite um Titulo','required' => true]) }}
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Sub-título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('subtitle', null, ['class' => 'form-control',  'placeholder' => 'Digite um Sub-Titulo']) }}
    </div>
</div>


<div class="form-group row">
    <label for="metadata" class="col-sm-2 col-form-label">Cor de fundo:</label>
    <div class="col-sm-10">
        <input name="" type="checkbox" value="background" onclick="enableColorsBackground(this.checked)"> Usar Padrão do
        site
        <input type="color" name="background" id="background">
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Cor do título:', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-6">
        <input name="" type="checkbox" value="color-title" onclick="enableColorsTitle(this.checked)"> Usar Padrão do
        site
        <input type="color" name="color-title" id="color-title">
    </div>
</div>


<script>
    function enableColorsBackground() {
        document.getElementById('background').remove() ;
    }

    function enableColorsTitle() {
        document.getElementById('color-title').remove();
    }
</script>

2 Respostas 2

4

Depois que você remove, não tem como recuperar. O correto seria você ocultar e não remover, de acordo com o argumento passado no onclick. Para não enviar o campo, altere para disabled quando ocultar (campos desabilitados não são enviados no submit):

function enableColorsBackground(e) {
   var inp = document.getElementById('background');
   inp.style.display = e ? "none" : "inline";
   inp.disabled = e ? true : false;
}

function enableColorsTitle(e) {
   var inp = document.getElementById('color-title');
   inp.style.display = e ? "none" : "inline";
   inp.disabled = e ? true : false;
}
<div class="form-group row">
    <label for="metadata" class="col-sm-2 col-form-label">Cor de fundo:</label>
    <div class="col-sm-10">
        <input name="" type="checkbox" value="background" onclick="enableColorsBackground(this.checked)"> Usar Padrão do
        site
        <input type="color" name="background" id="background">
    </div>
</div>

<div class="form-group row">
    <div class="col-sm-6">
        <input name="" type="checkbox" value="color-title" onclick="enableColorsTitle(this.checked)"> Usar Padrão do
        site
        <input type="color" name="color-title" id="color-title">
    </div>
</div>

O argumento e da função é o valor enviado em this.checked, que pode ser true ou false. Se for true, irá aplicar display none (oculta o elemento); ao contrário, display inline (mostra o elemento).

5
  • Mas o campo não pode ir para o banco de dados, eu estava usando o hidden, sendo que ele esconde, mas enviar o campo para o banco de dados. Quero realmente remover, mas o que quero era criar novamente, ai não sei como seria para fazer. Commented 7/02/2019 às 14:42
  • Veja agora.....
    – Sam
    Commented 7/02/2019 às 14:58
  • Ele como disabled funciona como removee? Commented 7/02/2019 às 15:02
  • Ele fica desabilitado, não pode ser alterado, mas continua visível. O display "none" oculta. Se vc fizer as duas coisas, como coloquei na resposta, ela fica invisível e não é enviado para o back-end.
    – Sam
    Commented 7/02/2019 às 15:04
  • Hum, testar aqui. Commented 7/02/2019 às 15:04
1

Usando Jquery você pode resolver este problema usando a função toggle() facilmente, observe que removi o evento onclick do checkbox e adicionei um id:

CheckBox novo

<div class="form-group row">
    <label for="metadata" class="col-sm-2 col-form-label">Cor de fundo:</label>
    <div class="col-sm-10">
        <input name="" type="checkbox" value="background" id="changeBackground"> Usar Padrão do
        site
        <input type="color" name="background" id="background">
    </div>
</div>

<script>
    $("#changeBackground").click(function(){
        if($("#changeBackground").is(":checked")){
            $("#background").attr("disabled","true");
            $("#background").hide();
        }else{
            $("#background").removeAttr("disabled");
            $("#background").show();
        }
    });

    function enableColorsBackground() {
        document.getElementById('background').remove() ;
    }
</script>
5
  • o que esse toggle() faz? Commented 7/02/2019 às 14:52
  • O toggle() oculta e exibe o elemento a cada click. Commented 7/02/2019 às 14:56
  • Hum, mas no caso eu preciso realmente remover ele, porque se ocultar ele vai para o banco de dados. Commented 7/02/2019 às 14:59
  • Editei a resposta é só trocar os Jquery, o legal do jquery é que diminui consideravelmente a quantidade de linhas, vou apagar o jquery antigo! Commented 7/02/2019 às 15:02
  • Eu me ligo que o Jquery deixa mais enxuto Commented 7/02/2019 às 15:04

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 .