자바 스크립트로 양식을 동적으로 작성하기

폼에서 작성할 필드 수에 관해서 사용자로부터 입력을받는 함수를 작성하려고했습니다. 그런 다음이 함수는 텍스트 상자와 사용자가 제출 한 숫자의 숫자 (사용자 입력과 동일)를 포함하는 Form을 만듭니다. 나는 함수를 썼다. 그러나 내가 잘못한 곳에서는 작동하지 않는 것 같다. 어느 누구라도 나를 도울 수 있다면 감사 할 것입니다. 내 코드 : 여기자바 스크립트로 양식을 동적으로 작성하기

function createTextBox() 
    { 
     var box=document.getElementById('pop');        //getting the ID of the containner 
     var val=document.getElementById('uValue').value;     //getting the Input value from the user 

     var candidateForm=document.createElement('form');     //Creating a form and giving the attributes 
     candidateForm.name="candidateForm"; 
     candidateForm.method="post"; 
     candidateFomr.action="process.php"; 

     for(var i=0; i<val;i++) 
     { 
      var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
      newTextbox.type="textbox"; 
      newTextbox.name="candidate[]"; 
      newTextbox.id="candidateId"; 

      candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 

     } 

     var saveButton=document.createElement('input');      //creating the submit button which when clicked will save the value written in the textboxes 
     saveButton.type="submit"; 
     saveButton.name="submitButton"; 
     saveButton.value="Enter"; 
     candidateForm.appendChild(saveButton);        //putting the submit button in the form 

     box.appendChild(candiateForm);          //And putting the form in the containner. 

     //alert (val); 
    }

는

<body> 
<input type="textbox" name="value_box" id="uValue" ></input> 
<input type="button" onclick="javascript:createTextBox()" value="Click"></input> 
<div id="pop"></div> 
</body>

감사합니다 사전에 HTML 부분입니다 : D

출처

2012-07-22 Chakra

에

<input type="textbox" name="value_box" id="uValue" /> <input type="button" onclick="javascript:createTextBox()" value="Click"/> <div id="pop"></div>

또한 변경에 HTML을 변경

그것의 작동하지 않는 이유는 잘 모릅니다 작동하지 않습니다. : – Chakra

** 어떻게 작동하지 않습니까? 어떻게됩니까? – SLaks

val이 숫자인가요? 아마도 5 대신에 "5"와 같은 문자열 일 수 있습니다. var val = + document.getElementById ('uValue') .value – Azder

가 input 유형으로 시작하려면 독립 태그이다. 내가 그것을 실행할 때

는 JS

function createTextBox() 
    { 
     var box=document.getElementById('pop');        //getting the ID of the containner 
     var val=document.getElementById('uValue').value;     //getting the Input value from the user 

     var candidateForm=document.createElement('form');     //Creating a form and giving the attributes 
     candidateForm.name="candidateForm"; 
     candidateForm.method="post"; 
     candidateFomr.action="process.php"; 

     for(var i=0; i<val;i++) 
     { 
      var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
      newTextbox.type="textbox"; 
      newTextbox.name="candidate[]"; 
      newTextbox.id="candidateId"; 

      candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 

     } 

     var saveButton=document.createElement('input');      //creating the submit button which when clicked will save the value written in the textboxes 
     saveButton.type="submit"; 
     saveButton.name="submitButton"; 
     saveButton.value="Enter"; 
     candidateForm.appendChild(saveButton);        //putting the submit button in the form 

     box.appendChild(candiateForm);          //And putting the form in the containner. 

     //alert (val); 
    }

출처

2012-07-22 17:57:58

자바 스크립트가 완벽하게 작동합니다 ... 그 두 종류의 TYPO 거기에 .. – Chakra

네가 길을 동생 형님 감사합니다 .. : D 조 – Chakra

당신은 당신의 코드에서 두 오타가 있습니다. 이 :

candidateForm.action="process.php";

그리고이 :

box.appendChild(candidateForm);

box.appendChild(candiateForm);

이 될해야

candidateFomr.action="process.php";

이이어야한다오타가 수정 된 코드를 테스트 해 보았습니다.

for(var i=0; i<val;i++) 
{ 
    var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
    newTextbox.type="textbox"; 
    newTextbox.name="candidate[]"; 
    newTextbox.id="candidateId"; 

    candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 
    var brElement = document.createElement("br"); 
    candidateForm.appendChild(brElement); 

}

편집 : 글 상자를 만들려면

는 각각 후 br 요소를 추가 할 수 있습니다, 수직으로 표시이 같은 뜻? 당신을 위해

for(var i=0; i<val;i++) 
{ 
    var lblElement = document.createElement("label"); 
    lblElement.innerHTML = "Label " + (i+1) + " "; 
    candidateForm.appendChild(lblElement); 
    var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
    newTextbox.type="textbox"; 
    newTextbox.name="candidate[]"; 
    newTextbox.id="candidateId"; 

    candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 
    var brElement = document.createElement("br"); 
    candidateForm.appendChild(brElement); 

}

출처

2012-07-22 17:45:51 jeff

where TYPO 형제였습니까 ???? – Chakra

오타가있는 곳을 표시하기 위해 내 대답을 편집했습니다. – jeff

고마워요 남자가 잘 작동합니다 .. 감사합니다 u : D – Chakra

또 다른 방법 :

<script> 
     function generateForm() 
     { 
     $FormHTML = ""; 
     $fieldCount = document.getElementById("fieldsCount").value; 
     console.log($fieldCount); 
     for ($i = 1; $i <= $fieldCount; $i++) 
     { 
      $FormHTML += "<div><b>Form input " + $i + ":</b><br><input type='text' id='element" + $i + "' name='element" + $i + "' style='width:200px;'/></div>\n"; 
     } 
     document.getElementById("FieldsContainer").innerHTML = $FormHTML; 
     } 
    </script> 

    <form> 
     <select id="fieldsCount" name="fieldsCount" onChange="generateForm()"> 
     <option value="0">Please choose</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="5">5</option> 
     <option value="10">10</option> 
     </select> 
     <div id="FieldsContainer"></div> 
    </form>

출처

2012-07-22 17:48:19 Darcey

도움을 주셔서 감사합니다 .. 크게 감사 : D 조 – Chakra

자바 스크립트로 양식을 동적으로 작성하기

답변

관련 문제