Question

我有一些表单元素，但是在用户的意愿，他们可以通过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>

Answer 1

尝试以下方法：

改变这个：

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

为：

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

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

1 个答案: