CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
user3766509
user3766509

Reputation: 37

Display checkbox and form data in a table on the same page

Jsfiddle - http://jsfiddle.net/yeyene/S4FT7/

I modified above jsfiddle example to get checkbox value to the table on the same page. The problems is it gives me the all checkbox value that even not selected . some one give me help of fix this. thanks 

$(document).ready(function(){
    $('#submit').on('click',function(){
        var st = '';
        $('#myForm input[type=text],input[type=password],select,input[type=checkbox]').each(function(){
            st = st+ '<td>'+$(this).val()+'</td>';
            $(this).val('');
        });
        $('#details').append('<tr>'+st+'</tr>');
    });
});

Upvotes: 0

Views: 527

Answers (2)

Will
Will

Reputation: 211

I adjust some codes to make it simpler.

$(':input') can get any inputs, including your select.

if its checkbox your have to add $('input[type="checkbox"]:checked') to get values which you choose. 

$(document).ready(function(){
    $('#submit').on('click',function(){
        var st = '';
        $(':input[type!="button"]').each(function(){
            if(this.value){
                st = st+ '<td>'+$(this).val()+'</td>';
                    $(this).val('');
            }
        });
        $('#details').append('<tr>'+st+'</tr>');
    });
});

JSFIDDLE

Upvotes: 0

Umesh Sehta
Umesh Sehta

Reputation: 10683

change input[type=checkbox] to input[type=checkbox]:checked

try this:-

$(document).ready(function(){
$('#submit').on('click',function(){
    var st = '';
    $('#myForm input[type=text],input[type=password],select,input[type=checkbox]:checked').each(function(){
        st = st+ '<td>'+$(this).val()+'</td>';
        $(this).val('');
    });
    alert(st);
    $('#details').append('<tr>'+st+'</tr>');
   });
 });

Demo

Upvotes: 1

Related Questions