【前端】弹出框提交表单

功能描述

点击某个按钮后,出现一个弹出框。用户在弹出框填写一些信息之后提交表单。

效果截图

新建公文

代码

html代码

触发弹出窗口的按钮
<div class="col-1">
         <input type="button" class="my-btn-blue" value="新建" ng-click="newFile()">
    </div>

弹出框:

	<div id="my_dialog" title="新建公文"  style="display: none" >
	    <form>
	        <p>文件名:<input type="text" id="create_name" /></p>
	        <p>作&nbsp;&nbsp;者&nbsp;&nbsp;:<input type="text" id="create_author" /></p>
	        <p>文&nbsp;&nbsp;种&nbsp;&nbsp;:<select id="create_type" >
	                <option value ="总结报告">总结报告</option> 
	                <option value ="辅助授课">辅助授课</option> 
	                <option value ="其他">其他</option> 
	                </select>
	        </p>
	        <div style="float: right;">
		       <button class="my-btn-gray" ng-click="create_paper_cancel()">取消</button>
		       <button class="my-btn-blue" ng-click="create_paper_save()">保存</button>
		    </div>
	    </form>
    </div>

js代码

弹出框的入口
		/*新建文件*/
    	$scope.newFile =function(){
    		 $scope.showdiv();
    		
    	};
调用弹出框
	  $scope.showdiv=function(){
		  $('#my_dialog').dialog({
			  modal:true,
			  width:"400",
	    	  height:"223"
		  	});
		  document.getElementById("my_dialog").style.display="block";
	  };
弹出框中的保存函数
	$scope.create_paper_cancel=function(){
		 console.info("取消");
   	     $("#create_name").val("");
		 $("#create_author").val("");
		 $("#create_type").empty(); 
		 var ops={
					"总结报告":"总结报告",
					"辅助授课":"辅助授课",
					"其他":"其他"
				};
		 var parent=document.getElementById("create_type");
		 for(var key in ops)
		 {
			 var o = new Option(ops[key],key);
	         parent.appendChild(o);
		      
		 }
   	     $('#my_dialog').dialog("close");
	};
弹出框中的取消函数
        $scope.create_paper_save=function(){
        	$('#my_dialog').dialog("close");
        	$scope.create_name = document.getElementById("create_name").value; 
        	var create_author = document.getElementById("create_author").value;   
        	var create_type = document.getElementById("create_type").value;   
    		var data={filename:$scope.create_name,author:create_author,type:create_type};
    		Document.create_paper_save(data,$http, function (response) {
    		   // 进一步的操作
    			newFileextend();
    	   }, function () {
    		   alert("保存失败!");
    	   })
    	};

源码下载:

jquery实现通过按钮弹出表单

  • 15
    点赞
  • 128
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值