一個用戶可能有多個郵件地址,並且不確定個數。一開始只是固定輸入2個地址,今天進行了改善,變成任意數目的輸入然後存儲。具體實現見下。
前端
默認會出現兩行電子郵件的輸入欄,如果用戶點擊“+添加地址”,調用addEmail()函數:$(“#email-table”).append(emailCode);
addEmail函數使用JQuery的append()函數,將TR標籤加入郵件地址的尾部,如果點擊新加行的小叉子(removeEmail(this)),則調用removeEmail(e)函數:$(e).parents(“tr”).remove();去掉該行。
很簡單吧,這裏要注意一點,新的email輸入框,他的name和id要與之前的不同,所以在頁面加載時,設定了變量emailNum,用它來爲每個name和id加入標識,就像這樣 name=’email”+emailNum+”‘。
後端
怎麼才能將增加的數據,在表單提交後傳遞給新的頁面呢?我在用戶點擊submit的時候,將這些最後還存在的輸入框的id,組裝成這樣的字符串,如1,2,3,8
爲什麼要在最後組裝,而不在用戶操作時進行js的變換呢,我想最後組裝可以減少很多的工作量和少考慮很多情況吧。。。
這樣在新頁面中,就可以將這個字符串改裝成一個數組,拿到表單提交的數據,隨後對數組進行循環,將數據循環的插入到數據庫中了。
這裏有也有一個要注意的地方,就是在提交後的DONE頁面時,如何才能拿到這些不確定名字的name的值呢?好比,有可能用戶添加了8個郵件地址,但是刪除了1-7個,只保留了最後一個,那麼此時這個輸入框的name是,email8,提交後的頁面怎麼能知道他的name是email8呢?在這裏我用了$$這個動態變量的方法,循環提交的數組,得到不同的變量名,然後對動態這些變量名,得到POST的值。就得到這些POST的數據啦。