Problem with multiple forms on same page

Question

Problem with multiple forms on same page

Navigation

#1 by (0 votes)

-1

I was wanting to use a multi-form script, but I can not. So I'm generating a script for each form with unique IDs for each field and form.

I'm not able to inhibit the behavior of the form, every time I click the submit button and reloaded.

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Teste ajax jquery tutsmais</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$("#form1").submit(function(e){
   return false;
   $.ajax({
      type      : 'post',
      url       : 't2.php',
      data      : '&nome=' + $('#nome1').val() + '&sobrenome=' + $('#sobrenome1').val(),
      dataType  : 'html',
      success : function(txt){
         $('#div1').html(txt);
      }
   });
});
</script>
<script>
$("#form2").submit(function(e){
   return false;
   $.ajax({
      type      : 'post',
      url       : 't2.php',
      data      : '&nome=' + $('#nome2').val() + '&sobrenome=' + $('#sobrenome2').val(),
      dataType  : 'html',
      success : function(txt){
         $('#div2').html(txt);
      }
   });
});
</script>
<script>
$("#form3").submit(function(e){
   return false;
   $.ajax({
      type      : 'post',
      url       : 't2.php',
      data      : '&nome=' + $('#nome3').val() + '&sobrenome=' + $('#sobrenome3').val(),
      dataType  : 'html',
      success : function(txt){
         $('#div3').html(txt);
      }
   });
});
</script>
<script>
$("#form4").submit(function(e){
   return false;
   $.ajax({
      type      : 'post',
      url       : 't2.php',
      data      : '&nome=' + $('#nome4').val() + '&sobrenome=' + $('#sobrenome4').val(),
      dataType  : 'html',
      success : function(txt){
         $('#div4').html(txt);
      }
   });
});
</script>
<script>
$("#form5").submit(function(e){
   return false;
   $.ajax({
      type      : 'post',
      url       : 't2.php',
      data      : '&nome=' + $('#nome5').val() + '&sobrenome=' + $('#sobrenome5').val(),
      dataType  : 'html',
      success : function(txt){
         $('#div5').html(txt);
      }
   });
});
</script>
</head>
<body>
   <div id="div1">
   </div>
   <h2>form via ajax</h2>
   <form id="form1">
      Digite seu nome: <input type="text" id="nome1"><br>
      Digite seu sobrenome: <input type="text" id="sobrenome1"><br>
      <input type="submit" id="id1"><br>
   </form>
   <div id="div2">
   </div>
   <h2>form via ajax</h2>
   <form id="form2">
      Digite seu nome: <input type="text" id="nome2"><br>
      Digite seu sobrenome: <input type="text" id="sobrenome2"><br>
      <input type="submit" id="id2"><br>
   </form>
   <div id="div3">
   </div>
   <h2>form via ajax</h2>
   <form id="form3">
      Digite seu nome: <input type="text" id="nome3"><br>
      Digite seu sobrenome: <input type="text" id="sobrenome3"><br>
      <input type="submit" id="id3"><br>
   </form>
   <div id="div4">
   </div>
   <h2>form via ajax</h2>
   <form id="form4">
      Digite seu nome: <input type="text" id="nome4"><br>
      Digite seu sobrenome: <input type="text" id="sobrenome4"><br>
      <input type="submit" id="id4"><br>
   </form>
   <div id="div5">
   </div>
   <h2>form via ajax</h2>
      <form id="form5">
      Digite seu nome: <input type="text" id="nome5"><br>
      Digite seu sobrenome: <input type="text" id="sobrenome5"><br>
      <input type="submit" id="id5"><br>
   </form>
   <p></p>
</body></html>

The other problem I was encountering before making this change was that by using the fields and the submit button outside of the form, clicking any submit button on the page was sending all the fields.

php javascript jquery ajax

asked by anonymous 04.06.2016 / 22:06

1 answer

Loop code with condition not satisfied [closed] "Invalid column name" MVC

score 0 · Answer 1

Try to add a class to the send button, change its type to button instead of submit - after that, you bind to this element to serialize the inputs that belong to this form. still in that element, you put a data-attribute with a selector where you want the html to go when it returns:

$(function(){
    $('.enviar').on('click',function(){
    var that = $(this);
    $.ajax({
        type: 'post',
      url: 't2.php',
      data: $(this).closest('form').serialize(),
      success: function(data) {
      if (that.attr('data-landing-element')) {
        $(that.attr('data-landing-element')).html(data);
      }
      }
    })
  });
});

<h2>form via ajax</h2>
<form id="form1">
  Digite seu nome: <input type="text" name="nome1"><br>
  Digite seu sobrenome: <input type="text" name="sobrenome1"><br>
  <input type="submit" class="enviar" data-landing-element="#div2"><br>
</form>

<h2>form via ajax</h2>
<form id="form2">
  Digite seu nome: <input type="text" name="nome2"><br>
  Digite seu sobrenome: <input type="text" name="sobrenome2"><br>
  <input type="button" class="enviar" data-landing-element="#div2"><br>
</form>

<div id="div2"></div>
<div id="div1"></div>

ps: it's late and I have not tested the code, but the idea is there:)