Various operations of form components (value, assignment, attribute)

 

一、input-text

<input type="text" name="customName" id="customName" value="${o.customName }"/>

 

//value:
    var customName1 = $('#customName').val();
    var customName2 = $('input[name="customName"]').val();
    var customName3 = $('input[type="text"][name="customName"]').val();
//assign:
    $('#customName').val(1);
    $('input[name="customName"]').val(2);
    $('input[type="text"][name="customName"]').val(3);

 

 

二、textarea

<textarea id="form_problem" name="problem" onKeyDown="textCounter(this.form.problem,'problem_length',250);" onKeyUp="textCounter(this.form.problem,'problem_length',250);">${o.problem }</textarea>
<span id="problem_length"></span>

//value:
    var problem1 = $ ('# form_problem'). val ();
     var problem2 = $('input[name="problem"]').text();
//assign:
    $('#form_problem').val(123);

 

 

Limit input length: (via onKeyDown/onKeyUp properties)

	//Control the input length of the textarea and display the number of current inputs. (textarea object, the element name responsible for displaying the number of inputs, the maximum length)
	function textCounter(field, countfieldId, maxlimit) {
		//If the number of characters in the element area is greater than the maximum number of characters, truncate according to the maximum number of characters;
		if (field.value.length > maxlimit){
			field.value = field.value.substring(0, maxlimit);
			return;
		}
		
		//Display the remaining number of characters in the text box of the counting area;
		var a = field.value.length;
		var b = maxlimit - field.value.length;
		//The word a has been entered, and the word b can also be entered
		$('#'+countfieldId+'').html('The word ' + a + ' has been entered, and the word ' + b + ' word' can also be entered);
	}

 

Three, select

<select id="form_typeId"  name="typeId" style="width:100px;">
    <option value="1"  class=“c1”>s1</option>
    <option value="2"  class=“c2”>s2</option>
</select>

 

//Get the value of the currently selected item:
  var typeId1 = $("#form_typeId").val();//1
  var typeId2 = $('#form_typeId option:selected') .val();
//Get the text of the currently selected item:
  var typeId1 = $("#form_typeId").text();//s1
  var typeId2 = $('#form_typeId option:selected') .text();
  var typeId3 = $("#form_typeId").find("option:selected").text();
//Get other attribute values ​​of the currently selected item:
    var c = $("#form_typeId").find(" option:selected").attr("class”);//c1
//Select the option for the specified value:
     $("select[name='parentId'] option[value="+parentId+"]").attr("selected","selected");
     $("#form_typeId").val('1');
//Clear the option option of select:
  $('#form_typeId').empty();
//Add option options to select:
  var op1 = $("<option>").val(1).text("test1");
    $("#form_typeId").append(op1);

 

 

 

 四、input-radio

<inputtype="radio"name="state"value="10"/>
<inputtype="radio"name="state"value="20"/>

 

//Get the value of the currently selected item:
  if($("input[name='state']:checked").length == 0){  
    alertMessageContent("Please select...");
    return false;
  }
  var state = $("input[name='state']:checked").val();
//Select the option for the specified value:
    var state = 10;
    $('input[type="radio"][name="state"][value='+state+']').attr("checked","checked");
    $('input:radio[name="state"]:nth(0)').attr('checked',true);  
    $('input:radio[name="state"]:nth(1)').attr('checked',true);

 

 

 

 

五、input-checkbox

<input type="checkbox" id="typeId_all">
<input type="checkbox" name="typeId" value="${o.TYPEID }"/>

 

//Get the values ​​of the selected item:
var typeIds = '';
$('input[name="typeId"]').each(function(){
    if($(this).attr("checked") == "true" || $(this).attr("checked") == "checked"){
    typeIds += $(this).val() + ',';
}
 
});
if($("input[name='typeId'][value='2']")[0].checked){  
  $('#show_').hide();  
}
//Select the item with the specified value:
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked","checked");
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked",true);
//Uncheck the item with the specified value:
   $('input[type="checkbox"][name="typeId"][value="1"]').removeAttr("checked");
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked",false);

//select all/unselect all:
$('#typeId_all').click(function(){
	checkAll("typeId_all","typeId");
});
//Check box selection inputid: all check box id attribute, inputname: traversed all selected check box name attribute
function checkAll(inputid,inputname){
	if($('#'+inputid).attr("checked")=="true" || $('#'+inputid).attr("checked")=="checked"){
		$('input[name="'+inputname+'"]').each(function(){
			$(this).attr("checked","checked");
		});
	}else{
		$('input[name="'+inputname+'"]').each(function(){
			$(this).removeAttr("checked");
		});
	}
}

 

 

 六、input-button

<input type="button" id="del_submit" value="确定" onclick="doDelType();"/>

// Make the button unavailable:
$('#del_submit').attr('disabled','disabled');
// Make the button available:
$('#del_submit').removeAttr('disabled');