[javascript] 양식에 동적으로 입력 요소 추가

Program / 글쓴이

동적으로 필드 세트를 추가하는 방법에 대한 많은 블로그와 게시물을 읽었지만 모두 매우 복잡한 답변을 제공합니다. 내가 요구하는 것은 그렇게 복잡하지 않습니다.

내 HTML 코드 :

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

따라서 사용자는 필드에 정수 값 (JavaScript를 사용하여 유효성 검사 중)을 입력 input합니다. Fill Details링크 를 클릭하면 입력 할 수있는 입력 필드가 나타납니다. 나는 자바 스크립트를 사용하여 이것을 달성하고 싶습니다.

저는 자바 스크립트 전문가가 아닙니다. input링크를 통해 필드 의 사용자 가 입력 한 정수를 검색하고 해당 입력 필드 수를 표시하는 방법을 생각했습니다 .

답변

onclick텍스트 필드에 대한 입력 값을 얻기 위해 이벤트 핸들러를 사용할 수 있습니다 . 다음을 id통해 안전하게 참조 할 수 있도록 필드에 고유 한 속성 을 제공해야합니다 document.getElementById().

요소를 동적으로 추가하려면 요소를 배치 할 컨테이너가 있어야합니다. 예를 들어 <div id="container">. 를 document.createElement()사용 appendChild()하여 새 요소 를 만들고을 사용 하여 각 요소를 컨테이너에 추가합니다. 의미있는 name속성 을 출력하는 데 관심이있을 수 있습니다 (예 : 양식으로 제출할 경우 name="member"+i동적으로 생성 된 각에 대해) <input>.

을 사용하여 <br/>요소를 작성할 수도 있습니다 document.createElement('br'). 일부 텍스트 만 출력하려면 document.createTextNode()대신 사용할 수 있습니다 .

또한 컨테이너가 채워질 때마다 컨테이너를 지우려면 hasChildNodes()및 removeChild()함께 사용할 수 있습니다 .

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

이 JSFiddle 에서 작동하는 샘플을 참조하십시오 .

답변

양식, 필드 및 삭제 / 제거 동작을 동적으로 포함하려면이 JQuery 코드를 사용해보십시오.

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
    <button class="add_form_field">Add New Field &nbsp;
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

스 니펫 확장

여기에서 데모 참조

답변