jQuery 输入字段 .val() 未定义

Question

I'm having a problem with an error: jQuery input val() is undefiend. I have 3 inputs which are referring to one item.

On add Row i can add an new Item ( 3 rows ).

All those rows have to be prepared in array to be sent to a PHP file.

I believe that my id="item[0]['name']" is wrong.

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div> <div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); $("#setKasse").click(function() { for (let i = 0; i <= (counter - 1); i++) { console.log($(`#item[${i}]`)); console.log($(`#item[${i}]["name"]`).val()); }; }); });

 *{ padding: 0; margin: 0; } body{ background-color: #E6E6FA; color : #191970; padding-left : 5%; padding-top : 70px } #Container, #ItemContainer, .item { width: 20%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; row-gap : 18px; } #ItemContainer, .item{ width: 100%; row-gap : 2px; } input{ height: 30px; width: 100%; border: none; box-sizing: border-box; padding-left: 4px; font-size: 14px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" id="item[0]['name']" placeholder="Name" ></div> <div><input type="text" id="item[0]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[0]['count']" placeholder="Count" ></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>

So, I want a way to be able to cycle and loop into objects|Arrays

My main goal is to send the data via Ajax Post request, and for that I want to refactor the Array in another Format.

Answer 1

In selectors, [ is used to indicate an attribute selector. If you want to use it as a literal character in the ID, you need to escape it with backslash. You also need to escape the ' characters.

You also need to include the ['name'] part of the ID (or ['amount'] or ['count'] if you want to get those inputs).

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div> <div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); // end of $("#addRow").click $("#setKasse").click(function() { for (let i = 0; i <= (counter - 1); i++) { console.log($(`#item\\\\[${i}\\\\]\\\\[\\\\'name\\\\'\\\\]`).val()); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" id="item[0]['name']" placeholder="Name"></div> <div><input type="text" id="item[0]['amount']" placeholder="Amount"></div> <div><input type="text" id="item[0]['count']" placeholder="Count"></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>

In my opinion, it's best to avoid using characters that have special meaning in CSS selectors in your IDs, it complicates the code unnecessarily. You could use id="item-${counter}-name" . Or don't use IDs for dynamically created elements at all. Use a class like class="name" , and then use dynamic indexing. $(".item").eq(i).find("input.name") .

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" class="name" placeholder="Name" ></div> <div><input type="text" class="amount" placeholder="Amount" ></div> <div><input type="text" class="count" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); // end of $("#addRow").click $("#setKasse").click(function() { for (let i = 0; i < counter; i++) { console.log($(".item").eq(i).find(".name").val()); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" class="name" placeholder="Name"></div> <div><input type="text" class="amount" placeholder="Amount"></div> <div><input type="text" class="count" placeholder="Count"></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>