I dont know how to search for this, so apologies if this has been asked before. Basically i am using jQuery/AJAX/PHP to dynamically save to a database, pull info back etc. I have made my form save and pull back the room's id, and then the item's id's when they are saved, however i need a way to dynamically save the room id to it's children items so it all links up in the database. I will try and explain everything i can.
<div id="formHolder" rel="1">
<form class="rooms">
<label>Room</label>
<input type="text" name="roomName[]">
<input type="hidden" class="roomId" name="roomId[]">
<input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
<div class="saveRoom">Save Room</div>
</form>
<div class="addItem">
<form class="items">
<label>Item</label>
<input type="text" name="itemName[]">
<label>Description</label>
<textarea name="itemDescription[]"></textarea>
<label>Condition</label>
<select name="itemCondition[]">
<option value="Good">Good</option>
<option value="Adequate">Adequate</option>
<option value="Poor">Poor</option>
</select>
<input type="hidden" class="itemId" name="itemId[]" value="">
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET['inventory_id']?>">
<input type="hidden" name="itemParent[]" value="">
<div class="saveIcon" style="display: none; color: green;">SAVED!</div>
<div class="save">Save Item</div>
</form>
</div>
<div id="addItem">Add another item</div>
</div>
This is the basic form i am using. My plan here was to save the room's ID to the rel attribute and then each item that is added would grab that id from there, but i simply cannot work out how to do it.
$('#addItem').on('click', function(){
$('<form class="items">\
<label>Item</label>\
<input type="text" name="itemName[]">\
<label>Description</label>\
<textarea name="itemDescription[]"></textarea>\
<label>Condition</label>\
<select name="itemCondition[]">\
<option value="Good">Good</option>\
<option value="Adequate">Adequate</option>\
<option value="Poor">Poor</option>\
</select>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'$(this).parent().parent().attr('rel');'">\
<div class="saveIcon" style="display: none; color: green;">SAVED!</div>\
<div class="save">Save Item</div>\
</form>').fadeIn(500).appendTo('.addItem');
});
You can see i've tried using $(this).parent().parent().attr('rel');
but that doesn't work so i am stumped. I know i've waffled a bit here and if anyone wants to open a chat with me please do, thank you for your time
It will work fine, but you're going up too many levels! The div with the rel
attr is just the parent
, not the parents parent:
$(this).parent().attr('rel');
Or, since your parent has an ID (which better be unique!):
$("#formHolder").attr("rel");
this refers to "#addItem" div and "rel" is an attribute of it's direct parent so i think it should be just
$(this).parent().attr('rel');