0

Tenho o seguinte cenário: Vários formulários, porém preciso setar todos os inputs somente do formulário que está em ação, que é acionado pelo botão.

function enviaForm(id){
    $(id).submit(function(){

      var answer = $("input[name='cbn']:checked").val();
      var question = $(".thide").val();
      var button = $(this).find('input[type="submit"]');
      button.prop("disabled", true).val("respondido");

      $.ajax({
        type: "GET",
        url: "proc_update_teste.php",
         data: {
              'campo1': answer,
              'campo2': question,
            },
        success: function(result){              
              answer = $("input[name='cbn']:checked").parent().css('background', 'gray');
              answer = $("input[name='cbn']").prop('disabled',true);
              var question = $(".thide").val('');
              var view = $('#resultSend').html(result);
            }
      });      
      return false;
    }); 
  }
<form id="q1">  
  <input class="thide" type="hidden" name="question1" value="q1">
  <input class="with-gap" name="cbn" type="radio" id="q1a" value="answer1a"/>
  <input class="with-gap" name="cbn" type="radio" id="q1b" value="answer1b" />
  <input class="with-gap" name="cbn" type="radio" id="q1c"  value="answer1c"/>
  <input type="submit" value="RESPONDER" class="btn" onclick="enviaForm(q1)"></input>
</form>
<form id="q2">
  <input class="thide" type="hidden" name="question2" value="q2">
  <input class="with-gap" name="cbn" type="radio" id="q2a" value="answer2a"/>
  <input class="with-gap" name="cbn" type="radio" id="q2b" value="answer2b"/>
  <input class="with-gap" name="cbn" type="radio" id="q2c"  value="answer2c"/>
  <input type="submit" value="RESPONDER" class="btn" onclick="enviaForm(q2)"></input>
</form>

Estou usando esse trecho de código answer = $("input[name='cbn']").prop('disabled',true); para chegar nesse fim, só que ele seta em todos os formulários, quando preciso que faça só com o formulário em ação.

2 Respostas 2

2

Troque o código que você está usando:

answer = $("input[name='cbn']").prop('disabled',true);

por este:

// procura por inputs do tipo radio
answer = $("#"+id.id+" input[type='radio']").prop('disabled',true);

Ou este:

// procura por inputs com o name "cbn"
answer = $("#"+id.id+" input[name='cbn']").prop('disabled',true);

Irá desativar todos os radios do formulário clicado. O código id.id pega a id do form clicado.

2

O ideal é você salvar o formulário em uma constate (exemplo abaixo) e depois ir utilizando o método find do jQuery para procurar e desabilitar os itens dentro desse form. Assim você pode utilizar, por exemplo:

$(form).find('selector').prop("disabled", true);

Exemplo Completo:

function enviaForm(form) {

  $(form).submit(function(e) {
    
    var answer = $("input[name='cbn']:checked").val();
    var question = $(".thide").val();
    var button = $(this).find('input[type="submit"]');
    button.prop("disabled", true).val("respondido");

    $.ajax({
      type: "GET",
      url: "proc_update_teste.php",
      data: {
        'campo1': answer,
        'campo2': question,
      },
      success: function(result) {
        $(form).find("input[name='cbn']").prop("disabled", true);
        
        var question = $(form).find(".thide").val('');
        var view = $('#resultSend').html(result);
      },
      complete: function() {
        console.log( "Aqui no StackOverflow não vai funcionar" )
      }
    });
    return false;
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="q1">
  <input class="thide" type="hidden" name="question1" value="q1">
  <input class="with-gap" name="cbn" type="radio" id="q1a" value="answer1a" />
  <input class="with-gap" name="cbn" type="radio" id="q1b" value="answer1b" />
  <input class="with-gap" name="cbn" type="radio" id="q1c" value="answer1c" />
  <input type="submit" value="RESPONDER" class="btn" onclick="enviaForm(q1)" />
</form>

<form id="q2">
  <input class="thide" type="hidden" name="question2" value="q2">
  <input class="with-gap" name="cbn" type="radio" id="q2a" value="answer2a" />
  <input class="with-gap" name="cbn" type="radio" id="q2b" value="answer2b" />
  <input class="with-gap" name="cbn" type="radio" id="q2c" value="answer2c" />
  <input type="submit" value="RESPONDER" class="btn" onclick="enviaForm(q2)" />
</form>

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 .