Ajax가 양식을 제출하지 않았습니다.

Question

ajax 호출을 사용하여 html 내용을 가져 오는 웹 페이지가 있고 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; 
    } 

위의 코드는 아약스 호출을하고 지금이

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

과 같은 폼 요소를했다 HTML 내용을 추가합니다 :

코드는 다음과 같은 것입니다 제출 버튼, 나는 그 오류가 발생합니다 : 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> 

이제

내가 같은 내부에 내 양식 태그를 이동 한 ..

<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> 

빙고를이 일을 시작 : 입력 태그로 TD. 왜 작동하는지 설명이 없습니다. 위의 페이지에서 동일한 양식과 DOM 구조가 완벽하게 작동하지만 아약스 호출에 의해 반환 된 양식 태그에 대해서는 작동하지 않습니다. 어떤 설명이 왜 작동하는지 이해하는 데 도움이 될 것입니다.

Answer 1

시도의 변화 :

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

및 그 작동하는지 확인 :

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

합니다. 그럴 경우 아래에서 자세한 내용을 확인하십시오.

이미 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

는 var formname = form_obj.name; 사용한 함수에서이

function verifyChecked (form_obj) { 

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

Answer 3

양식을

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

을 시도하지만 형식은 이름이없는 있지만 id 그래서이 var orig_query = document[formname].query.value;이 작동하지 않습니다.

$(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(); 
}