[front end development summary] form operation series

(1) Common operation sorting

(1) Select label operation

1. Basic operation

 $("#select_id").change(function(){//code...}); / / add an event for Select, which is triggered when one of them is selected
 var checkText=$("#select_id").find("option:selected").text();  // Get the Text selected by Select and the value displayed on the page
 var checkValue=$("#select_id").val(); / / get the Value selected by Select
 var checkIndex=$("#select_id ").get(0).selectedIndex;  // Gets the index value of the Select selection
 var maxIndex=$("#select_id option:last").attr("index "); / / get the maximum index value of Select

2. Add / delete the Option item of Select

//Append an option (drop-down item) to Select, which needs to be matched with $("#select_id").empty()
$("#select_id").append("<option value='Value'>Text</option>"); 

 //Insert an option for Select (first position)
$("#Select_id "). Prepend (" < option value ='0 '> please select < / option > ");

 //Delete the option (last) with the largest index value in Select
 $("#select_id option:last").remove();

//Delete option with index value 0 in Select (first)
$("#select_id option[index='0']").remove();  

//Delete Option with Value='3 'in Select
$("#select_id option[value='3']").remove(); 

 //Delete the Option of Text='4 'in Select
$("#select_id option[text='4']").remove(); 

//Update select list
 First: $("#sel").empty();
Then add: $("#select_id").append("<option value='Value'>Text</option>"); 

(2) Multi check box

1. Common operation

[1]Setpoint specific checkbox Uncheck
 $("#chk1").attr("checked",'');
$("input['tupe=checkbox']").removeAttr("checked");Remove the selection of multiple boxes

[2]Setpoint specific checkbox Check status
$("#chk2").attr("checked",true);

[3]Judge whether it is selected
if($("#chk1").attr('checked')==undefined) 

$("input[type='checkbox']").is(':checked') return true or false
$("#ID] "). Attr (" checked ") jq1.6 returns checked or undefined (1.6 returns true or false)
if ($("#XXX").prop("checked")==true){
       $("#XXX").prop("checked",false)
    return  false;
}
[4]All selected status setting
$("input[type='checkbox']").attr("checked",true); 

(3) Text box text

1. Common operation

[1]Empty content
$("#txt").attr("value",'');

[2]Fill content
$("#txt").attr("value",'11');

(4) Express control property actions

[1]Button disabled

$("#buttonid").attr("disabled", "disabled");

(5) Three methods and differences of hiding input

I<input type="hidden" />
II<input type="text" style="display:none" />
The above two methods can realize hiding without leaving traces.
III<input type="text" style="visibility: hidden;" />
The third method can realize placeholder hiding (leaving blank instead of displaying)

(6) Jquery gets the data in the form

<form>
<input name="username" type="text"/>
                <input name="password" type="password"/>
                <input id="subbtn" type="button" value="submit">
            </form>
             $("#subbtn").click(function(){
                    var data = {};

	            var t = $('form').serializeArray();
	            $.each(t, function() {
	                 data [this.name] = this.value;
	            });
	            alert(JSON.stringify(data ));
            });

(2) Dynamic components and labels

(1) Dynamically adjust label component position style

1. jQuery syntax - move nodes and change the order of nodes

In jQuery, we can use after() and before() methods to move HTML element nodes and change the order of nodes.

1, Basic page
There is a ul list in the basic page. Let's change the red color in it

  • Tag as an example to demonstrate how to use jQuery to change the order of element nodes. The basic page is as follows:
    HTML code:
  • <button class="move-up">Move up</button>
    <button class="move-down">Move down</button>
    
    <ul class="box">
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li>I am an ordinary person li label</li>
        <li class="move">I can move li label</li>
    </ul>
    
    button{
        width: 100px;
        height: 30px;
        display: inline-block;
        border-radius: 10px;
        border: none;
        background-color: #0d3349;
        color: #fff;
    }
    .move{
        color: red;
        font-weight: bolder;
    }
    

    2, Move element node up

    $(function(){
        $('.move-up').click(function(){
            var cur_li = $('.move');
            var prev_li = cur_li.prev();     // Gets the previous node of the current node
            // Before inserting the current node into the previous node, if there is no previous node, it indicates that it has reached the top
            if(prev_li.length != 0){
                prev_li.before(cur_li);
            }
            else {
                alert("The element has reached the top!");
            }
        });
        
    });
    

    3, Move element node down

    $(function(){
        $('.move-down').click(function(){
            var cur_li = $('.move');
            var next_li = cur_li.next();     // Gets the next node of the current node
            // After inserting the current node into the next node, if there is no next node, it indicates that the bottom has been reached
            if(next_li.length != 0){
                next_li.after(cur_li);
            }
            else {
                alert("The element node is already at the bottom!");
            }
        });
    


    4, Move element to top / bottom
    In fact, moving elements to the top and bottom is very simple.
    Move to the top: just get the first li tag in the current ul and insert the element before the first tag.
    Move to the bottom: get the last li tag in the current ul, and then insert the calcium element into the last tag.
    Example code:

    $(function () {
        // Move to top
        $('.go-up').click(function () {
            var cur_li = $('.move');
            var first_li = $('.box li').eq(0);
            first_li.before(cur_li);
        });
        
        // Move to bottom
        $('.go-down').click(function () {
            var cur_li = $('.move');
            var last_li = $('.box li').last();
            last_li.after(cur_li);
        });
    });
    

    2. [case] mobile node

    Requirements: according to the user's label, highlight the user's existing label and put it in the front position, and put the irrelevant label in the back

    [1] Add a public class attribute dc_show to each tag. This class is available only when highlighted

    [2] Operate the parent element li to put all dc_show s in the first place, so that this effect can be achieved

    	$(function () {
    		// Move to top
    			var cur_li = $('.dc_show');
    		    let parentNode = cur_li.parent();
    			var first_li = $('.box li').eq(0);
    			first_li.before(parentNode);
    	});
    

    (3) Practical arrangement

    (1) Multi form merge submission

    You can use $('#form1, #form2'). serialize(); to pass multiple forms

    Reference code:

    $('#form1').submit(function() {
        var action = $(this).attr('action');
        if (!EntryCheck()) return false;
        $.ajax({
            url  : action,
            type : 'POST',
            data : $('#form1, #form2').serialize(),
            success : function() {
                window.location.replace(action);
            }
        });
        return false;
    });
    

    [to be updated and improved...]

Tags: Javascript JQuery html

Posted on Sun, 12 Sep 2021 02:38:43 -0400 by Magicman0022