문제

나는 스프링 형태를 사용하여 역동적 인 형태를 만들려고 노력하고 있습니다. 기본적으로 양식은 학습 활동의 제목을 얻은 다음 "학습 활동을 하나 더 추가합니다"라는 버튼이 있습니다. 따라서 사용자는 학습 활동을 하나 더 추가 할 수 있습니다. 나는 그가 좋아하는만큼 추가 할 수 있기를 원합니다.

나는 이것을 시도하지 않았으므로 내가 생각한 첫 번째 솔루션으로 오류가 발생했습니다. 나는 정말로 내가 한 일을하는 느낌이 들었지만 오류가 발생할 것이지만 내가하려는 일을 집으로 몰아 넣습니다. 코드는 다음과 같습니다.

<script language="javascript">
 fields = 0;
 function addInput() {
      document.getElementById('text').innerHTML += "<form:input path='activity[fields++].activity'/><br />";
 }


<div id="text">
  <form:form commandName="course">
   Learning Activity 1 
   <form:input path="activity[0].activity"/>
    <input type="button" value="add activity" onclick="addInput()"/>
    <br/><br/>
   <input type="submit"/>
  </form:form>  
  <br/><br/>
 </div>
도움이 되었습니까?

해결책

당신은 사용할 수 없습니다form:input> JavaScript 내에서 서버 측에서 실행되는 JSP 태그이기 때문입니다.

그러나 HTML 입력이 스프링 명령 개체의 필드에 어떻게 결합되는지에 대한 마법의 것은 없습니다. 그것은 단지 이름을 기반으로합니다. 따라서 JavaScript에서 새를 추가하십시오<input type="text" name="activity[1].activity">(예를 들어 - 분명히 인덱스를 증가시킬 것입니다).

보다 복잡한 컨트롤에 사용한 또 다른 옵션은 기존 컨트롤의 HTML (스프링 양식 : 입력 태그를 사용하여 작성)을 잡고 복제 된 숫자를 증분 숫자로 대체하는 것입니다. jQuery를 사용하면 훨씬 쉬워집니다.

추가로 편집 : 문제를 일으킬 수있는 한 가지 문제 : 새로운 입력 상자를 OUTER DIV ( "Text")의 끝까지 추가하고 있습니다. 즉, 양식 태그 내부에 있지 않음을 의미합니다. 작동하지 않습니다.

다른 팁

~이다 <form:input> JSP 태그? 그렇다면 클라이언트 측 JavaScript를 추가하십시오 <form:input> 서버 측 JSP 엔진이 해석하지 않기 때문에 DOM의 노드는 영향을 미치지 않습니다.

JavaScript는 RAW HTML 및 DOM (예 : <input> 요소.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top