2013年8月3日 星期六

html input form template javascript (example sample eg e.g.)

http://stackoverflow.com/questions/3584145/change-text-of-label-in-jquery
<asp:Label ID="lblVessel" Text="Vessel:" runat="server" ></asp:Label>
'#<%= lblVessel.ClientID %>'
$("#LabelID").val("some value");
I learned that you can either use the provisional jquery method to clear it first then append:
$("#LabelID").empty();
$("#LabelID").append("some Text");
Or conventionaly, you could use:
$("#LabelID").text("some value");
OR
$("#LabelID").html("some value");
var lab =["1","2","3"];
var val = [42,55,51,22];
var data = [];
for(var i=0; i<4; i++)  {
    data.push({label: lab[i], value: val[i]});
}
Or an other, less concise way, but closer to your original code:
for(var i=0; i<4; i++)  {
   data[i] = {};              // creates a new object
   data[i].label = lab[i];
   data[i].value = val[i];    
}







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ÂX®ijQuery</title>
<style>
<!--
form{
    border: 1px dotted #AAAAAA;
    padding: 1px 6px 1px 6px;
    margin:0px;
    font:14px Arial;
}
input{                            /* ©Ò¦³input¼Ð°O */
    color: #00008B;   
}
input.txt{                        /* ¤å¥»®Ø³æ¿W³]¸m */
    border: 1px inset #00008B;
    background-color: #ADD8E6;
}
input.btn{                        /* «ö¶s³æ¿W³]¸m */
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px outset #00008B;
    padding: 1px 2px 1px 2px;
}
select{
    width: 80px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
textarea{
    width: 200px;
    height: 40px;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px inset #00008B;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.fn.disable = function(){
    //ÂX®ijQuery¡Aªí³æ¤¸¯À²Î¤@disable
    return this.each(function(){
        if(typeof this.disabled != "undefined") this.disabled = true;
    });
}
$.fn.enable = function(){
    //ÂX®ijQuery¡Aªí³æ¤¸¯À²Î¤@enable
    return this.each(function(){
        if(typeof this.disabled != "undefined") this.disabled = false;
    });
}
function SwapInput(oName,oButton){
    if(oButton.value == "Disable"){
        //¦pªG«ö¶sªº­È¬°Disable¡A«h½Õ¥Îdisable()¤èªk
        $("input[name="+oName+"]").disable();
        oButton.value = "Enable";   
    }else{
        //¦pªG«ö¶sªº­È¬°Eable¡A«h½Õ¥Îenable()¤èªk
        $("input[name="+oName+"]").enable();
        oButton.value = "Disable";    //µM«á³]¸m«ö¶sªº­È¬°Disable
    }
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">½Ð¿é¤J±zªº©m¦W:</label><br><input type="text" name="name" id="name" class="txt"></p>
<p><label for="passwd">½Ð¿é¤J±zªº±K½X:</label><br><input type="password" name="passwd" id="passwd" class="txt"></p>
<p><label for="color">½Ð¿ï¾Ü§A³Ì³ßÅwªºÃC¦â:</label><br>
<select name="color" id="color">
    <option value="red">¬õ</option>
    <option value="green">ºñ</option>
    <option value="blue">ÂÅ</option>
    <option value="yellow">¶À</option>
    <option value="cyan">«C</option>
    <option value="purple">µµ</option>
</select></p>
<p>½Ð¿ï¾Ü§Aªº©Ê§O:<br>
    <input type="radio" name="sex" id="male" value="male"><label for="male">¨k</label><br>
    <input type="radio" name="sex" id="female" value="female"><label for="female">¤k</label></p>
<p>§A³ßÅw°µ¨Ç¤°»ò:
    <input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="SwapInput('hobby',this)"><br>
    <input type="checkbox" name="hobby" id="book" value="book"><label for="book">¬Ý®Ñ</label>
    <input type="checkbox" name="hobby" id="net" value="net"><label for="net">¤Wºô</label>
    <input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">ºÎı</label></p>
<p><label for="comments">§Ú­n¯d¨¥:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p>
</form>
</body>
</html>

沒有留言:

張貼留言