JQuery Forms Val

From CoderLearner
Jump to: navigation, search

Description

Get the matched elements value.

Example 1

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>val</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $().ready(function() {
                $('form').submit(function(){
                    var first = $('input[name="first"]').val();
                    var last = $('input[name="last"]').val();
                  
                    $('p').html(first + '---'+last);
                    return false; 
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <input type="text" name="first"/>
            <input type="text" name="last"/>

            <input type="submit" value="Submit"/>
        </form>
        <p></p>
    </body>
</html>

Try It

Example 2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>val</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $().ready(function() {
                $('form').submit(function(){
                    var first = $('input[name="first"]').val();
                    var last = $('input[name="last"]').val();
                    var sel_single = $('#single').val();
                    var sel_multiple = $('#multiple').val() || [];
                    
                    var dataf = first
                        +':'
                        +last
                        +' ' 
                        +sel_single
                        +' '
                        +sel_multiple.join(", ");
                    $('#content').html(dataf);
                    return false; 
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <input type="text" name="first"/>
            <br/>
            <input type="text" name="last"/>
            <br/>
            <select id="single">
                <option>Single1</option>
                <option>Single2</option>
            </select>
            <br/>
            <select id="multiple" multiple="multiple">
                <option selected="selected">Multiple1</option>
                <option>Multiple2</option>
                <option selected="selected">Multiple3</option>
            </select>
            <br/>
            <input type="submit" value="Submit"/>
        </form>
        <span id="content"></span>
    </body>
</html>

Try It

Example 3

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();              // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Example 4

Get drop down value and text value.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>val</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $().ready(function() {
                $('form').submit(function(){
                    var sel =$('select#sel option:selected');
                    var sel_val = sel.val();
                    var sel_text = sel.text();
                    $('#content').html(sel_val + '--'+sel_text);
                    return false; 
                });
            });
        </script>
    </head>
    <body> 
        <form>

            <select id="sel">
                <option value="one">Choice 1</option>
                <option value="two">Choice 2</option>
                <option value="three">Choice 3</option>
            </select>
            <br/>
            <input type="submit" value="Submit"/>
        </form>
        <span id="content"></span>
    </body>
</html>

Try It