提交 Ajax 加载的表单元素以及非 Ajax 加载的表单答案

【问题标题】：Submit Ajax Loaded Form Elements Along with Non-Ajax Loaded Form提交 Ajax 加载的表单元素以及非 Ajax 加载的表单
【发布时间】：2014-08-26 03:04:46
【问题描述】：

我有一些表单元素，但是根据用户的意愿，他们可以通过 ajax 加载其他一些表单元素（即高级搜索等）。我想通过 ajax 加载它们，因为有一个类别部分相当有很多类别，除非绝对需要，否则我宁愿不总是将它们加载到页面中。

但是，当添加其他 AJAX 加载的表单元素时，它们在源代码中不可见，并且当我提交表单时，即使它们理论上在表单标签内，它们也不会包含在其他原始 HTML 项目中.如果我将输入直接放在 ajaxforms div 中，而不是通过 AJAX 加载并提交，它们会随表单传递并显示在以下页面的 URL 参数中。

所以，也许我需要使用 Jquery（这是我熟悉的，但如果我能整理出来我很乐意使用 JS）来提交这些隐藏的 Ajax 加载输入？或者，我使用错误的方法插入它们？

表单需要直接提交，而不是通过 ajax 在后台提交，因为下一页使用 $_REQUEST 来解析各种数据。如果出于某种原因这似乎不太理想，我欢迎任何替代方法。

HTML

 <form action="/Search.html" name="SearchForm" id="SearchForm" method="get">

 <div id="main">
 <input type="text" name="mainformitem">
 <img src="/ajaxforms.gif" id="ajaxformbutton">

 <div id="ajaxforms">
 <!-- AJAX FORM CONTENT WILL BE LOADED HERE -->
 </div>

 </form>
 </div>

要在额外表单中加载的 Jquery。

   //LOAD IN THE EXTRA FORMS
    $(document).ready(function(){

   //Drop Down Advanced Form Options onclick

   $("#ajaxformbutton").click(function(){       

       $( "#ajaxforms" ).load( "ajaxforms.php" );

   })  
 });

我在提交 ajax 诱导的表单数据和 HTML 表单数据时的尝试。

$(document).ready(function(){
 $('#SearchForm').on("submit", function(event) {

   // stop the form from submitting
    event.preventDefault();

    // get data in the inputs of the form
  var data = {};
  var inputs = $('#SearchForm').children("input, select, textarea");
  inputs.each(function($element){
  console.log($element);
  data[$element.attr('name')] = $element.val();

  });

  // submit all forms
$('#SearchForm').submit(data);
});
});


 </script>

【问题讨论】：

如果您不希望 ajax 表单元素与表单一起提交；为什么不直接将它们附加到表单之外呢？
您的声明“它们不可见，因此未与原始表单一起提交。”没有任何意义。可见性与提交无关。如果您将它们附加到表单中，就像您所做的那样，它们将被提交。
我建议保留表单原样（不要附加您的“onsubmit”处理程序），并通过萤火虫查看发布了哪些实际变量。
@pkExec 也许我说的不是正确的事情......但是......如果我只是从我通过 ajax 加载的页面中复制内容并将其直接放在 #AjaxForms div 中，然后单击提交，输入的项目已提交并显示在下一页的 URL 中，显示它们已提交。但是，如果我通过 AJAX 加载它们，我会在浏览器中看到它们，但在 HTML 源代码中看不到它们。当我点击提交时，它们不会与表单一起提交，也不会显示在下一页的 URL 中。谢谢！
@shuskic 我确实希望他们提交。这就是这个问题的目标。目前，当我通过 ajax 加载它们时，它们没有与其他 HTML 表单项一起提交。它们出现在 HTML 中，但没有通过。谢谢！

标签： jquery forms

【解决方案1】：

尝试以下方法：

改变这个：

 $('#SearchForm').on("submit", function(event) {

到：

$(document).on('submit', '#SearchForm', function(event) {

【讨论】：