0

ajax呼び出しを使用してhtmlコンテンツを取得するWebページがあり、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 に答える