translate php key to javascript for logging
translate php key to javascript for logging
I have a php loop that is properly displaying the values i expect as html headings.
What I want to do here is create a hidden input for each one, so if there are 15 tags for categories, I want 15 hidden inputs.
The code below 'works' by logging the correct info however, it only ever logs the first one.
Obviously, this is becaue the php/html loop has a key assigned but the javascript is pulling a non-unique ID.
How can I properly translate this key into javascript so I can log the actual value of the selected item, rather than just the first?
@foreach($items as $key => $item)
<h3 class="uk-width-4-10">$item->category</h3>
<input type="hidden" name="edit_category" id="edit_category" value="$item->category" />
@endforeach
function editCommentModal()
console.log(document.getElementById("edit_category").value);
UPDATE:
code with modal and span containing onclick event
@foreach($items as $key => $item)
<!-- display category and button -->
<h3 class="uk-width-4-10">$item->category</h3>
<a href="#edit-modal $key " data-uk-modal><span onclick="editCommentModal()" class="uk-icon-plus-square"></span></a>
<!-- modal -->
<div id="edit-modal $key " class="uk-modal edit-modal">
<h3 class="uk-width-4-10">$item->category</h3>
<input type="hidden" name="edit_category" id="edit_category" value="$item->category" />
</div>
@endforeach
function editCommentModal()
var inps = document.getElementsByName('edit_category');
for (var i = 0; i <inps.length; i++)
var inp=inps[i];
console.log("edit_category["+i+"].value="+inp.value);
HTML Element
id should be UNIQUE within a document– RiggsFolly
Sep 11 '18 at 14:44
id
3 Answers
3
@foreach($items as $key => $item)
<!-- display category and button -->
<h3 class="uk-width-4-10">$item->category</h3>
<a href="#edit-modal $key " data-uk-modal><span onclick="editCommentModal( $key )" class="uk-icon-plus-square"></span></a>
<!-- modal -->
<div id="edit-modal $key " class="uk-modal edit-modal">
<h3 class="uk-width-4-10">$item->category</h3>
<input type="hidden" name="edit_category" id=" 'edit_category_' . $item->id " value="$item->category" />
</div>
@endforeach
function editCommentModal(id)
var inps = document.getElementsByName('edit_category');
for (var i = 0; i <inps.length; i++)
var inp=inps[i];
if('edit_category_' + id == inp.id)
console.log("edit_category["+i+"].value="+inp.value);
So this works, but it lists the values for every item on the page, i just want it to vshow the values for the item selected. This function in javascript is triggered when a button is clicked
– Tom N.
Sep 11 '18 at 15:12
Oh that's like a whole other question. You would then have to use an onclick event, pass id of the category or id itself and show it.
– syam
Sep 11 '18 at 15:23
I am, I have a span with an onClick that fires up this function. the onclick works but it's showing all values for the page. So I have a div with multiple items, each with their own span/button. WHen that is clicked I only want to log the data for the selected one
– Tom N.
Sep 11 '18 at 15:24
compare id to show the one wanted out of many
– syam
Sep 11 '18 at 15:25
How would I do that though? Using your answer, it logs all the correct items. So in the context of your code, how would I do that
– Tom N.
Sep 11 '18 at 15:26
First up; id's should be unique so I would suggest you changing id to class. To get all the values you can change the name edit_category to an array of input edit_category. If you want to add more hidden input fields you can use the index you're getting in the loop!
edit_category
edit_category
@foreach($items as $key => $item)
<h3 class="uk-width-4-10">$item->category</h3>
<input type="hidden" name="edit_category" class="edit_category" value="$item->category" />
@endforeach
function editCommentModal()
var all_categories = document.getElementsByName('edit_category');
var all_names = document.getElementsByName('edit_names');
for (var i = 0; i <all_categories.length; i++)
var category=all_categories[i];
var name=all_names[i];
console.log("edit_category["+i+"].value="+category.value);
console.log("edit_names["+i+"].value="+name.value);
So if I want to do this with more hidden inputs, I'd follow the same structure and it would be best for me to just do a new var/for loop for each?
– Tom N.
Sep 11 '18 at 15:08
@TomN. updated my answer! Do make sure that all_categories and all_names have the same length ;-)
– Anna Jeanine
Sep 11 '18 at 15:13
Yes they do so that works just fine, thanks! However, this is showing the value for each item on the page, where I just want it to log the values for the selected item. So this javascript function is triggered by a click, I want to only show the values for the item clicked
– Tom N.
Sep 11 '18 at 15:14
Oh that's like a whole other question. You would then have to use an onclick event.
– Anna Jeanine
Sep 11 '18 at 15:15
I do have an onclick event on a span tag, which fires this function. So that works, but if they click the button for a certain item, I only want to capture that data
– Tom N.
Sep 11 '18 at 15:16
Use a class instead of an id, and then you can find them all by class and do whatever you want with them.
<input type="hidden" name="edit_category" class="edit_category" value="$item->category" />
document.getElementsByClassName('edit_category')
var categories = document.getElementsByClassName('edit_category');
Array.prototype.forEach.call(categories, function(category)
console.log(category.value);
);
<input type="hidden" name="edit_category" class="edit_category" value="a" />
<input type="hidden" name="edit_category" class="edit_category" value="b" />
<input type="hidden" name="edit_category" class="edit_category" value="c" />
So I'm actually trying that but the values in console.log print as undefined
– Tom N.
Sep 11 '18 at 14:53
getElementByClassName is going to return a NodeList (iirc), so you will have to loop over each one to access it's
.value if you want to console.log it– Taplar
Sep 11 '18 at 14:54
.value
OH I see. So if I add more headings and hidden inputs, then I would just establish a block like this for each
– Tom N.
Sep 11 '18 at 15:03
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Obviously, this is becaue the php/html loop has a key assigned but the javascript is pulling a non-unique ID. So don't use a non-unique id. Use a class
– Taplar
Sep 11 '18 at 14:44