Modify a button through an input

Question

I wonder how I can change the name and the property of a button from the choice of an 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>

If Partner User is selected the form is sent normally, but if Partner Group is selected, you must have a new screen with the partner list I receive via JSON. And the button must change from Create New for List of Groups.

Answer 1

You can use attr for this, just pass the attr that wants in the radio and make the exchange using jquery, remembering that there are n ways to do this, I gave just one example, just you adapt the way you best serve and improve it the way you want.

$('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>

Answer 2

Since you want to do the treatment according to the radio chosen, I suggest initially delete the attributes action of form and set the attribute type of the button as 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>