Element operation, serialization and usage of form

To view the original: http://www.ibloger.net/article/400.html   http://blog.csdn.net/xiaokui_wingfly/article/details/51721711

In Web development, forms often need to be manipulated. Form form elements include select, checkbox, radio, textarea, button, file, text, hidden, password, etc. Among them, the operation of reading and writing values of checkbox and radio is relatively variable. Checkbox and radio are often used in a group to realize multi selection or single selection. jQuery provides an extremely convenient way to get some element or type of form by using the form selector.  

select

The contents of the select element are as follows

<select id="select">
    <option value="0">Beijing</option>
    <option value="1">Shanghai</option>
    <option value="2">Wuhan</option>
    <option value="3">Nanjing</option>
    <option value="4">Guangzhou</option>
    <option value="5" selected="selected">Shenzhen</option>
</select>

//Get the value of the currently selected item in select
$('#select').val();

//Get the text of the currently selected item in select
$('#select').children('option:selected').text();

//Set the option with the select ed value of 3
$('#select').val('3');

//Set the option of selecting Wuhan as the selected text
$('#select').children('option:contains(Wuhan)').attr('selected', 'selected');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

checkbox

<div>
    <fieldset id="checkboxGroup">
        <legend>Choose your favorite city</legend>
        <div><input type="checkbox" name="city" value="Beijing" /><span>Beijing</span></div>
        <div><input type="checkbox" name="city" value="Shanghai" /><span>Shanghai</span></div>
        <div><input type="checkbox" name="city" value="Nanjing" /><span>Nanjing</span></div>
        <div><input type="checkbox" name="city" value="Shenzhen" /><span>Shenzhen</span></div>
        <div><input type="checkbox" name="city" value="Guangzhou" /><span>Guangzhou</span></div>
        <div><input type="checkbox" name="city" value="Wuhan" /><span>Wuhan</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnCheckbox1">Get selected checkbox</button>
    <button id="btnCheckbox2">Choose Shenzhen and Guangzhou</button>
    <button id="btnCheckbox3">All election</button>
    <button id="btnCheckbox4">No choice</button>
    <button id="btnCheckbox5">Reverse election</button>
</div>

//Get the selected checkbox value
$('#btnCheckbox1').click(function(){
    var values = [];
    $('#checkboxGroup').find(':checkbox:checked').each(function(){
        values.push($(this).val());
    });

    alert(values.join(','));
});

//Choose Shenzhen and Guangzhou
$('#btnCheckbox2').click(function(){
    var $group = $('#checkboxGroup');

    $group.find(':checkbox').each(function(){
        var $this = $(this), val = $this.val();
        if(val === 'Shenzhen' || val === 'Guangzhou'){
            $this.prop('checked', true);
        }else{
            $this.prop('checked', false);
        }
    });
});

//All election
$('#btnCheckbox3').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').prop('checked', true);
});

//No choice
$('#btnCheckbox4').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').prop('checked', false);
});

//Reverse election
$('#btnCheckbox5').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').each(function(){
        var $this = $(this);
        $this.prop('checked', !$this.prop('checked'));
    });
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

radio

<div>
    <fieldset id="radioGroup">
        <legend>Choose your favorite city</legend>
        <div><input type="radio" name="city" value="Beijing" /><span>Beijing</span></div>
        <div><input type="radio" name="city" value="Shanghai" /><span>Shanghai</span></div>
        <div><input type="radio" name="city" value="Nanjing" /><span>Nanjing</span></div>
        <div><input type="radio" name="city" value="Shenzhen" /><span>Shenzhen</span></div>
        <div><input type="radio" name="city" value="Guangzhou" /><span>Guangzhou</span></div>
        <div><input type="radio" name="city" value="Wuhan" /><span>Wuhan</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnRadio1">Get selected radio</button>
    <button id="btnRadio2">Choose Shanghai</button>
</div>

//Get the currently selected radio value
$('#btnRadio1').click(function(){
    var group = $('#radioGroup'),
        value = group.find(':radio:checked').val();
    alert(value);
});

//Choose Shanghai
$('#btnRadio2').click(function(){
    $('#radioGroup').find(':radio[value = "Shanghai"] '). prop('checked', true);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

form 
jQuery provides serialize() and serializeArray() to get the value of form element. Serialize() splices the obtained value into a string, which returns an array with & linked string, id = 3 & name = Zhang San & sex = male, and serializeArray(). Serializearray () encapsulates each space as an object with two fields, name and value.

<form id="form">
    <div>full name:<input type="text" name="name" /></div>
    <div>Age:<input type="text" name="age" /></div>
    <div>
        Gender:
        <select name="sex">
            <option value="male">male</option>
            <option value="female">female</option>
            <option value="secrecy" selected="selected">secrecy</option>
        </select>
    </div>
    <fieldset>
        <legend>Favorite city</legend>
        <div><input type="radio" name="city" value="Guangzhou" /><span>Guangzhou</span></div>
        <div><input type="radio" name="city" value="Shenzhen" /><span>Shenzhen</span></div>
        <div><input type="radio" name="city" value="Shanghai" checked="checked" /><span>Shanghai</span></div>
    </fieldset>
    <fieldset>
        <legend>Favorite sports</legend>
        <div><input type="checkbox" name="sports" value="Football" /><span>Football</span></div>
        <div><input type="checkbox" name="sports" value="Basketball" /><span>Basketball</span></div>
        <div><input type="checkbox" name="sports" value="badminton" /><span>badminton</span></div>
        <div><input type="checkbox" name="sports" value="Table Tennis" /><span>Table Tennis</span></div>
    </fieldset>     
</form>
<div style="margin-top:20px;">
    <button id="btnSubmit">Submission</button>
    <button id="btnReset">Reset</button>
    <button id="btnFormValue">Obtain form Value</button>
</div>

//Submission
$('#btnSubmit').click(function(){
    $('#form').submit();
});

//Reset
$('#btnReset').click(function(){
    //Because jQuery does not provide a reset method, it can only use the form native reset method.
    $('#form').get(0).reset();
});

//Get the value of form
$('#btnFormValue').click(function(){
    alert(decodeURIComponent($('#Form '). Serialize()); / / the value is the string with & link, id = 3 & name = Zhang San & sex = male
});

Tags: JQuery Web Development

Posted on Sun, 03 May 2020 19:50:38 -0700 by Kardall