Modify a button through an input

Question

Modify a button through an input

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I would like to know how I can change the name and property of a button from a 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 is selected, the form is sent normally, but if Partner Group is selected, it should have a new screen with the partner list that I receive via JSON. And the button should change from Create New to Group List .

javascript jquery html5

asked by anonymous 04.12.2017 / 13:29

2 answers

0

You can use attr to do this, just pass attr on radio and make exchange using jquery , remembering that there are n ways to do this, just adapt it the way that best suits you and improve it any way you want.

$('input[type=radio]').change(function(){
  var valor = $(this).attr('data-type')
  if(valor == 'submit'){
    $('button').text('É Submit')
  }else{
    $('button').text('É Button')
  }
  $('button').attr('type', valor)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label><inputtype="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>

04.12.2017 / 13:54

.htaccess causing "Excess Redirection" What command do I use to place a parameter in a list in sql?

score 0 · Accepted Answer

Since you want to do the treatment according to% chosen%, I suggest initially to delete the attributes radio of action and set the form attribute of the button as type :

$("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><formclass="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>