javascript - 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 代码放入 forntend 页面，但没有成功。我还尝试将 ajax 放入表单下方的进程文件中。将两者一起调用。也没有 fork 。我如何从 ajax 1 为 ajax 2 创建一些触发器，例如

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
    }
  });
});