0

Gostaria de saber como posso modificar o nome e a propriedade de um botão a partir da escolhe de um input (radio button).

<h3>Criar novo usuário</h3>
        <p></p>
        <form class="m-t" role="form" action="login.php" method="post">
            <div class="form-group">
                <input type="text" class="form-color-custom form-control" placeholder="Primeiro nome" required="" name="nome">
            </div>
            <div class="form-group">
                <input type="text" class="form-color-custom form-control" placeholder="Sobrenome" required="" name="sobrenome">
            </div>
            <div class="form-group">
                <input type="text" class="form-color-custom form-control" placeholder="Telefone" required="" id="telefone" maxlength="15" name="telefone">
            </div>
            <div class="form-group">
                <input type="email" class="form-color-custom form-control" placeholder="Email" required="" name="email">
            </div>
            <div class="form-group">
                <input type="password" class="form-color-custom form-control" placeholder="Senha" required="" name="password">
            </div>
            <div class="form-group">
                <input type="password" class="form-color-custom form-control" placeholder="Confirmar senha" required="" name="password">
            </div>

            <div class="form-group">
                <div class="i-checks">
                    <label style="float: left;">
                        <input type="radio" value="usuario" name="tipo-parceiro"> <i></i> Usuário parceiro
                    </label>
                </div>
                <div class="i-checks">
                    <label style="float: right;">
                        <input type="radio" value="grupo" name="tipo-parceiro"> <i></i> Grupo parceiro
                    </label>
                </div>
            </div>

            <button id="bnt-novo" type="submit" class="btn btn-primary block full-width m-b" style="margin-top: 17%;">Criar novo</button>

        </form>

Se for selecionado Usuário parceiro o form é enviado normalmente, mas se for selecionado Grupo parceiro, deve ter uma nova tela com a lista de parceiro que recebo via JSON. E o botão deve mudar de Criar Novo para Lista de Grupos.

2
  • Isso não é checkbox, é um radio button :)
    – Sam
    Commented 4/12/2017 às 12:33
  • Obrigado pelo correção. Vou mudar no texto. Commented 4/12/2017 às 12:45

2 Respostas 2

1

Já que quer fazer o tratamento de acordo com o radio escolhido, sugiro inicialmente apagar os atributos action do form e setar o atributo type do botão como button:

$("input[name='tipo-parceiro']").on("change", function(){
   radioIdx = $(this).closest('.i-checks').index();

   if(radioIdx == 1){
      $("#bnt-novo")
      .text('Lista de Grupos')
      .attr('type','button')
      .attr('onclick','fazerAlgumaCoisa()');
      $("form").removeAttr('action');
   }else{
      $("#bnt-novo")
      .text('Criar novo')
      .attr('type','submit')
      .removeAttr('onclick');
      $("form").attr('action','login.php');
   }
});

function fazerAlgumaCoisa(){
   alert('Fazer alguma coisa aqui');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="m-t" role="form" method="post">
   <div class="form-group">
       <input type="text" class="form-color-custom form-control" placeholder="Primeiro nome" required="" name="nome">
   </div>
   <div class="form-group">
       <input type="text" class="form-color-custom form-control" placeholder="Sobrenome" required="" name="sobrenome">
   </div>
   <div class="form-group">
       <input type="text" class="form-color-custom form-control" placeholder="Telefone" required="" id="telefone" maxlength="15" name="telefone">
   </div>
   <div class="form-group">
       <input type="email" class="form-color-custom form-control" placeholder="Email" required="" name="email">
   </div>
   <div class="form-group">
       <input type="password" class="form-color-custom form-control" placeholder="Senha" required="" name="password">
   </div>
   <div class="form-group">
       <input type="password" class="form-color-custom form-control" placeholder="Confirmar senha" required="" name="password">
   </div>

   <div class="form-group">
       <div class="i-checks">
           <label style="float: left;">
               <input type="radio" value="usuario" name="tipo-parceiro"> <i></i> Usuário parceiro
           </label>
       </div>
       <div class="i-checks">
           <label style="float: right;">
               <input type="radio" value="grupo" name="tipo-parceiro"> <i></i> Grupo parceiro
           </label>
       </div>
   </div>

   <button id="bnt-novo" type="button" class="btn btn-primary block full-width m-b" style="margin-top: 17%;">Criar novo</button>

</form>

1

Você pode usar attr para isso, basta passar o attr que quer no radio e fazer a troca usando jquery, lembrando que existem n formas de se fazer isso, dei apenas um exemplo, basta você adaptar da forma que melhor lhe servir e melhora-lo da forma que quiser.

$('input[type=radio]').change(function(){
var valor = $(this).attr('data-type');
var choiseConditional = (valor == 'submit') ? 'É Submit' : 'É Button' ;
$('button').text(choiseConditional);
$('button').attr('type', valor);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" id="radio" name="radio" data-type="button"> Alterar Para Type Button</label>
<label><input type="radio" id="radio" name="radio" data-type="submit"> Alterar Para Type Submit</label>
<button type="submit">Botão a ser alterado</button>

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 .