表单提交中的radio、select下拉框和checkbox复选框数据的获取

最新推荐文章于 2021-07-08 17:42:35 发布
最新推荐文章于 2021-07-08 17:42:35 发布
阅读量2.1k 收藏 3
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amor_fatii/article/details/80639386
版权
本文介绍了如何在表单提交中获取radio按钮、select下拉框和checkbox复选框的数据，提供了相关的JavaScript代码示例，并讲解了通过AJAX将这些数据发送到Servlet的方法。
摘要由CSDN通过智能技术生成

radio：
 

<tr>
				<td>公司性质</td>
				<td>
					<input type="radio" id="pro" name="pro" value="1">国有企业
					<input type="radio" id="pro" name="pro" value="2">国有控股企业
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td>
				<input type="radio" id="pro" name="pro" value="3">外资企业
				<input type="radio" id="pro" name="pro" value="4">私营企业
				</td>
			</tr>

js：

var pro=$("input:radio[name='pro']:checked").val();

CheckBox：


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Amor_fatii
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
关于form与表单提交

				
			

			

				

					weixin_45259626的博客
				

				

					07-07
					
					643
					
				

			

		

		

			
				
一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。
如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会触发表单提交动作。即使你使用了return false，按钮也还是会提交submit动作。
form元素
form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它

			
		

	



                

              
                



	

		

			

				
					
怎样取得提交的form表单中的复选框数据

				
			

			

				

					madingludejin的专栏
				

				

					07-31
					
					9876
					
				

			

		

		

			
				
html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>无标题文档title>head>body>form action="test.asp" method="get" name="form1">input name="fruit" type="checkbox" value="香蕉"

			
		

	



                


  
              

                


	

		

			

				
					
表单控件之复选框

				
			

			

				

					一剑轻语
				

				

					04-08
					
					2699
					
				

			

		

		

			
				
背景：天天表单提交都是输入框，文本域，日期。忽然遇到了复选框很是新奇，毕竟这么久都没见过它了。

问题：关于复选框的加载（用于添加页面）





实现：1.ajax异步请求从数据库获取都有哪些类型。


