動態創建表單元素

你好我有HTML表單，我正嘗試在按鈕單擊事件上創建表單的div部分。我的HTML代碼如下所示，但不會在按鈕單擊事件後添加表單元素。我需要創建所有的行和單元格以及輸入文本框，就像在Person div元素中一樣，並且當我們點擊AddPerson按鈕時在Div-Person中添加或添加。我有更多的Div元素，其中包含其他輸入元素，在單擊與該DIV標記關聯的按鈕後，需要添加或創建其他元素。以下是帶有3個輸入字段和一個按鈕的One Div元素的示例代碼。幫助將非常讚賞。i或j變量的值必須遞增。它總是以i = 1來說是一個問題？動態創建表單元素

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Sample</title> 

    <style type="text/css"> 
     form 
     { 
      width: 600px; 
      background-color:#FA7300; 
      margin: 0px auto; 
      overflow: hidden; 
     } 
    </style> 
    <script> 
    var i=1; 
    var j=1; 
    //create Person section 

    function CreatePerson(divName) 
    { 
    var y= document.createElement('div'); 
    y.innerHTML="<br/><input type='text' name='Key_Firstname_'+i+1><br/><input type='text' name='Key_lastname_'+i+1><br/><input type='text' name='Key_DOB_'+i+1>"; 

    document.getElementById(divName).appendChild(y); 
    } 




    </script> 
</head> 
<body> 
<form method="post" name="mainfrm" action=""> 



    <fieldset style="border:0px; background-color: #ffffff; margin-left:50px; width:500px"> 

     <table style="width: 100%"> 
      <tr> 
       <td style="width:125px">&nbsp; 

       </td> 
       <td style="width:375px">&nbsp; 

       </td> 

      </tr> 
      <tr> 
      <td>Acc NUMBER</td> 
       <td align="left"> 
        <input name="Key_Acc_Number_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr> 
      <td>Branch NUMBER</td> 
       <td align="left"> 
        <input name="Key_BNumber_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr><td align="center" COLSPAN="2"> <b>PERSON</b><td></tr> 
      <div id="Person"> 

      <tr> 
      <td>First Name</td> 
       <td align="left"> 

        <input name="Key_FirstName_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
      <td>Last Name</td> 
       <td align="left"> 

        <input name="Key_Lastname_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
       <td>DOB</td> 
       <td align="left"> 

        <input name="Key_DOB_1" size="35" type="text" /> 
       </td> 
       <td><button onClick="CreatePerson('Person')">Add Person</button> 
       </td> 
       </tr> 
       </div> 
       </table> 
       </fieldset> 
       </form> 
</body> 
</html>

我修改JavaScript函數這一點，也創造2個和姓文本框在頁面的頂部，但只要代碼是從Java腳本現有結束這些文本框消失。

var i=2; 
var j=2; 
function CreatePerson(divName) 
    { 
    var Y= document.createElement("div"); 
    Y.id=divName+i; 
    // Y.innerHTML="<tr> 
    var appendText="<tr><td>First Name</td><td align="+"left"+"><input name="+"Key_FirstName_"+i+" size="+"35"+" type="+"text"+" /></td></tr><tr><td>Last Name</td></tr><tr><td align="+"left"+"><input name="+"Key_lastName_"+i+" size="+"35"+" type="+"text"+" /></td></tr>"; 

Y.innerHTML=appendText; 
    document.getElementById(divName).after(Y); 
    i++; 
    }

來源

2017-10-16 user2897967

'y.innerHTML =」

;'缺少關閉'「' – tommyO

您需要將您的js放在底部 – MohitC

不，你沒有@MohitC - 'CreatePerson'函數在_defined_的頭部，在div應用之前編輯爲存在，但直到onClick處理程序觸發時纔會調用_called_;並且只能在整個DOM被加載和渲染後觸發。如果您想討論最佳實踐，最好將您的JS放在一個完全獨立的'.js'文件中，並從DOMContentLoaded事件（或jquery'$（document）.ready（）'） –

-1

嘗試這種

<form method="POST"> 
    <div id="dynamicInput"> 
      Entry 1<br><input type="text" name="myInputs[]"> 
    </div> 
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"> 
</form> 

var counter = 1; 
var limit = 3; 
function addInput(divName){ 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 
      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
      document.getElementById(divName).appendChild(newdiv); 
      counter++; 
    } 
}

dynamically add form elements via JavaScript

來源

2017-10-16 18:33:20

末尾缺少結尾引號（'''）。稍加說明會有幫助。問題是什麼以及代碼如何解決它？ – showdev

是的，您確實不僅僅是添加人們提到的缺少的近似引用''''。你改變了什麼？ _你爲什麼做這個改變？爲什麼之前沒有工作？（更新你的答案，不要在評論中向我解釋;我已經知道我在這裏提出的3個問題的答案） –

添加缺少-close報價，但仍然無法正常工作。 – user2897967

動態創建表單元素

回答

相關問題