HTML 양식에 입력 필드 추가

시마 나치

추가 버튼을 클릭하여 아래의 자바 스크립트를 사용하여 양식에 양식 입력 필드를 동적으로 추가하고 싶습니다.

var i = 0;
function increment() {
i += 1;
}

function addfieldFunction() {
    var r = document.createElement('div');
    var y = document.createElement("INPUT");
    var z = document.createElement("INPUT");
    y.setAttribute("class", "dash-input");
    y.setAttribute("type", "text");
    y.setAttribute("placeholder", "University");
    z.setAttribute("class", "dash-input");
    z.setAttribute("type", "text");
    z.setAttribute("placeholder", "Course");
    increment();
    y.setAttribute("Name", "a_level[ + i ][0]");
    r.appendChild(y);
    z.setAttribute("Name", "a_level[ + i ][1]");
    r.appendChild(z);
    document.getElementById("form-div").appendChild(r);
}



<form class = "dash-form" method = "POST" action = "/" >
     <div id = "form-div">
         <input class = "dash-input" type = "text" name = "a_level[+i][0]" value = "" placeholder = "University"/>
         <input class = "dash-input" type = "text" name = "a_level[+i][1]" value = "" placeholder = "Course"/>
     </div>
     <div class = "dash-submit">
        <input class = "dash-submit-button" type = "submit" value = "Submit"/>
    </div>
</form>
<div class = "dash-add">
    <button class = "dash-add-button" onclick = "addfieldFunction()">ADD</button>
</div>

이 함수는 아래와 같이 정수를 증분하고 반환하는 대신 i 를 반환합니다.

<div id = "form-div">
    <input class = "dash-input" type = "text" name = "a_level[0][0]" value = "" placeholder = "University"/>
    <input class = "dash-input" type = "text" name = "a_level[0][1]" value = "" placeholder = "Course"/>
</div>
레이온

연산자를 i사용하여 변수 연결+(concatenation operator)

연결 연산자는(+) 또 다른 문자열을 반환 두 개의 문자열 값을 합쳐 union두 피연산자 스트링.

var i = 0;

function increment() {
  i += 1;
}

function addfieldFunction() {
  var r = document.createElement('div');
  var y = document.createElement("INPUT");
  var z = document.createElement("INPUT");
  y.setAttribute("class", "dash-input");
  y.setAttribute("type", "text");
  y.setAttribute("placeholder", "University");
  z.setAttribute("class", "dash-input");
  z.setAttribute("type", "text");
  z.setAttribute("placeholder", "Course");
  increment();
  y.setAttribute("name", "a_level[ " + i + " ][0]"); //Keep attribute in lower case
  r.appendChild(y);
  z.setAttribute("name", "a_level[ " + i + "][1]");
  r.appendChild(z);
  document.getElementById("form-div").appendChild(r);
}
<form class="dash-form" method="POST" action="/">
  <div id="form-div">
    <input class="dash-input" type="text" name="a_level[+i][0]" value="" placeholder="University" />
    <input class="dash-input" type="text" name="a_level[+i][1]" value="" placeholder="Course" />
  </div>
  <div class="dash-submit">
    <input class="dash-submit-button" type="submit" value="Submit" />
  </div>
</form>
<div class="dash-add">
  <button class="dash-add-button" onclick="addfieldFunction()">ADD</button>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

HTML에 입력 필드 추가

분류에서Dev

HTML 양식에 입력 필드를 추가하는 JavaScript 함수가 명확하지 않습니다.

분류에서Dev

목록에 텍스트 (양식) 필드 입력 추가

분류에서Dev

코드에 입력 선택기가없는 HTML 양식

분류에서Dev

Angular 8 : 버튼 오류 코드가있는 양식에 입력 필드 추가

분류에서Dev

특정 값이 양식 필드에 입력 될 때까지 양식 필드를 동적으로 추가

분류에서Dev

Javascript : HTML 양식 숨겨진 입력 필드에 값 설정

분류에서Dev

셀레늄의 HTML 양식에서 입력 필드 선택

분류에서Dev

양식 객체에서 클릭 반응 js에 입력 필드 추가

분류에서Dev

html 및 css가 가능한 숨겨진 양식 필드에 용어를 입력 하시겠습니까?

분류에서Dev

Flutter에서 제출 버튼과 숨겨진 입력 필드가있는 HTML 양식을 표시하는 방법

