表单提交(二)——type=“button”

最新推荐文章于 2022-09-03 12:16:41 发布
最新推荐文章于 2022-09-03 12:16:41 发布
阅读量170 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xjinza/p/3906849.html
版权

二、用input type="button"方式提交表单

该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。
所以可以在onclick事件里面进行表单校验。
如果换成jquery方式，$("#myForm").submit()会调用onsubmit事件。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        function formSubmit()
        {
           // return false; 可以在这里进行表单校验。
            document.getElementById("myForm").submit();
            //该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。
            //οnsubmit="return false;"可以用于阻止enter键提交表单。
　　　　　　　//换成jquery方式，比如$("#myForm").submit()会调用onsubmit事件。

        }
    </script>
</head>

<body>

<form id="myForm" action="http://www.baidu.com" method="get" onsubmit="return false;">
    姓名：<input type="text" name="name" size="20"><br />

    <input type="button" onclick="formSubmit()" value="提交">
</form>
</body>

</html>
 

 

转载于:https://www.cnblogs.com/xjinza/p/3906849.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30553837
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
表单注册界面

				
			

			

				

					weixin_50919504的博客
				

				

					02-04
					
					402
					
				

			

		

		

			
				
表单注册界面
代码
<!DOCTYPE html>
<html lang="zh-cnb+-">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        input 

			
		

	



                

              
                



	

		

			

				
					
HTML基础知识之表单

				
			

			

				

					mty_zwl的博客
				

				

					10-09
					
					663
					
				

			

		

		

			
				
htm中对表单的基础认识

			
		

	



                


  
              

                


	

		

			

				
					
如何用 type="button"按钮提交表单?

				
			

			

				

					chujurong7175的博客
				

				

					02-09
					
					2456
					
				

			

		

		

			
				
方法一： 
<form...><inputtype="button" value="提交表单"onclick="this.form.submit()">< /form> 
或者 
<inputtype="button" value="提交表单...

			
		

	





	

		

			

				
					
button、input type="button"/"submit"整理

				
			

			

				

					lxing1991的专栏
				

				

					03-10
					
					577
					
				

			

		

		

			
				
在一个页面上画一个按钮，有四种办法：


 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的

			
		

	



		

			
		



	

		

			

				
					
关于提交表单button与input type=“button“--项目笔记

				
			

			

				

					无
				

				

					09-03
					
					663
					
				

			

		

		

			
				
关于提交表单button与input type="button"--项目笔记

			
		

	





	

		

			

				
					
提交表单~

				
			

			

				

					AturboS的博客
				

				

					08-09
					
					1666
					
				

			

		

		

			
				
.1提交表单 

表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 

的<input>或<button>元素来定义，图片按钮可以使用 type 属性为"image"的<input>元素来定义。 

点击下面例子中定义的所有按钮都可以提交它们所在的表单： 

<!-- 通用提交按钮--> 

<input type="submit" value="Submit Form"> 

<!--..

			
		

	





	

		

			

				
					
初探jquery——表单应用范例

				
			

			

				

					10-31
				

			

		

		

			
				
### 初探jQuery——表单应用范例  #### 一、引言  随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...

			
		

	





	

		

			

				
					
Flask框架学习笔记之表单基础介绍与表单提交方式

				
			

			

				

					09-18
				

			

		

		

			
				
本篇文章将深入探讨Flask中的表单基础和两种主要的提交方式——GET和POST。  首先，让我们了解表单的基本概念。在HTML中，表单是由`<form>`标签定义的，它包含了各种表单元素，如文本框、密码框、文本区域、单选按钮...

			
		

	





	

		

			

				
					
HTML学习笔记（五）——表单

				
			

			

				

					01-08
				

			

		

		

			
				
<input type="button" value="普通按钮"> <input type="image" src="image.jpg" alt="图片按钮"> ```  单选按钮（`<input type="radio">`）和复选框（`<input type="checkbox">`）用于提供多个选项让用户选择。单选...

			
		

	





	

		

			

				
					
一个from表单提交多个功能

				
			

			

				

					04-14
				

			

		

		

			
				
需要注意的是，这些按钮的类型设置为`button`而不是`submit`，这是因为`submit`类型的按钮默认会触发表单的提交行为，而我们希望通过自定义函数来控制这个过程。  #### JavaScript实现  接下来是实现的核心部分——...

			
		

	





	

		

			

				
					
JavaScript笔记-点击button提交form表单

				
			

			

				

					IT1995的博客
				

				

					03-10
					
					5524
					
				

			

		

		

			
				
功能如下：



点击购买后，点击确定。



确定调用了一个js函数，提交form表达给后端

代码如下：


<div class="modal-footer">
	<button type="button" class="btn text-white border bg-dark" data-bs-dismiss="modal">取消</button>
	<button type="button" class="btn text-white border bg

			
		

	





	

		

			

				
					
Form表单中的button按钮，默认会自动提交表单

				
			

			

				

					zhou_1997的博客
				

				

					01-02
					
					2936
					
				

			

		

		

			
				
Form表单中的button按钮，默认会自动提交表单
在表单页面中，需要添加个其他功能按钮，不需要提交表单或刷新。
但表单内设置< input type=“button” >时，如果没有指定其type类型的时，默认为type=”submit”。那么将该input的button设置一个类型type=“button”，就可以啦。
而且表单提交的url为其action属性的值，如果没有设置a...

			
		

	





	

		

			

				
					
表单提交中的input、button、submit的区别

				
			

			

				

					weixin_30376163的博客
				

				

					12-29
					
					2388
					
				

			

		

		

			
				
　　最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别验证他们在使用中的区别。
1.input[type=submit]
我们直接来看例子：

代码如下：

<form>
    <input name="name">
    <input type="submit" value=...

			
		

	





	

		

			

				
					
form表单中 button 、 input type="button" 、 input type="submit" 的区别

				
			

			

				

					shijiujiu33的博客
				

				

					10-18
					
					2965
					
				

			

		

		

			
				
1.&amp;lt; button &amp;gt;与&amp;lt; input type=“button” &amp;gt;其中一个重要的区别就是：
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
&amp;lt; button &amp;gt; 控件 与 &amp;lt; input type=“button” &amp;gt; 相比，提供了更为强大的功能和更丰富的

			
		

	





	

		

			

				
					
js验证表单提交的多种方法,submit,button, type='button'

					
热门推荐

				
			

			

				

					qq_45064049的博客
				

				

					05-18
					
					1万+
					
				

			

		

		

			
				
js验证表单提交第一种用submit按钮提交表单第二种用button按钮进行提交第三种用第一种用submit按钮提交表单
<!doctype html>
<html>
<head>
	<title></title>
</head>
<body>
	<form action="index.php" method...

			
		

	





	

		

			

				
					
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值

					
最新发布

				
			

			

				

					05-17
				

			

		

		

			
				
 <button type="submit">提交</button>    );  } } ```  注意，这里我们使用了event.target来获取表单中的数据，而不是使用refs或者state来获取数据，这是因为React不推荐直接操作DOM元素。  最后，当Form表单提交后...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值