Question

javascript를 사용하여 입력 텍스트를 포함한 양식을 추가하고 싶습니다.
추가가 제대로 작동하지만 제출 버튼을 클릭해도 아무런 변화가 없습니다.

if (document.getElementById("run_name_query_box") == null) { 
    var run_name_search = '<fieldset id="run_name_query_box">' + 
     '<table> <td><tr>' + 
     '<p style="font-size:16px"> Runname:</p>' + 
     '<input type="text" style="font-size:16px" id="run_name">' + 
     '<form method="post" action=query name="query_runname_name">' + 
     '<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' + 
     '</form>' + 
     '</tr></td></table>' + 
     '</fieldset>'; 
    $("#query_type_box").append(run_name_search); 
} 

run_name_querycreator() 함수는 입력 값을 설정
여기서 코드이다.

는 이미 다른 곳에서 거의 같은 일을 사용하고 거기 작동 :

'<form method="post" action=query name="query">' +         
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()" id="search" type="submit" name="search" >' + 
'</form>' 

난 그냥 너무 작동 주요 HTML 본문으로 일반 HTML 부분을 복사합니다. 이것은 모두 피라미드 인터페이스에서 사용되는 mako 파일의 일부입니다.

Answer 1

사용자의 HTML 형식이 잘못되었습니다. 나는 form 요소가 table 요소의 자식이 될 수 있다고 생각하지 않는다.

코드는

var run_name_search = '<fieldset id="run_name_query_box">' + 
    '<form method="post" action=query name="query_runname_name">' + 
    '<table>'+ 
    '<tr><td>' + 
    '<p style="font-size:16px"> Runname:</p>' + 
    '<input type="text" style="font-size:16px" id="run_name">' + 
    '<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> '; 
$("#query_type_box").append(run_name_search); 

이 코드는 HTML을 생성,

<fieldset id="run_name_query_box"> 
    <p style="font-size:16px">Runname:</p> 
    <input style="font-size:16px" id="run_name" type="text"> 
    <input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit"> 
    <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <form method="post" action="query" name="query_runname_name"></form> 
      </tr> 
     </tbody> 
    </table> 
</fieldset> 

더 폼 요소가 <form> 내에서 없다, 이런 식으로해야합니다. (귀하의 양식을 포함하여 submit 버튼). 그렇다면 어떻게 작동할까요?

코드는

<fieldset id="run_name_query_box"> 
    <form method="post" action="query" name="query_runname_name"> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <p style="font-size:16px">Runname:</p> 
         <input style="font-size:16px" id="run_name" type="text"> 
         <input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit"> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</fieldset> 

당신은 당신에 의해 생성 된 FIX 섹션 동적 요소 전에 을 볼 수있는이 바이올린에서이 FIDDLE

를 참조하십시오,이 같은 HTML이 작업을 생성해야합니다. AFTER FIX 섹션에서 올바른 html 형식을 볼 수 있습니다.

참고 : 동적 HTML을 사용하는 경우 개발자 도구에서 동적으로 생성 된 HTML을 확인하십시오.

Answer 2

동작 예 :http://jsfiddle.net/awesome/6hh8r/

설명 : 글로벌 네임 스페이스의 기능 onclickrun_name_querycreator() 누락 명백한 폼 데이터 .post()에 연결된 추가.

window.run_name_querycreator = function() { 
    //alert($('#run_name').val()); 
    var x = '{"run_name":"' + $('#run_name') + '"}' 

    $.ajax({ 
     type: "POST", 
     url: $form.attr('action'), 
     data: x, 
     success: alert('success'), 
     dataType: 'json' 
    }); 
} 

$(function() { 
    if (document.getElementById("run_name_query_box") === null) { 
     var run_name_search = '<fieldset id="run_name_query_box">' + 
      '<table> <td><tr>' + 
      '<p style="font-size:16px"> Runname:</p>' + 
      '<input type="text" style="font-size:16px" id="run_name">' + 
      '<form method="post" action=query name="query_runname_name">' + 
      '<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' + 
      '</form>' + 
      '</tr></td></table>' + 
      '</fieldset>'; 
     $("#query_type_box").append(run_name_search); 
     $form = $('[name="query_runname_name"]'); 
     $form.submit(function (e) { 
      e.preventDefault(); 
     }); 
    } 
});