向form中新增元件元素
困擾了我一下午,問題終於解決了....
問題描述:用的jQuery UI的對話方塊,在裡面用到了上傳檔案這個<input type="file" name="uploadfile" id="file">,之前一直都是像綠色文字標註的那樣,form中寫個隱藏域,然後將對話方塊內的中的val傳遞過去,text傳遞到hidden中是沒有問題的,但file傳遞給hidden老是出現問題,百思不得姐...
這是jQuery一個很特殊的地方,我的demandDialog明明是在form中的,可呼叫了jQuery方法後,在原始碼中看到的是紫色程式碼從form中剝離了出去,不知道為什麼,反正紫色程式碼不在form中了,所以提交也沒法傳值。無耐只得用hidden繼續傳值...於是就遇到了上面的問題。
解:file不能傳遞到hidden中,可以呼叫jQuery的append方法,直接把想要追加的元素元件直接搞到form中去,就像這樣:
var input1 = $("#file");
$( "#responseForm" ).append(input1);
<form id="responseForm" action="addResponse" method="post" enctype="multipart/form-data"> <!-- <input type="hidden" name="uploadfile" /> --> <span style="color:#33ff33;"><input type="hidden" name="content" /> <input type="hidden" name="demand_id" /></span> <span style="color:#33ff33;"><input type="hidden" name="user_id" /></span> <span style="background-color: rgb(204, 51, 204);"><div style="display:none" id="demandDialog" title="您要提交的解決方案或檔案"> <ul class="ui-widget"> <li>內容:</li> <li><textarea class="demand_textarea border_radius" name="contentInput"></textarea></li> </ul> <input type="file" name="uploadfile" id="file"> (可選) </div></span> <!-- <input type="submit"> --> </form>
$(function() { $("#demandDialog").dialog( { autoOpen : false, height : 500, width : 750, modal : true, buttons : { 提交 : function() { <span style="color:#33ff33;">$("[name='content']").val($("[name='contentInput']").val());</span> /* <span style="color:#ff0000;">if($("[name='fileInput']").val()!=null||$("[name='fileInput']").val()!=""){ $("[name='uploadfile']").val($("[name='fileInput']").val()); }</span> */ var input1 = $("#file"); <span style="background-color: rgb(0, 0, 0);"><span style="color:#ffffff;"> $( "#responseForm" ).append(input1);</span></span> <span style="color:#33ff33;">$("[name='user_id']").val( "${session.user.id}");</span> <span style="color:#33ff33;">$("[name='demand_id']").val( "${request.demand.id}");</span> $("#responseForm").submit(); $(this).dialog("close"); }, 取消 : function() { $(this).dialog("close"); } }, show : { effect : "slide", duration : 600 }, hide : { effect : "explode", duration : 700 } }); /* form = dialog.find( "form" ).on( "submit", function( event ) { event.preventDefault(); addResponse(); }); */ $("#button").click(function() { if ("${session.user}" == null || "${session.user}" == "") { alert("請先登入(⊙o⊙)哦"); MyOpen('LoginFormDiv'); } else { $("#demandDialog").dialog("open"); } }); });
方法解決得益於這篇部落格:http://www.cnblogs.com/zwei1121/archive/2009/09/23/1572724.html
$(document).ready(function(){
$("a.delete").click(function(event){
action = this.getAttribute("action")
form = $("<form></form>")
form.attr('action',action)
form.attr('method','post')
input1 = $("<input type='hidden' name='input1' />")
input1.attr('value','input1 value')
input2 = $("<input type='text' name='textinput' value='text input' />")
form.append(input1)
form.append(input2)
form.appendTo("body")
form.css('display','none')
form.submit()
})
})