Javascript 提交包含动态ID的HTML表单

我有两个包含动态ID属性的HTML表单。我想要的是使用AJAX调用分别存储来自每个HTML表单的数据。当前，当我使用静态ID名称“surveyImage”时，AJAX调用仅适用于一个HTML表单

我不知道如何使用jQuery为每个表单分别调用方法

submit（）

。有没有办法解决这个问题

id为=“surveyImage13”的表格

...                
拯救

ID为=“surveyImage18”的表格

...
拯救

AJAX调用

<script type="text/javascript">
 $("#surveyImage13").validate({
                    rules: {
                         'responses[]': {
                            required:true                         
                        }
                    },
                     // change name of error class that is assigned to input fields
    errorClass: 'error_validate',

    errorPlacement: function (label, element) {


        // default
        if (element.is(':radio')) {
            label.insertAfter(element.parent('.form-check-inline'));
        }
        else {
            label.insertAfter(element);
        }
    }

     });
</script>


<script type="text/javascript">

     $("#surveyImage13").submit(function(e) {
        e.preventDefault();

        var route=$('#surveyImage13').attr('action');
        var pivot_id = $("#questionnaire_pivot_id").val(); 



        // Get values of checked checkboxes
        var responses = $('.form-check-inline input').filter(':checked').map(function() {
          return this.value;
        }).get();

     var isFormValid = $("#surveyImage13").valid();

    if(isFormValid){

        $.ajax({
          type: "POST",
          url: route, 
          data: {'responses': responses, 'pivot_id': pivot_id},
          success: function(response){


            $("#surveyImageForm").css("display", "none");
            $("#surveyImageAjax").css("display", "block");

            $('#SurveyTableAjaxColumn1').append(response[1]); 
            $('#SurveyTableAjaxColumn2').append(response[0]); 
          },
          error: function(){
            console.log('Error');
          }
        })
        }
     });

</script>

$（“#调查图像13”）。验证({
规则：{
“回复[]”：{
必填项：true
}
},
//更改分配给输入字段的错误类的名称
errorClass:'error_validate'，
errorPlacement:函数（标签、元素）{
//违约
if（element.is（':radio'））{
label.insertAfter（element.parent（'.formcheck inline'）；
}
否则{
标签。插入符（元素）；
}
}
});
$（“#调查图像13”）。提交（功能（e）{
e、 预防默认值（）；
var route=$（'#surveyImage13'）.attr（'action'）；
var pivot_id=$（“#问卷调查_pivot_id”）.val（）；
//获取选中复选框的值
var responses=$（'.form check inline input'）.filter（':checked'）.map（function（）{
返回此.value；
}).get（）；
var isFormValid=$（“#surveyImage13”）.valid（）；
如果（isFormValid）{
$.ajax({
类型：“POST”，
url:route，
数据：{'responses'：响应，'pivot\u id'：pivot\u id}，
成功：功能（响应）{
$（“#surveyImageForm”）.css（“显示”、“无”）；
$（“#surveyImageAjax”）.css（“显示”、“块”）；
$（'#SurveyTableAjaxColumn1'）。追加（响应[1]）；
$（'#SurveyTableAjaxColumn2'）。追加（响应[0]）；
},
错误：函数（）{
console.log（'Error'）；
}
})
}
});

根据您提供的配置，jQuery不可能执行提交操作。jQuery选择器是

#surveyImage

，它与提供的HTML中的任何

id

属性都不匹配

<form id="surveyImage13">...</form>

我认为您可以通过使用不同的查询选择器字符串来解决这个问题

$('#surveyImage13 #surveyImage18').submit...

或者

---

为什么不给你的表单一个通用的

类

$('.myClass').validate({ ...
})


