Picking input values from a given form

Question

I have the following scenario: Several forms, but I need to set all inputs only of the form that is in action, which is triggered by the button.

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>

I’m using this piece of code answer = $("input[name='cbn']").prop('disabled',true); to reach that end, only that it arrow on all forms, when I need you to do only with the form in action.

Answer 1

The ideal is to save the form in a check (example below) and then go using the method find of jQuery to search and disable items within this form. So you can use, for example:

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

Complete Example:

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>

Answer 2

Change the code you are using:

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

for this:

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

Or this:

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

It will disable all radios of the clicked form. The code id.id picks up the id of form clicked.