问题描述:我页面中有这样多个表单,我都是这个定义的,当我点击确定按钮时,此时能够获得相对应的表单对象,我该怎么获取到他的两个值呢?

解决方案:

页面元素

<form id="form1">
<lable>姓名:</lable>
<input type="text" class="user_name">
<lable>电话:</lable>
<input type="text" class="user_tel">
<span class="button">确定</span>
</form>
<form id="form2">
<lable>姓名:</lable>
<input type="text" class="user_name">
<lable>电话:</lable>
<input type="text" class="user_tel">
<span class="button">确定</span>
</form>
<form id="form3">
<lable>姓名:</lable>
<input type="text" class="user_name">
<lable>电话:</lable>
<input type="text" class="user_tel">
<span class="button">确定</span>
</form>

jquery实现方法(自己任意添加一个jquery库即可)

$(function(){
$('.button').each(function(){
$(this).click(function(){
var name = $(this).parent('form').find('.user_name').val();
var tel = $(this).parent('form').find('.user_tel').val();
console.log(name);
console.log(tel);
});
});
})

  

jquery如何获取对应表单元素?的更多相关文章

  1. jquery easyui将form表单元素的值序列化成对象

    function serializeObject(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this['n ...

  2. jquery的attr禁用表单元素的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 获取form表单元素值的4种方式

    <html><head><title></title><script type="text/javascript"> f ...

  4. jQuery name属性与checked属性结合获取表单元素值

    var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...

  5. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  6. jQuery操作Form表单元素

    Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...

  7. 遍历form表单里面的表单元素,取其value

    form.elements 获取所有表单元素 form 表单 <form action="http://localhost:1995/api/post" class=&quo ...

  8. jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

  9. jQuery 获取、设置表单元素的值

    获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

随机推荐

  1. wxpyhon 对话框

    Python内置了好多定义好了的对话框供我们使用,这里先介绍三个最常用的: 1 Message dialog 2 Text entry 3 Choosing from a list 当然python还 ...

  2. 面向对象设计之------Is-A(继承关系)、Has-A(合成关系,组合关系)和Use-A(依赖关系)(转)

    原文url:http://blog.csdn.net/loveyou128144/article/details/4749576 @Is-A,Has-A,Use-A则是用来描述类与类之间关系的.简单的 ...

  3. Vue项目中引入ElementUI

    前提:创建好的vue项目. 1.安装ElementUI 转到项目根目录,输入命令:#cnpm install element-ui --save-dev 2.在 main.js 引入并注册 impor ...

  4. 1.LVS理论基础

    查看我的有道云笔记: http://note.youdao.com/noteshare?id=68e0ca45757943e482ba390d4d49369f&sub=4A2A593CDE2D ...

  5. Jmeter启动报错:unable to access jarfile ApacheJmeter.jar error 原因:下载的src包没有这个jar包,需下载binary包

    安装好jdk并配置了环境变量,下载Jmeter包解压启动jemter.bat提示 unable to access jarfile ApacheJmeter.jar error 原因: 从官网 htt ...

  6. Python:运算与循环

    1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...

  7. 多目标规划——fgoalattain

    多目标规划 多个目标函数,之间可以用他们的重要程度分析,来一次进行这个序贯算法,当然也可以无限逼近的方案——​ clc,clear; % 约束 a = [- - - - ]; b = [- - ]; ...

  8. POJ 1503 大整数

    之前做的大整数,都是一位一位操作. 优化方案:压缩方案. 模板: + - *  操作符重载 #include<cstdio> #include<iostream> #inclu ...

  9. 字符ASCII转换

    实现效果: 关键知识: 实现代码: private void button1_Click(object sender, EventArgs e) { if (textBox1.Text != stri ...

  10. PyCharm Notes | PyCharm 使用笔记(远程访问服务器code配置指南)

    PyCharm is a strong IDE for python programmer. Not only because it has a similar face with VS or som ...