Home  >  Article  >  Web Front-end  >  How to get form tag value in jquery

How to get form tag value in jquery

(*-*)浩
(*-*)浩Original
2019-05-22 18:31:013261browse

In the daily development process, there are many places where forms are used. For example, login, registration, payment, order filling, backend management, etc.

How to get form tag value in jquery

#It is a common practice to use jQuery to get the value of the form.

Common forms

Single line text field:

<input type="text" id=&#39;name&#39; value=&#39;pelli&#39;>

Password field:

<input type="password" id=&#39;pass&#39; value=&#39;password&#39;>

Single choice:MaleFemale

<input type="radio" name=&#39;sex&#39; id=&#39;man&#39; value="1">
<label for="man">男</label>
<input type="radio" name=&#39;sex&#39; id=&#39;woman&#39; value="0">
<label for="woman">女</label>

Multiple selection:

<input type=&#39;checkbox&#39; value=&#39;1&#39; name=&#39;intrest&#39;>篮球
<input type=&#39;checkbox&#39; value=&#39;2&#39; name=&#39;intrest&#39;>足球
<input type=&#39;checkbox&#39; value=&#39;3&#39; name=&#39;intrest&#39;>皮球

Drop-down list:

<select name="city" id="city">
    <option value="1">北京</option>
    <option value="2">南京</option>
    <option value="3">上海</option>
    <option value="4">成都</option>
    <option value="5">西安</option>
</select>

Multi-line text field:

<textarea name="" id="remark" cols="30" rows="10">这里是备注</textarea>

Use jQuery to get the form tag value

// 昵称
var name = $("#name").val();
console.log(name);

// 密码
var pass = $("#pass").val();
console.log(pass);

// 性别
var sex = $("input:radio:checked").val();
console.log(sex);

// 性别
var sex1 = checkAll($("input:radio"));
console.log(sex1);

// 兴趣
var hobby = checkAll($("input:checkbox"));
console.log(hobby);

// 城市
var city = $("#city").val();
console.log(city);

// 城市
var city1 = $("#city option:selected").val();
console.log(city1);

// 备注
var remark = $("#remark").val();
console.log(remark);

A function that can get single and multiple selections, returning an array of values:

//获取单选或者多选的值,返回一个值得数组,如果没有值,返回空数组,参数inputlist是jQuery对象
function checkAll(inputlist){
    var arr = [];
    var num = inputlist.length;
    for(var i = 0; i < num; i++){
        if(inputlist.eq(i).is(":checked")){
            arr.push(inputlist.eq(i).val());
        }
    }
    return arr;
}

Summary:

Single line text: $("#text").val();

Password: $("#pass").val();

Single selection: $ ("input:radio:checked").val();

Multiple selection: traverse $("input:checkbox") to determine whether it is selected

Drop-down: $("#select" ).val(); or $("#select option:select").val();

Multi-line text: $("textarea").val();

The above is the detailed content of How to get form tag value in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn