Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

Not sure if this is the correct question but baiscally I have html form which has a checkbox. i'm using websockets that need to pull that value with the javascript code. But regardless of weather the box is checked or not, it shows the value of 'yes'. How should I go about getting the coorect value to pull into python...?

<!DOCTYPE HTML>
<html> 
<head>
<title>Flask-SocketIO Test</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        namespace = '/test'; // change to an empty string to use the global namespace

        var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function() {
            socket.emit('my event', {data: 'Connected... Waiting for you...'});
        });


        socket.on('my response', function(msg) {
            $('#log').append('<br>' + msg.data);
        });


        $('form#emit').submit(function(event) {
            socket.emit('my event', {data: $('#emit_data').val(), 
                                     checkbox: $('#checkbox').val() 
                                    }
         ); 
            return false;
        });

    });
</script>
</head>
<body>
<h1>Flask-SocketIO Test</h1>
<h2>Send:</h2>
<form id="emit" method='POST' action='#'>
    <input type="text" name="emit_data" id="emit_data" placeholder="Message"><br>
    <input id="checkbox" checked="checked" name="checkbox" type="checkbox"></td>
    <input type="submit" value="Echo"></div>
</form>
<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>
share|improve this question

2 Answers 2

Use the selector :checked and test if the length of the selected elements is greater then 0:

$('form#emit').submit(function(event) {
        socket.emit('my event', {data: $('#emit_data').val(), 
                                 checkbox: $('#checkbox:checked').length > 0 
                                }
     ); 
share|improve this answer

There are a couple of ways but I prefer reading the checked property:

var isChecked = $('#checkbox').prop('checked');

This is another equivalent statement that reads a little nicer:

var isChecked = $('#checkbox').is(':checked');

The reason you are seeing it always checked is because val() is inspecting the checked attribute and not the checked property. Both of my examples should read from the property instead of the attribute. The attribute is reflective of the originally rendered markup and not the true current state of the control.

More on properties vs. attributes.

share|improve this answer
    
got it, is there a central location for this kind of information? – user1601716 Sep 29 '14 at 22:11
    
There is a small section titled "Attributes vs. Properties" on the jQuery API Documentation page for prop(). If you're going to put jQuery in your toolbox, I highly suggest reading through the entire API Documentation site. So there's that, and 12 years of web application development experience... :) – Cᴏʀʏ Sep 29 '14 at 22:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.