使用dom Javascript將新創建的標簽和輸入文本添加到表單嗎？
[英]Add new created label and input-text to form using dom Javascript?
問題描述
我有三個字段將由用戶填寫。 一個問題，另外兩個問題。 我想讓用戶單擊添加命題時就可以添加第三個或任意數量的命題。 我開始對函數進行編碼，但仍然錯過了
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
2 個解決方案
解決方案1
0 2019-02-22 13:33:32
在函數中，您還必須在其父項上附加標簽。 像下面-
function myFunction() { var form = document.getElementById("myForm"); var input = document.createElement("input"); form.appendChild(input) }
<form id="myForm" method="POST" action="./exam_coordinates"> <label for="question"> Question </label> <br> <input class="champ" type="textarea" name="question" id="question" value=""><br><br> <label for="ans"> Answers </label> <br> <input type="checkbox" name="ans1" id="ans1" values="" /> <input type="text" name="ans1" id="ans1" value=""><br> <input type="checkbox" name="ans2" id="ans2" /> <input type="text" name="ans2" id="ans2" value=""><br> <br> <button type="button" onclick="myFunction()">Add proposition</button> <br><br> <input type="submit" value="submit"> </form>
如果要將元素放置在任何特定位置，則應在表單元素中創建包裝器，如下所示-
function myFunction() { let wrapper = document.getElementById("dynamic-fields"); var input = document.createElement("input"); wrapper.appendChild(input) }
<form> <!-- ...input fields... --> <div id="dynamic-fields"></div> <br> <!-- ...buttons.... --> <button type="button" onclick="myFunction()">Add proposition</button> </form>
這樣，它將那些動態生成的元素放在表單頁面的特定位置。
解決方案2
0 已采納 2019-02-22 14:45:54
如果我的問題是對的，則需要添加輸入以根據用戶的需要從用戶那里獲得更多答案。 如果是這樣，請參閱以下內容-
var addButton = $('#add_button'); var wrapper = $('#more_answers'); $(addButton).click(function(e) { e.preventDefault(); var lastID = $("#myForm input[type=text]:last").attr("id"); var nextId = parseInt(lastID.replace( /^\\D+/g, '')) + 1; $(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/><a href="#" class="delete">Delete</a><div>`); }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).parent('div').remove(); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <form id="myForm" method="POST" action="./exam_coordinates"> <label for="question"> Question </label> <br> <input class="champ" type="textarea" name="question" id="question" value=""><br><br> <label for="ans"> Answers </label> <br> <input type="checkbox" name="ans1" id="ans1" values="" /> <input type="text" name="ans1" id="ans1" value=""><br> <input type="checkbox" name="ans2" id="ans2" /> <input type="text" name="ans2" id="ans2" value=""><br> <div id="more_answers"></div> <br> <button id="add_button">Add proposition</button> <br><br><br> <input type="submit" value="submit"> </form> </body>
Javascript DOM-將表單元素添加到新創建的appendChild嗎？
[英]Javascript DOM - add form element to newly created appendChild?
使用JQuery為DOM動態地為每個輸入標簽添加標簽標簽
[英]Add a label tag for each input tag dynamically for the DOM using JQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.