A
A
arsenaljek2020-05-25 09:59:53
JavaScript
arsenaljek, 2020-05-25 09:59:53

Ajax multiple forms and page reload?

Point out the mistake
I am making a section for editing technical specifications

spoiler

5ecb6c5694c44557659502.jpeg

Output in a template
while ($specifications = mysqli_fetch_array($result)) {
                        $i++;
                        ?>
                        <tr>
                          <td><?=$specifications_array[$specifications['specification_id']]?></td>
                          <td>
                            <form id="editSpecification-<?=$tovar_id?>" action="<?=$_SERVER['PHP_SELF']?>?tovar_id=<?=$tovar_id?>" method="POST">
                              <input type="hidden" name="specification_id" id="specification_id<?=$i?>" value="<?=$specifications['specification_id']?>">
                              <input type="hidden" name="tovar_id" id="tovar_id" value="<?=$tovar_id?>">
                              <input type="text" name="specification_value" id="specification_value<?=$i?>" value="<?=$specifications['value']?>">
                              <input type="number" name="specification_value_sort" id="specification_value_sort<?=$i?>" value="<?=$specifications['sort']?>">
                              <button type="submit" name="sendSpecification<?=$i?>" id="sendSpecification<?=$i?>" class="btn btn-primary">Сохранить</button>
                            </form>
                            <span id="result"> </span>
                          </td>
                        </tr>
                      <?php
                      }

$("#editSpecification-<?=$tovar_id?>").submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/../admin/ajax/editProductSpecif.php",
            data: $("#editSpecification-<?=$tovar_id?>").serialize(),

            success: function(data){
            	if(data == 1){ 
                  toastr.success('Характеристика изменена!');  
          } else {
            $("#result").html('<div class="alert alert-danger alert-dismissible" role="alert"><div class="alert-message"> Ошибка!</div></div>');  
          }
        }
      });
    });

If you edit the first value, then everything is fine, but if you edit the second and subsequent ones, then the page simply reloads

Answer the question

In order to leave comments, you need to log in

1 answer(s)
T
ThunderCat, 2020-05-25
@arsenaljek

Oh oh oh...

$("#editSpecification-<?=$tovar_id?>").submit(function(e){...
here you hung a listener on ONE specific form element, since here you don’t have a cycle! Replace the selector with form or the form class. Inside, respectively, you can easily get this particular form as $(this), actually serealize it and that's it, profit!
and if you edit the second and subsequent ones, then the page simply reloads
this is understandable, since a listener is not hung on them, the form normally submits so-so, there is no preventDefault on it ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question