Question

我在页面中有八个表单（Form0，Form1，Form2等）。提交表单时，数据由JS传递并发送到ReassignPreg.php，后者在DB中搜索数据并使用json将其发回。然后更新页面上的正确div。

下面的代码正在完成其工作。但我有几乎相同代码的副本，每个表格一个（为简洁起见我只复制其中两个）。新手和业余爱好者，我喜欢合成此代码的方式（获取表单名称，然后将其传递给一个函数）。

<script type="text/javascript">
$(document).ready(function(){
  $("#Form0").submit(function(){
    var cadena = $(this).serialize();
    $.get('ReassignPreg.php?cadena='+cadena, function(row2){
      var text = row2;
      var obj = JSON.parse(text);
      var imagen='<img src="../ImageFolder/'+obj.File+'.png" width="530" />'

      $("#PregBox00").html(imagen)
      $("#PregBox01").html(obj.Clase)
      $("#PregBox02").html(obj.Dificultad)
      $("#PregBox03").html(obj.Tipo)
    });
  return false;
  });
});


$(document).ready(function(){
  $("#Form1").submit(function(){
    var cadena = $(this).serialize();
    $.get('ReassignPreg.php?cadena='+cadena, function(row2){
      var text = row2;
      var obj = JSON.parse(text);
      var imagen='<img src="../ImageFolder/'+obj.File+'.png" width="530" />'

      $("#PregBox10").html(imagen)
      $("#PregBox11").html(obj.Clase)
      $("#PregBox12").html(obj.Dificultad)
      $("#PregBox13").html(obj.Tipo)
    });
  return false;
  });
});
</script>

Answer 1

您可以使用ID /名称为每个表单添加隐藏字段，并使用该字段来标识提交表单

Answer 2

更多模块化有助于实现

$(document).ready(function () {
    $("[id^=Form]").on('submit', function (e) {
        e.preventDefault();

        var _form  = this.id.slice(-1); // 0, 1, etc
        var cadena = $(this).serialize() + '&form=' + _form;

        $.get('ReassignPreg.php?cadena=' + cadena, function (row) {
            var image = $('<img />', {
                src   : "../ImageFolder/" + row.File + ".png", 
                width : 530
            });

            $("#PregBox"+_form+"0").html(image);
            $("#PregBox"+_form+"1").html(row.Clase);
            $("#PregBox"+_form+"2").html(row.Dificultad);
            $("#PregBox"+_form+"3").html(row.Tipo);
        }, 'json');
    });
});

现在你将在服务器上有一个form密钥，其中包含表单编号，例如在PHP中，你可以使用$_GET['form']等获得该密钥。

Answer 3

您可能需要为PregBox元素分配类别，然后根据表格n＃39; ID将其定位。

  $('form').submit(function(){ // listen to all form submissions.
    var formID = $(this).prop('id'); // get the form ID here and do what you like with it.
    var cadena = $(this).serialize();
    $.get('ReassignPreg.php?cadena='+cadena, function(row2){
      var text = row2;
      var obj = JSON.parse(text);
      var imagen='<img src="../ImageFolder/'+obj.File+'.png" width="530" />'

      $("#PregBox00").html(imagen)
      $("#PregBox01").html(obj.Clase)
      $("#PregBox02").html(obj.Dificultad)
      $("#PregBox03").html(obj.Tipo)
    });
  return false;
  });

知道提交的表格

3 个答案: