[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-html在form表單上取得複數相同name的資料":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":18,"minRead":19},48,"html在form表單上取得複數相同name的資料","[HTML]在form表單上取得複數相同name的資料","在form表單上取得複數相同name的資料 說來真慚愧，寫了好幾年的網頁現在才遇到這問題。 在HTML中使用f […]","\u003Ch1>在form表單上取得複數相同name的資料\u003C\u002Fh1>\n\u003Cp>說來真慚愧，寫了好幾年的網頁現在才遇到這問題。\u003C\u002Fp>\n\u003Cp>在HTML中使用form來做資料傳遞是很基礎的一個做法，例如像這樣：\u003Cbr \u002F>\n將name以POST方式傳到example.com的api\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><form action="http:\u002F\u002Fexample.com" method="post">\n    <input name="name" value="val">\n    <input type="submit">\n<\u002Fform>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在api那邊就可能會取得長得像這樣的JSON\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{"name":"val"}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>基本上一個name對應一個val，遇到欄位有相同的name則會取最後一個值。\u003C\u002Fp>\n\u003Cp>最近專案中有個表單，裡面會有個動態產生資料的需求(如下)\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><form action="http:\u002F\u002Fexample.com" method="post">\n    <!--名為name的input動態產生-->\n    <input name="name" value="val_1"> \n    <input name="name" value="val_2">\n    <input name="name" value="val_3">\n    <input type="submit">\n<\u002Fform>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>照基本做法只會得到最後一個"val_3"，那麼要怎麼做呢？\u003C\u002Fp>\n\u003Ch2>將name陣列化\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-html\"><form action="http:\u002F\u002Fexample.com" method="post">\n    <input name="name[]" value="val_1">\n    <input name="name[]" value="val_2">\n    <input name="name[]" value="val_3">\n    <input type="submit">\n<\u002Fform>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>答案很簡單，只要將name命名為陣列就可以，就能取得包起來的陣列囉。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{"name":["val_1","val_2","val_3"]}\u003C\u002Fcode>\u003C\u002Fpre>\n","2022-06-10T16:00:36","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":17},"HTML","html","\u002Fblog\u002Fhtml在form表單上取得複數相同name的資料",1]