Case

Friday, March 2, 2012

How to convert jquery object to string?

In jquery we can use .html() get the html code.
But how can we convert it to string?
That is very simple, we just asign the .html() to a javascript variable.

var v = $("#xxx").html();

The variable v will be change to a string that about .html() content.

DEMO

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function test(){
    var v = $("#asignHtmlToString").html();
    alert(v);
}
</script>
<button id="asignHtmlToString" onclick="test();">Click Me</button>
 </div>
</body>
</html>

How to compare space with jquery?

Compare the space we can use unicode to comparing it.
the space unicode is 32.

<b> </b>

The below code show how to compare the space use jquery.

if( $("b").html().charCodeAt() == 32 ) {}

Click below demo button will show the alert popup when find the li tag have space.

DEMO

Text1
Text2
Text3

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function test(){
    $("li").each(function(e){
        if($(this).html().charCodeAt() == 32){
            alert("I have a space");
        }
    });
}
</script>
<ul> 
      <li>Text1</li>
      <li> </li>
      <li> </li>
      <li>Text2</li>
      <li></li>
      <li>Text3</li>
      <li>    </li>
</ul>
<button onclick="test();">Click Me</button>
</div>
</body>
</html>

Wednesday, February 29, 2012

How to select different tag elements with jquery?

Consider a page width many tags and you want to select diferent tag.
Make them to a list item and change their css or style.

you can use add() selector.
Consider a page with 5 i tags and 5 b tag.How can I select these tags as a list item?

$("i").add("b");

It's so easy to use with jquery.

DEMO

Hello World! Hello Sun! Hello Moon! Hello Star! Hello Jquery! Hi World! Hi Sun! Hi Moon! Hi Star! Hi Jquery!

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("i").add("b").css("color","red").css("display","block");
});
</script>
 <i>Hello World!</i>
 <i>Hello Sun!</i>
 <i>Hello Moon!</i>
 <i>Hello Star!</i>
 <i>Hello Jquery!</i>
 <b>Hi World!</b>
 <b>Hi Sun!</b>
 <b>Hi Moon!</b>
 <b>Hi Star!</b>
 <b>Hi Jquery!</b>
 </div>
</body>
</html>

Tuesday, February 28, 2012

How to get/set textbox value with jquery?

jquery version 1.7.1

This article show you how to get and set textbox value.
Your can use val() and attr() to do this work.

val()

To get the textbox value:

$("#xxx").val();

To set the textbox value:

$("#xxx").val("xxxxxxx");

attr()

To get the textbox value:

$("#xxx").attr("value");

To set the textbox value:

$("#xxx").attr("value","xxxxxxx");

The demo have a textbox and four button,
The first button: the code will use val() function get the textbox value and show it on label element.
The second button: the code will use attr() function get the textbox value and show it on label element.
The third button: the code will use val() function set the textbox value.
The fourth button: the code will use attr() function set the textbox value.

DEMO

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#b1").click(function(){
        var value = $("#t1").val();
        $("#showLabel").html(value);
        return false;
    });
    $("#b2").click(function(){
        var value = $("#t1").attr("value");
        $("#showLabel").html(value);
        return false;
    });
    $("#b3").click(function(){
        $("#t1").val("This is val() set value.");
        return false;
    });
    $("#b4").click(function(){
        $("#t1").val("This is attr() set value.");
        return false;
    });
});
function changeFocus(id){
    var v = "#" + id;
    $(v).focus();
}
</script>
 <form id="myForm" method="post" action="">
    <label>The TextBox' value is:</label><lable id="showLabel"></lable>
    <br/><br/>
    <input id="t1" type="text" value="This is a TextBox"/>
    <br/><br/>
    <input id="b1" type="button" value="val():Get value"/>
    <input id="b2" type="button" value="attr():Get value"/>
    <input id="b3" type="button" value="val():Set value"/>
    <input id="b4" type="button" value="attr():Set value"/>
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

Monday, February 27, 2012

How to set focus to textbox with jquery

jquery version 1.7.1

This article show you how to focus to a textbox on page.
below have function that you can copy it to your page be used to focus the textbox, just pass the id of textbox.

this function is very simple.

