前のページのユーザー入力とボタンを使用して、ユーザーがデバイスに割り当てたい「属性」の数を定義できるフォームがあります。
このページでは、これらの各属性の名前とタイプを定義するようにユーザーに求めます。ユーザーが選択リストから「Select Option List」を選択すると、ユーザーがテキスト入力を追加してオプションを追加できるようにするための jquery append 「add」によってボタンが表示されます。ただし、最も近い、次の、および兄弟を使用すると、操作は機能しません。これらを使用しなくても機能しますが、ページ上の「オプション」クラスのすべてのインスタンスにテキスト入力を割り当てます。
何らかの理由でコードがフィドルで正しく機能しないため、ページコード全体をコピーして貼り付ける必要がありました。
<!-- Declare num variable from form on previous page -->
<?php echo "<script> var num=\"".$_POST['number-of-attributes']."\";</script>"; <script type="text/javascript>
//variable to count the number of attributes
count=0;
//Convert Php post to an int
num=parseInt(num, 10);
//This method inserts the number of attributes present in the param
function addAttribute (input) {
for(var i=0; i<input; i++) {
var template="<div class=\"new-attribute\">"
+ "<h3>New Attribute</h3>"
+ "<label for=\"attributeName"+count+"\">Name:</label>"
+ "<input class=\"attribute\" type=\"text\" name=\"attributeName"+count+"\">"
+ "<label for=\"attributeType"+count+"\">Type:</label>"
+ "<select class=\"tattribute\" name=\"attributeType"+count+"\">"
+ "<option value=\"text\" selected>Text</option>"
+ "<option value=\"checkbox\">Checkbox</option>"
+ "<option value=\"select-list\">Select Option List</option>"
+ "<option value=\"notes\">Notes</option>"
+ "</select>"
+ "<div class=\"option\"></div>"
+ "<div class=\"remove\">Delete</div>"
+ "</div>";
$(template).appendTo('#attributes');
count++;
$("input[id=count-field]").val(count);
}
}
//JQuery does its stuff
$(document).ready(function() {
//Add the required number of attributes
if(num!=null) {
addAttribute(num);
}
//Add one attribute on click
$("#new").on('click', function() {
addAttribute(1);
//Remove current of clicked
$(".remove").on('click', function() {
$(this).closest('.new-attribute').remove();
});
});
//Remove current of added
$(".remove").on('click', function() {
$(this).closest('.new-attribute').remove();
});
//select temp
var select="<div id=\"new-option\">"
+ "<div class=\"btn\">add</div>";
+ "</div>";
var add= "<label for=\"attributeOption"+count+"\">Name:</label>"
+ "<input class=\"attribute\" type=\"text\" name=\"attributeOption"+count+"\">";
//get value of select
$('.tattribute').change(function() {
//Add extra fields for select
if (this.value == "select-list") {
$(this).next('.option').append(select);
$(".btn").on('click', function() {
$(this).next('.option').append(add);
});
}
//Remove extra fields if not a select
else {
$(this).next('.option').empty();
}
});
});
#new {
width: 150px;
height: 50px;
background: blue;
cursor: pointer;
}
.remove {
width: 50px;
height: 50px;
display: block;
background: red;
cursor: pointer;
}
.btn {
width: 100px;
height: 20px;
display: block;
background: green;
padding: 5px;
cursor: pointer;
}
<form id="form" name="new-user" action="update.php" method="post">
<label for="device-name">Name of Device Type:</label>
<?php echo $_POST['device-name']; ?>
<div id="new">New Attribute</div>
<div id="attributes">
</div>
<input id="count-field" class="hidden-field" type="hidden" name="total" value="">
<input class="hidden-field" type="hidden" name="device-name" value="<?php echo $_POST['device-name']; ?>">
<input class="submit-button" type="Submit" value="Submit">
</form>