$('.myClass').submit(...

---

1.不使用“提交事件”按钮，而是单击“事件” 2.获取表单id并将其存储 3.在需要id的地方使用此变量

   $(".btn").click(function(e) {
    e.preventDefault();

    var formId = '#'+ $(this).parents('form').attr('id');

    var route=$(formId).attr('action');
    var pivot_id = $("#questionnaire_pivot_id").val(); 



    // Get values of checked checkboxes
    var responses = $('.form-check-inline input').filter(':checked').map(function() {
      return this.value;
    }).get();

    var isFormValid = $(formId).valid();

    if(isFormValid){

    $.ajax({
      type: "POST",
      url: route, 
      data: {'responses': responses, 'pivot_id': pivot_id},
      success: function(response){


        $("#surveyImageForm").css("display", "none");
        $("#surveyImageAjax").css("display", "block");

        $('#SurveyTableAjaxColumn1').append(response[1]); 
        $('#SurveyTableAjaxColumn2').append(response[0]); 
      },
      error: function(){
        console.log('Error');
      }
    })
  }
});

---

谢谢你的回答，但我找到了解决办法。我在LARAVEL工作，因此我使用了

foreach

循环，基于此我能够在HTML表单上分配动态ID

@foreach($questionnaire_by_images as $t)
   <form id="surveyImage{{$t->id}}">...</form>
   <form id="surveyImage{{$t->id}}">...</form>
@endforeach

@foreach（$t）
...
...
@endforeach

剧本

 @foreach($questionnaire_by_images as $t)
    <script type="text/javascript">
        $( document ).ready(function() {    

             $("#surveyImage{{$t->id}}").validate({
                                rules: {
                                     'responses[]': {
                                        required:true                         
                                    }
                                },
                                 // change name of error class that is assigned to input fields
                errorClass: 'error_validate',

                errorPlacement: function (label, element) {


                    // default
                    if (element.is(':radio')) {
                        label.insertAfter(element.parent('.form-check-inline'));
                    }
                    else {
                        label.insertAfter(element);
                    }
                }

                 });


                 $("#surveyImage{{$t->id}}").submit(function(e) {
                    e.preventDefault();

                    var route=$('#surveyImage{{$t->id}}').attr('action');

                    var survey_image_pivot = $("#survey_image_pivot{{$t->id}}").val(); 

                    // Get values of checked checkboxes
                    var responses = $('.form-check-inline .radio{{$t->id}}').filter(':checked').map(function() {
                      return this.value;
                    }).get();

                 var isFormValid = $("#surveyImage{{$t->id}}").valid();

                if(isFormValid){

                    $.ajax({
                      type: "POST",
                      url: route, 
                      data: {'responses': responses, 'survey_image_pivot': survey_image_pivot},
                      success: function(response){


                        $("#surveyImageForm{{$t->id}}").css("display", "none");
                        $("#surveyImageAjax{{$t->id}}").css("display", "block");

                        $('#SurveyTableAjaxColumn1{{$t->id}}').append(response[1]); 
                        $('#SurveyTableAjaxColumn2{{$t->id}}').append(response[0]); 
                      },
                      error: function(){
                        console.log('Error');
                      }
                    })
                    }
                 });
        });
        </script>
    </script>

  @endforeach

@foreach（$t）
$（文档）.ready（函数（）{
$（“#surveyImage{{{$t->id}”）.validate({
规则：{
“回复[]”：{
必填项：true
}
},
//更改分配给输入字段的错误类的名称
errorClass:'error_validate'，
errorPlacement:函数（标签、元素）{
//违约
if（element.is（':radio'））{
label.insertAfter（element.parent（'.formcheck inline'）；
}
否则{
标签。插入符（元素）；
}
}
});
$（“#surveyImage{{{$t->id}”）.submit（函数（e）{
e、 预防默认值（）；
var route=$（'#surveyImage{{{$t->id}}'）.attr（'action'）；
var survey_image_pivot=$（“#survey_image_pivot{{{{$t->id}”）.val（）；
//获取选中复选框的值
var responses=$（'.form check inline.radio{{{$t->id}}'）。filter（':checked'）。map（function（）{
返回此.value；
}).get（）；
var isFormValid=$（“#surveyImage{{{$t->id}”）.valid（）；
如果（isFormValid）{
$.ajax({
类型：“POST”，
url:route，
数据：{'responses'：responses，'survey_image_pivot'：survey_image_pivot}，
成功：功能（响应）{
$（“#surveyImageForm{{{$t->id}}”）.css（“display”，“none”）；
$（“#surveyImageAjax{{{$t->id}}”）.css（“display”，“block”）；
$（'#SurveyTableAjaxColumn1{{{$t->id}'）。追加（响应[1]）；
$（'#SurveyTableAjaxColumn2{{{$t->id}'）。追加（响应[0]）；
},
错误：函数（）{
console.log（'Error'）；
}
})
}
});
});
@endforeach