function changeFocus(id){
    var v = "#" + id;
    $(v).focus();
}

The demo have two textbox and two button,
When you click the Change Focus1 button the focus will go to the first textbox,
click the Change Focus2 button the focus will go to the second textbox.

DEMO

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#t1").focus();
    $("#b1").click(function(){
        changeFocus('t1');
        return false;
    });
    $("#b2").click(function(){
        changeFocus('t2');
        return false;
    });
});
function changeFocus(id){
    var v = "#" + id;
    $(v).focus();
}
</script>
 <form id="myForm" method="post" action="">
    <input id="t1" type="text"/>
    <input id="t2" type="text"/>
    <br/><br/>
    <input id="b1" type="button" value="Change Focus1"/>
    <input id="b2" type="button" value="Change Focus2"/>
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

Sunday, February 26, 2012

A Mouseover Hover Effect Image Button with jquery

jquery version 1.7.1

In a html design, Normally when complete input data will press a submit button to request the data.
This post will show you how to use a image button to submit form? The image that have a movseover hover effect.

First you need to download the jquery library to your test location or use below code direct reference the library.

<script src="http://code.jquery.com/jquery-latest.js"></script>

we need to add the jQuery library script between the <head> tags.

we also need two images.I use the two below.I named them button_normal.png and button_hover.png

I writed two css use to define the image style, The class name are "imageNormal" and "imageHover".

 .imageNormal{
    cursor:pointer;
    border-style: inset;
 }

 .imageHover{
    cursor:pointer;
    border-style: outset;
 }

There are 5 parameters in css style.

when the page loading, we need to initial the action use jquery.

    $("#imgButton").hover(function() {
        $(this).attr("class","imageHover");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
            }, function() {
        $(this).attr("class","imageNormal");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
    });

upon code define the img will change the css style when mouse hover it.

    $("#imgButton").click(function(){
        $("#myForm").submit();
    });

upon code will call the submit action when click the image button.

    $("#myForm").submit(function(){
        alert("submit");
        return false;//delete this line when your have sever side to request
    });

upon code will submit the form.

Between the body tag in html we write below code.

 <form id="myForm" method="post" action="">
    <img id="imgButton" alt="My button" class="imageNormal" />
 </form>

DEMO

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<style>
 .imageNormal{
    cursor:pointer;
    border-style: inset;
 }
 .imageHover{
    cursor:pointer;
    border-style: outset;
 }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#imgButton").hover(function() {
        $(this).attr("class","imageHover");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
            }, function() {
        $(this).attr("class","imageNormal");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
    });
    $("#imgButton").click(function(){
        $("#myForm").submit();
    });
    $("#myForm").submit(function(){
        alert("submit");
        return false;//delete this line when your have sever side to request
    });
});
</script>
 <form id="myForm" method="post" action="">
    <img id="imgButton" alt="My button" class="imageNormal" />
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

Friday, February 24, 2012

How to use enter key submit form on different input text with jquery?

In this demo, the Form have two input box such as the "firstName" and the "lastName".
Press Enter key on them will triger different submit method.
The very important method is below:

$("form input").keypress(function (e) {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    if($(this).attr("name") == "firstName"){
      $("#firstNameId").click();
    }
  if($(this).attr("name") == "lastName"){
    $("#lastNameId").click();
  }
  return false;
} else {
  return true;
}
});

This method define in page initial, Set all input elements bind a keypress method that will execute when user focus in and press enter key.

DEMO

Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            if($(this).attr("name") == "firstName"){
                $("#firstNameId").click();
            }
            if($(this).attr("name") == "lastName"){
                $("#lastNameId").click();
            }
            return false;
        } else {
            return true;
        }
    });
    
    $("#firstNameId").click(function(){
        alert("This is the firstName submit button click event.");
    });
    
    $("#lastNameId").click(function(){
        alert("This is the LastName submit button click event.");
    });
});
</script>
 <form id="myForm" method="post" action="">
    <input type="text" name="firstName" id="firstName" value="firstName"/>
    <input type="text" name="lastName" id="lastName" value="lastName"/>
    <input type="submit" value="FirstName Submit Button" id="firstNameId"/>
    <input type="submit" value="LastName Submit Button" id="lastNameId"/>
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button