0

我有一个网页，在该网页上使用 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>

和宾果游戏..它开始工作了。我没有解释为什么它的工作。因为我在上面的页面上具有相同的表单和 DOM 结构，可以完美运行，但是对于 ajax 调用返回的表单标记，它不起作用。任何解释都将有助于理解其工作原理。

4

3 回答 3

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 插件或validate.js。

于 2012-10-01T09:47:21.013 回答
1

你的表格

<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();
}
于 2012-10-01T09:58:30.890 回答
0

尝试这个

function verifyChecked (form_obj) {

     var orig_query = document.getElementById('query_data').value;
     if (orig_query == "") {
        return false;
     };
     form_obj.submit();
     return false;
 }
于 2012-10-01T09:54:44.527 回答