是的，我知道，我忘了在这里更改stackoverflow代码。现在，当我只有一个表单的Ajax实现时。表单ID中的数字是动态的。这是什么：$（'form[ID^=“surveyImage”]'）。提交。。。这将捕获所有以

surveyImage

开头的ID，然后您可以动态生成附加的字符串，它仍然匹配。您可以

$('form[id^="surveyImage"]').submit...

$('.myClass').validate({ ...
})


$('.myClass').submit(...

   $(".btn").click(function(e) {
    e.preventDefault();

    var formId = '#'+ $(this).parents('form').attr('id');

    var route=$(formId).attr('action');
    var pivot_id = $("#questionnaire_pivot_id").val(); 



    // Get values of checked checkboxes
    var responses = $('.form-check-inline input').filter(':checked').map(function() {
      return this.value;
    }).get();

    var isFormValid = $(formId).valid();

    if(isFormValid){

    $.ajax({
      type: "POST",
      url: route, 
      data: {'responses': responses, 'pivot_id': pivot_id},
      success: function(response){


        $("#surveyImageForm").css("display", "none");
        $("#surveyImageAjax").css("display", "block");

        $('#SurveyTableAjaxColumn1').append(response[1]); 
        $('#SurveyTableAjaxColumn2').append(response[0]); 
      },
      error: function(){
        console.log('Error');
      }
    })
  }
});

@foreach($questionnaire_by_images as $t)
   <form id="surveyImage{{$t->id}}">...</form>
   <form id="surveyImage{{$t->id}}">...</form>
@endforeach

 @foreach($questionnaire_by_images as $t)
    <script type="text/javascript">
        $( document ).ready(function() {    

             $("#surveyImage{{$t->id}}").validate({
                                rules: {
                                     'responses[]': {
                                        required:true                         
                                    }
                                },
                                 // change name of error class that is assigned to input fields
                errorClass: 'error_validate',

                errorPlacement: function (label, element) {


                    // default
                    if (element.is(':radio')) {
                        label.insertAfter(element.parent('.form-check-inline'));
                    }
                    else {
                        label.insertAfter(element);
                    }
                }

                 });


                 $("#surveyImage{{$t->id}}").submit(function(e) {
                    e.preventDefault();

                    var route=$('#surveyImage{{$t->id}}').attr('action');

                    var survey_image_pivot = $("#survey_image_pivot{{$t->id}}").val(); 

                    // Get values of checked checkboxes
                    var responses = $('.form-check-inline .radio{{$t->id}}').filter(':checked').map(function() {
                      return this.value;
                    }).get();

                 var isFormValid = $("#surveyImage{{$t->id}}").valid();

                if(isFormValid){

                    $.ajax({
                      type: "POST",
                      url: route, 
                      data: {'responses': responses, 'survey_image_pivot': survey_image_pivot},
                      success: function(response){


                        $("#surveyImageForm{{$t->id}}").css("display", "none");
                        $("#surveyImageAjax{{$t->id}}").css("display", "block");

                        $('#SurveyTableAjaxColumn1{{$t->id}}').append(response[1]); 
                        $('#SurveyTableAjaxColumn2{{$t->id}}').append(response[0]); 
                      },
                      error: function(){
                        console.log('Error');
                      }
                    })
                    }
                 });
        });
        </script>
    </script>

  @endforeach