Ajax 双形式，第一个形式与选择然后经典形式

Question

所以我在前端有一个表单。和进程文件中的第二种形式。使用第一种形式，我用产品信息调用第二种形式。

第一种形式

      $izmena_proizvoda = $conn->query("SELECT * FROM proizvodi");
      $izmena_proizvoda->execute();
      echo '<form method="POST">';
      echo '<select class="form-control" name="izmena_proizvoda" id="izaberi_proizvod" onchange="izmena_proizvoda_ajax(this.value);">';
      echo '<option>Izaberite proizvod</option>';
            while($izmena_proizvoda_o=$izmena_proizvoda->fetch()){
                echo '<option value="'.$izmena_proizvoda_o['id_sata'].'">';
                echo $izmena_proizvoda_o['nazivsata'];
                echo '</option>';
            }
      echo '</select>';
      echo '</form>';

和 ajax 用于这种形式

    function izmena_proizvoda_ajax(val){
    $.ajax({
        url: "../sadrzaj/stranice/izmenaproizvoda.php",
        type: 'POST',
        data: {
            izmena_proizvoda:val
        },
        success: function (response) {
            document.getElementById("izmena_proizvoda_prikaz").innerHTML = response;
            console.log(response)
        }
    });
}

在进程文件中，我有这个。

if(isset($_POST['izmena_proizvoda'])){
$izmena_proizvoda_forma = $conn->prepare("SELECT * FROM proizvodi WHERE id_sata = :id_sata");
$izmena_proizvoda_forma->bindParam(':id_sata', $_POST['izmena_proizvoda'], PDO::PARAM_INT);
$izmena_proizvoda_forma->execute();
echo '<hr>';
echo '<form method="post" action="#" id="izmena_proizvoda_update_form" class="ajax" >';
while($izmena_proizvoda_forma_o=$izmena_proizvoda_forma->fetch()){
    echo'        
              <input type="hidden" name="slika_za_brisanje" value="'.$izmena_proizvoda_forma_o['slika'].'">       
              <input type="hidden" name="id_izmena" value="'.$izmena_proizvoda_forma_o['id_sata'].'">
              <label for="naslov_izmena">Naziv sata</label>
              <input type="text" id="naslov_izmena" name="naslov_izmena" class="form-control" value="'.$izmena_proizvoda_forma_o['nazivsata'].'">
              <label for="cena_izmena">Cena</label>
              <input id="cena_izmena" type="text" name="cena_izmena" class="form-control" value="'.$izmena_proizvoda_forma_o['cenasata'].'"><br>
              <label for="vodootpornost">Vodootpornost</label>
              <input id="vodootpornost" type="text" name="vodootpornost" class="form-control" value="'.$izmena_proizvoda_forma_o['vodootpornost'].'"><br>
              <label for="zalihe">Zalihe</label>
              <input id="zalihe" type="text" name="zalihe" class="form-control" value="'.$izmena_proizvoda_forma_o['zalihe'].'"><br>
              <label for="pol">Pol sata</label>
              <input id="pol" type="text" name="pol" class="form-control" value="'.$izmena_proizvoda_forma_o['pol'].'"><br>
              <label for="opissata_izmena"></label>';
    echo '  <textarea id="opissata_izmena" rows="10" name="opissata_izmena">'.$izmena_proizvoda_forma_o['opissata'].'</textarea><br>';
    echo '<input type="submit" name="izmena_proizvoda_potvrda" value="Sacuvaj izmene" class="btn btn-info">';
}
echo '</form>';
}

所以当我在前端这样做时。工作正常。但是当我尝试为 form2 做另一个 ajax 时，我遇到了问题。我不知道如何为另一种形式运行 ajax。我尝试将ajax代码放在forntent页面中，但没有工作。我也试图将ajax放在表单下方的进程文件中。将两者称为一起。也没有分叉。我如何从 ajax 2 为 ajax 1 制作一些触发器，例如

Ajax1：嘿，ajax2，我做我的工作。您现在有一个窗体。当用户单击"提交"时，请执行您的工作，不要引用页面。

对不起，因为我的英语不好。

Answer 1

您可以摆脱onchange处理程序，保留<form>标记并将事件处理程序附加到所有表单而不是特定表单。然后使用 $(this) 引用生成提交事件的表单的值。

$("form").on("submit", function(event) {
  event.preventDefault();
  var data = $(this).serialize(); // Grabs all data from the form being submitted
  $.ajax({
    url: "../sadrzaj/stranice/izmenaproizvoda.php",
    type: 'POST',
    data: data,
    success: function(response) {
      document.getElementById("izmena_proizvoda_prikaz").innerHTML = response;
      console.log(response);
      // If you need to alter success handlers you can add data elements to your form HTML and reference them here
      // Same is true if you need to alter submission URL or whatever
    }
  });
});

Answer 2

您需要其他方法来将事件分配给新的 HTML 元素。
这样就将事件分配给任何动态 HTML 元素。

$(function() {
  //Assign event to input submit with name izmena_proizvoda_potvrda
  $(document).on('click', 'input[name=izmena_proizvoda_potvrda]',
    function(e) {
      e.preventDefault();
      //Ajax request
    }); //end function()
})