Question

我有一个网页，其中使用ajax调用获取html内容，ajax调用也返回表单元素。

使用ajax将表单添加到页面后，当我尝试提交表单时，它不工作并给我错误，表单元素未定义。

代码是这样的：

$.ajax({
    type: "GET",
    url: "url/" + $("#search_id").val(),
    async: false, 
    dataType: "html",
    error: function(XMLHttpRequest, status, errorThrown) {
        alert("Error!!");
    },
    success: function (data, status) {
        $("#parent-element").html("");
        $("#parent-element").append(data);
    },
    complete: function() {
    }
});
//Delegate click event
$('body').delegate('div#footer #submit1','click', function() {
      var form_element=document.getElementById('search_form');
      verifyChecked(form_element);
});

function verifyChecked (form_obj) {
         var formname = form_obj.name;
         var orig_query = document[formname].query.value;
         if (orig_query == "") {
            return false;
         };
         form_obj.submit();
         return false;
     }

上面的代码片段进行了ajax调用，并附加了具有类似于此的表单元素的html内容

<form id="search_form">
<input type="hidden" value="SOMETHING" name="search">
<input id="query_data" type="text" value="test" name="query">
</form>

现在，当我点击提交按钮时，我收到以下错误： TypeError：document [formname] .query is undefined

请帮助纠正错误。

注意：问题是表单元素没有绑定到表单。输入元素以HTML显示，但我认为在DOM中不存在。这就是为什么我的表单提交没有输入元素。

所以问题是我想要将输入元素绑定到形式，我该怎么做？我是否需要重新加载DOM以及我是如何做到的？

这正是我要做的事：JS Bin Example

我现在找到了解决方案，早些时候我的表格是这样的：

<form name="search" id='search_form' action="https://mysearch/search?" onSubmit="return verifyChecked(this);">
<tr>
 <td id="input_p" width="100%">
  <input type="hidden" value="SOMETHING" name="search">
  <input id="query_data" type="text" value="test" name="query">
 </td>
 <td>
  <input type="image" src="graphics/search.gif" id="submit1" />
 </td>
 </tr>
 </form>

现在我已将表单标记移动到与输入标记相同的td内：

 <tr>
 <td id="input_p" width="100%">
 <form name="search" id='search_form' action="https://mysearch/search?" onSubmit="return verifyChecked(this);">
  <input type="hidden" value="SOMETHING" name="search">
  <input id="query_data" type="text" value="test" name="query">
 </form>
 </td>
 <td>
  <input type="image" src="graphics/search.gif" id="submit1" />
 </td>
 </tr>

和bingo ..它开始工作了。我没有解释为什么它的工作。因为我在上面的页面上有相同的表单和DOM结构，但是对于ajax调用返回的表单标签，它不起作用。任何解释都有助于理解其工作原理。

Answer 1

尝试更改：

var orig_query = document[formname].query.value;

为：

var orig_query = $('#query_data').val();

看看是否有效。如果确实如此，请在下面查看更多详细信息。

如果您已经在使用jQuery，那么请完全使用它。

$('body').delegate('#submit1','click', function() {
    var $form_element = $('#search_form');
    verifyChecked($form_element);
});

function verifyChecked ($form) {
    var orig_query = $('#query_data').val();
    if (orig_query != "") {
        $form.submit();
    }
    return false;
}

如果您在表单验证方面遇到问题，请考虑使用一些可以简化该任务的库，例如jQuery Validation plugin或validate.js。

Answer 2

您的表格

<form id="search_form">...</form> <!-- No name -->

在您的功能中，您使用了var formname = form_obj.name;，但您的表单没有名称，只有id，因此var orig_query = document[formname].query.value;无效。

试试这个

function verifyChecked (form_obj) {
     var formId = form_obj.id;
     var orig_query = document.getElementById(formId).query.value;
     if (orig_query == "") {
        return false;
     }
     form_obj.submit();
     return false;
 }

<强>更新您正在使用jQuery，因此您也可以使用以下

$(document).on('click', 'div#footer #submit1', function(){ // delegate is fine too
    verifyChecked($('#search_form')[0]);
});

和你的功能

function verifyChecked (form_obj) {
    var orig_query = $('#query_data', form_obj).val();
    if (orig_query == "") {
        return false;
     }
     form_obj.submit();
}

Answer 3

试试这个

function verifyChecked (form_obj) {

     var orig_query = document.getElementById('query_data').value;
     if (orig_query == "") {
        return false;
     };
     form_obj.submit();
     return false;
 }

Ajax返回表单没有提交

3 个答案: