How to get form tag value in jquery

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

#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: You can write multi-line text here

<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!