0

Estou com dificuldade para enviar corretamente os formulários, tenho vários formulários, cada um com seu id, e uma função que chamo em todos os formulários:

<script>
  function enviaForm(id){
    $(id).submit(function(){

      var camp1 = $("input[name='a2']:checked").val();     

      $.ajax({
        type: "GET",
        url: "proc_update_teste.php",
         data: {
              'campo1': camp1
            },
        success: function(result){
              camp1 = $("input[name='a2']:checked").val('');
              var view = $('#resultSend').html(result);
            }
      });      
      return false;
    });

  }
</script>
<form id="q1">
  <h1 class="flow-text white-text">Question 1</h1>
  <input type="hidden" name="question1">
  <p class="white-text">What is your father's last name?</p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q1a" value="answer1a"/>
    <label for="q1a">a. His last name Silva</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q1b" value="answer1b" />
    <label for="q1b">b. My father last name is Silva</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q1c"  value="answer1c"/>
    <label for="q1c">c. His last name is Silva</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q1d" value="answer1d" />
    <label for="q1d">d. My father is last name Silva</label>
  </p>
  <button class="btn" onclick="enviaForm(q1)">RESPONDER</button>
</form>
<hr>
<form id="q2">
  <h1 class="flow-text white-text">Question 2</h1>
  <input type="hidden" name="question2">
  <p class="white-text">2.  What do you do for a living?</p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q2a" value="answer2a"/>
    <label for="q2a">a. I am a doctor.</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q2b" value="answer2b"/>
    <label for="q2b">b. I watch tv</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q2c"  value="answer2c"/>
    <label for="q2c">c. I´m teacher.</label>
  </p>
  <p>
    <input class="with-gap" name="a2" type="radio" id="q2d" value="answer2d"/>
    <label for="q2d">d. I live in São Paulo.</label>
  </p>
  <button class="btn" onclick="enviaForm(q2)">RESPONDER</button>
</form>
<hr>
2
  • qual a dificuldade? Commented 12/01/2018 às 19:14
  • Quando clico no segundo botão pega os dados do primeiro formulário, não sei se é assim que passa o id para a função, quando chamo ela no botão Commented 12/01/2018 às 21:13

2 Respostas 2

1

Você também pode fazer desta forma

    // monitora todos os formularios que NÃO contenha a classe "noajax" (formularios com essa classe não são enviados fica ajax)
$('form:not(.noajax)').on("submit", function(ev){
    ev.preventDefault();
    // url base para onde irá as requisições ajax
    var BASE_URL = 'seusite.com/ajax/'
    // seleciona o botão de submit
    var botao = $(this).find('input[type="submit"]');
    // salva o value do botão para voltar o texto original após a resposta da requisição
    var textBotao = botao.val();

    // desabilita o botão para evitar multiplos envio
    botao.prop("disabled", true).val("Carregando...").css('opacity', '0.5');

    // pega o endereço que o formulario vai ser enviado 
    var action = $(this).attr("action");

    // uma verificação basica para ter certeza que colocou um action
    if(action == undefined || '' == action)
        return alert("Não foi possível processar sua requisição, coloque um action");

    $.ajax({
        url: BASE_URL+action+".php",
        data: $(this).serialize(),
        type: "POST",
        success: function(result){
            // coloca em algum lugar o resultado 
            $("#erroslist").html(result);
            botao.prop("disabled", false).val(textBotao).css('opacity', '1');
        },
        error: function(){
            botao.prop("disabled", false).val(textBotao).css('opacity', '1');
        }
    });

});

Assim, ele irá pegar apenas os inputs do formulario em questão, independente dos outros X que estão na mesma página

0

Encontrei o erro que eu mesmo apresentei aqui, vou colocar a resposta para futuras consultas:

Os names dos inputs são todos iguais, ao selecionar um input aleatório e submeter o formulário, o mesmo ficava selecionado, ao selecionar outro input causava o conflito. Para solucionar limpo todos os inputs ao submeter qualquer formulário com o código:

camp1 = $("input[name='cbn']:checked").prop('checked',false);

Isso permite que só um input seja selecionado por vez, enviando corretamente a requisição.

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 .