Problem with multiple forms on the same page

Asked

Viewed 1,469 times

-1

I wanted to use a script for several forms, but I’m not getting it. 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 button Submit the page 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, using the fields and the Submit button out of the form, by clicking any Submit button on the page all fields were being sent.

php javascript jquery ajax

  • If we had html we could help you to put a script for several forms :)

  • Hello I tried to put all the code now. Ta appearing a little strange, but I think later will appear normal. In case it doesn’t show up I’ll try to paste it again.

  • @Viníciusjosémoreira edited your code to be minimally organized. When posting code, remember or put 4 extra spaces at the beginning of the lines for the site system to format correctly, or select the code snippet and hit the button { } in the format bar, the extra spaces will be added.

1 answer

0

Tries to add a class to send, change your type to button instead of Submit - after that, you bind the click on that element to serialize the inputs that belong to that form. still in that element, you put a data-attribute with a selector where you want 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 haven’t tested the code, but the idea is there :)

  • Thank you worked perfectly.

  • @Viníciusjosémoreira mark the answer as right, then :)

Browser other questions tagged php javascript jquery ajax

You are not signed in. Login or sign up in order to post.