0

I am trying to get the value of an input element. The element is in a modal and the modal data is populated with different values depending on the button I click to open the modal.

var modalBody = document.getElementsByClassName("modal-body"); for(var i = 0; i < modalbody.length; i++) { var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value; alert(mac); }

error: TypeError: modalBody.item(...).getElementsByTagName(...)[2].getElementById is not a function

I also tried with document.getElementById("mac-name").value; but that returns blank

<form method="post"> <div class="modal-body"> <div class="form-group"> <label for="station-name" class="col-form-label">ID:</label> <input class="form-control" id="station-id" name="edit--id" required="" type="text" hidden=""> <input class="form-control" id="station-name" name="edit--name" required="" type="text"> </div> <div class="form-group"> <label for="profile-name" class="col-form-label">Profile:</label> <select type="text" class="form-control" id="profile-name" name="edit-profile" required=""> <option>name1</option> <option>name2</option> </select> </div> <div class="form-group"> <label for="mac-name" class="col-form-label">MAC Address:</label> <input class="form-control" id="mac-name" name="edit-mac" required="" type="text"> </div> </div> </form>
Improve this question

1 Answer 1

Reset to default
2

Instead of using getElementsByClassName and then running the following on each element:

var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;

You can use instead use querySelectorAll and pass in .modal-body div #mac-name. This will select all elements with the id mac-name inside a div within an element with the class modal-body. You can use the results of this to then loop over each element and get each value:

var macs = document.querySelectorAll('.modal-body div #mac-name');

See example below:

var macs = document.querySelectorAll('.modal-body div #mac-name'); for (var i = 0; i < macs.length; i++) { var mac = macs[i].value; console.log(mac); }
<form method="post"> <div class="modal-body"> <div class="form-group"> <label for="station-name" class="col-form-label">ID:</label> <input class="form-control" id="station-id1" name="edit--id" required="" type="text" hidden=""> <input class="form-control" id="station-name1" name="edit--name" required="" type="text"> </div> <div class="form-group"> <label for="profile-name" class="col-form-label">Profile:</label> <select type="text" class="form-control" id="profile-name1" name="edit-profile" required=""> <option>name1</option> <option>name2</option> </select> </div> <div class="form-group"> <label for="mac-name" class="col-form-label">MAC Address:</label> <input class="form-control" id="mac-name" name="edit-mac" value="Addr 1" required="" type="text"> </div> </div> <div class="modal-body"> <div class="form-group"> <label for="station-name" class="col-form-label">ID:</label> <input class="form-control" id="station-id2" name="edit--id" required="" type="text" hidden=""> <input class="form-control" id="station-name2" name="edit--name" required="" type="text"> </div> <div class="form-group"> <label for="profile-name" class="col-form-label">Profile:</label> <select type="text" class="form-control" id="profile-name2" name="edit-profile" required=""> <option>name1</option> <option>name2</option> </select> </div> <div class="form-group"> <label for="mac-name" class="col-form-label">MAC Address:</label> <input class="form-control" id="mac-name" name="edit-mac" value="Addr 2" required="" type="text"> </div> </div> </form>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for that but I am getting strange results. When I load the page I still get no mac but if i refresh the page I get a mac. Even when I get the mac though, it only gives me the mac for the first modal in the list. Any idea why this is the case?
Are the modals already on the page when it loads or do you need to open them (ie are they added to the page dynamically?)
Also, your website shouldn't have multiple elements with the id of mac-name. It is considered invalid html as id's should be unique to the element. Maybe make sure the input boxes have text in them when your running your script
In the above example, I also added an additional modal body and it seems to be working fine for me as it gets both macs
There is one modal on the page and the modal data is loaded when I open a click a button to open the modal. It loads with different data depending on which button i click. I guess i need to get the mac after i have click the button to load the modal.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.