$.ajax({
	url:"getChapterType",
	dataType:"json",
	success:function(result){

}

  2.成功后向j...

			
		

	





	

		

			

				
					
表单提交 radio php,jquery---提交表单 radio 验证

				
			

			

				

					weixin_30620431的博客
				

				

					03-22
					
					213
					
				

			

		

		

			
				
好吧 我知道这么写很2 不过忙于项目 凑合用吧 等有空再整理下 大家要不想费脑子自己写 就直接拿去花 不过记得加载jquery哟文件下载地址: http://down.51cto.com/data/254197radion 验证function cc(){for(var i = 1;i<7;i++){var num = $(".r"+i).length;var x = 0;var ...

			
		

	



		

			
		



	

		

			

				
					
html表单取得<select>,获取JS从HTML中读取选择<select>表单

				
			

			

				

					weixin_33514582的博客
				

				

					06-28
					
					429
					
				

			

		

		

			
				
我正在尝试编写一段JS代码，它将从HTML 表单中获取选定的选项，然后读取它，然后根据选项是什么。获取JS从HTML中读取选择表单的HTML代码如下所示： Sword  Axe  Mace choicedescriptioncost像这样的JS：function getmh(option){if (option == "Sword"){document.getElementById('mhchoi...

			
		

	





	

		

			

				
					
如何获取表单 复选框checkBox 的值

				
			

			

				

					小小前端
				

				

					03-23
					
					6589
					
				

			

		

		

			
				
​​
<head>
    <meta charset="UTF-8">
    <title>checkBox</title>
    <!--引入jquery文件-->
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>...

			
		

	





	

		

			

				
					
vue.js实现单选框、复选框和下拉框示例

				
			

			

				

					10-19
				

			

		

		

			
				
在处理表单元素如单选框、复选框和下拉框时，Vue.js也提供了简洁高效的方法，尤其是通过其数据双向绑定的能力。在本篇中，我们将深入探讨如何使用Vue.js来实现这些常见的表单控件。  ### 单选框(Radio Buttons)  在...

			
		

	





	

		

			

				
					
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

				
			

			

				

					01-19
				

			

		

		

			
				
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...

			
		

	





	

		

			

				
					
html复选框select,html自定义checkbox、radio、select —— select篇

				
			

			

				

					weixin_29268331的博客
				

				

					06-03
					
					784
					
				

			

		

		

			
				
上一篇《html自定义checkbox、radio、select —— checkbox、radio篇》介绍了我们是怎么将 html 自带的checkbox、radio 改成我们自定义的UI的，现在来说说怎么将 html 自带的 select 改成我们自定义的UI(由于时间关系，我们只完成了单选部分的转换，而多选部分的转换没做，后续会找个时间补上)。select 跟 checkbox、radio...

			
		

	





	

		

			

				
					
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

				
			

			

				

					10-16
				

			

		

		

			
				
LayUI是一个轻量级的前端组件库，它提供了丰富的UI组件，包括表单元素，如下拉框、单选框和复选框。当这些问题出现时，通常与渲染（render）过程有关。本文将详细讲解如何解决LayUI中form.render()不显示下拉框、...

			
		

	





	

		

			

				
					
form表单提交的几种方法

				
			

			

				

					hffygc的博客
				

				

					11-05
					
					156
					
				

			

		

		

			
				
form表单提交的几种方法

			
		

	





	

		

			

				
					
html中的单选按钮radio如何实现可同时选中多个值进行表单提交

					
热门推荐

				
			

			

				

					yds303999450的博客
				

				

					08-19
					
					1万+
					
				

			

		

		

			
				
为了便于学习，我们将单选按钮radio和复选框checkbox作对比：
具体代码如下：
****************************************************test.html文件如下**************************************************************************



	
	

	





			
		

	





	

		

			

				
					
uniapp 表单（input、radio、picker）提交获取参数值

				
			

			

				

					YL
				

				

					07-08
					
					8538
					
				

			

		

		

			
				
在使用uniapp开发页面的时候，经常会用到表单，今天第一次用uniapp写表单，记录下当点击提交的时候input、radio、picker如何获取参数值的。

获取参数值，首先要进行数据绑定v-model，然后定义个对象 （saveData），将数据保存到里面。

input
<input type="text" value="" placeholder-style="color:#999;font-size:14px; letter-spacing: 2px;"  v-model="saveDat

			
		

	





	

		

			

				
					
javascript 获取form表单中radio选中值

				
			

			

				

					过滤阳光
				

				

					02-26
					
					3932
					
				

			

		

		

			
				
1.遍历表单中radio内容
2.从中找出选中的那个radio
3.获取radio的值

function getRadioValue(radioName){
    var radioValue;    
    radioValue=document.getElementsByName(radioName);
    if(radioValue!=null){
        var 

			
		

	





	

		

			

				
					
获取在FORM表单里面的radio值并传向父页面（text）控件中

				
			

			

				

					weixin_44003632的博客
				

				

					01-24
					
					742
					
				

			

		

		

			
				
window.opener.document.getElementById(父页面文本框name).value=需要传的值;
具体做法如下：
父页面:
&lt;Field:text name="Status" size="30" /&gt; &lt;!--text输入框以及其名字  --&gt;

function _openCodeListWin(){
window.open(url,"neww...

			
		

	





	

		

			

				
					
将输入框，下拉列表，radio的数据传递到后台的2种方式

				
			

			

				

					大盘鸡炒面条的专栏
				

				

					07-21
					
					6508
					
				

			

		

		

			
				
#1 jqueryAjax的方式
通过jqueryAjax的方式将数据传递到后台，

			
		

	





	

		

			

				
					
select复选表单提交

					
最新发布

				
			

			

				

					08-12
				

			

		

		

			
				
回答: 在给定的引用中，我们可以看到一个select标签，它用于创建一个下拉框选择表单。 [1 在提交表单时，可以使用ajax方式来处理。在ajax的代码中，首先通过form.on('submit')来监听表单提交事件，然后使用$.ajax方法发送请求，并将表单的数据序列化后作为数据参数传递给ajax请求。在成功回调函数中，根据返回的信息进行相应的处理。 [2 另外，还可以通过form标签的方式提交表单，将提交地址和提交方式分别写在form标签的action和method属性中。 [3 所以，无论是使用ajax方式还是form标签方式提交select复选表单，都可以实现数据的提交和处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* [表单提交中的radio、select下拉框和checkbox复选框数据的获取](https://blog.csdn.net/Amor_fatii/article/details/80639386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
-  *2* *3* [layui的form表单提交数据，layui的select框默认选中](https://blog.csdn.net/hangGe0111/article/details/85337604)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值