1. 程式人生 > >向form中新增元件元素

向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()
    })
})