분류에서Dev

부트 스트랩이있는 HTML 양식 입력 필드에서 maxlength가 작동하지 않음

분류에서Dev

HTML 문자열에 라이브 추가 양식 입력

분류에서Dev

HTML 양식에 동적으로 필드 추가

분류에서Dev

Django 양식 필드에 HTML 목록을 추가하는 방법

분류에서Dev

HTML 양식 입력 필드가 비어있는 경우 Google Apps Script 오류

분류에서Dev

HTML 의미 : 항목 삭제를위한 입력 필드가없는 양식

분류에서Dev

HTML 양식에 입력 필드를 추가하면 그 아래의 모든 항목이 속성을 갖습니다.

분류에서Dev

양식 입력 필드를 동적으로 추가

분류에서Dev

입력 번호 양식 필드에 따라 가격 변경

분류에서Dev

양식 필드에 가변 내용을 입력하는 방법

분류에서Dev

JQuery의 입력 필드에 값 추가

분류에서Dev

활성 입력 필드에 값 추가

분류에서Dev

이미지에 필드 (입력) 추가

분류에서Dev

다른 텍스트 필드의 숫자 입력 후 html 형식의 추가 텍스트 필드

분류에서Dev

기존 필드를 채운 후 양식에 입력 필드 세트를 추가하는 방법

분류에서Dev

Typescript 키보드 리스너가 HTML 입력 양식에 입력하지 못하도록합니다.

분류에서Dev

HTML 양식에서 입력 필드를 정렬하기 어려움

분류에서Dev

Drupal 노드 추가 / 편집 양식-테이블의 텍스트 입력 필드

Related 관련 기사

  1. 1

    HTML에 입력 필드 추가

  2. 2

    HTML 양식에 입력 필드를 추가하는 JavaScript 함수가 명확하지 않습니다.

  3. 3

    목록에 텍스트 (양식) 필드 입력 추가

  4. 4

    코드에 입력 선택기가없는 HTML 양식

  5. 5

    Angular 8 : 버튼 오류 코드가있는 양식에 입력 필드 추가

  6. 6

    특정 값이 양식 필드에 입력 될 때까지 양식 필드를 동적으로 추가

  7. 7

    Javascript : HTML 양식 숨겨진 입력 필드에 값 설정

  8. 8

    셀레늄의 HTML 양식에서 입력 필드 선택

  9. 9

    양식 객체에서 클릭 반응 js에 입력 필드 추가

  10. 10

    html 및 css가 가능한 숨겨진 양식 필드에 용어를 입력 하시겠습니까?

  11. 11

    Flutter에서 제출 버튼과 숨겨진 입력 필드가있는 HTML 양식을 표시하는 방법

  12. 12

    부트 스트랩이있는 HTML 양식 입력 필드에서 maxlength가 작동하지 않음

  13. 13

    HTML 문자열에 라이브 추가 양식 입력

  14. 14

    HTML 양식에 동적으로 필드 추가

  15. 15

    Django 양식 필드에 HTML 목록을 추가하는 방법

  16. 16

    HTML 양식 입력 필드가 비어있는 경우 Google Apps Script 오류

  17. 17

    HTML 의미 : 항목 삭제를위한 입력 필드가없는 양식

  18. 18

    HTML 양식에 입력 필드를 추가하면 그 아래의 모든 항목이 속성을 갖습니다.

  19. 19

    양식 입력 필드를 동적으로 추가

  20. 20

    입력 번호 양식 필드에 따라 가격 변경

  21. 21

    양식 필드에 가변 내용을 입력하는 방법

  22. 22

    JQuery의 입력 필드에 값 추가

  23. 23

    활성 입력 필드에 값 추가

  24. 24

    이미지에 필드 (입력) 추가

  25. 25

    다른 텍스트 필드의 숫자 입력 후 html 형식의 추가 텍스트 필드

  26. 26

    기존 필드를 채운 후 양식에 입력 필드 세트를 추가하는 방법

  27. 27

    Typescript 키보드 리스너가 HTML 입력 양식에 입력하지 못하도록합니다.

  28. 28

    HTML 양식에서 입력 필드를 정렬하기 어려움

  29. 29

    Drupal 노드 추가 / 편집 양식-테이블의 텍스트 입력 필드

뜨겁다태그

보관