How to store form input in javascript variable

[condo123]

I have a form that has a number of checkboxes, each checkbox has a unique value and also has the name = "data[]" , so its a variable when multiple checkboxes are selected.

When a user selects the checkboxes I want to store these in a javascript variable, seems pretty easy, just not too sure how to do it..

At the moment I am using jquery $().val() but that seems to only get one value not all selected... any ideas??

<form method="POST" action ="">
..//other code//
<input type = "text" name ="name" id = "name">
<input type="checkbox" name="data[]" value="41" class="sel_emp"  />
</form>

<script type="javascript/text">
var somedata [] =$('.sel_emp').val();
....//other code
</script> 

[paul_wilkins]

When a user selects the checkboxes I want to store these in a javascript variable, seems pretty easy, just not too sure how to do it

They are already stored in the form elements collection, but with jQuery you can also select based on the form name, and then use map() to convert each item in to the value that it has.

var somedata = $('[name="data[]"]').map(function () {
    return this.value;
});

Or, another variation is to use the class name:

var somedata = $('.sel_emp').map(function () {
    return this.value;
});

[condo123]

thanks for that, but it doesnt seem to work. I am trying to actually pass that variable/array into a jquery ajax function in the data parameter (See code below).

I have also tried to get the form data with $().serialize(); but not luck passing it into the ajax data parameter.. any more ideas??

$(function() {
    
           //var data_id= new Array; 
       var data_id= $('.sel_emp').serialize()
        
        $('#delete').click(function() {
        $("#doubletrouble").dialog({
        closeOnEscape: false,
        draggable: false,
        width: 460,
         height: 170,
        modal: true,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
 
            'Yes': function() {
      
  
                $.ajax({
                    
                    url: '<?php echo base_url().'index.php/admin/delete_data_id';?>',
                     data: {'emp_id' : data_id},
                    type:"POST",
                    success: function() {
                        $('#doubletrouble').dialog( 'close' );
                        //window.location.reload(true)
                    } //end success
                });
                 
                

            } //end Yes
 
        } //end buttons
                     
     });
  });
});

[paul_wilkins]

When you serialise the form data, unticked checkboxes are not sent through. The ticked checkboxes are what your script should be basing its work on, since that is also how web browsers work in a non-scripted scenario as well.

<form id="ajaxTest" method="POST">
    <input type = "text" name ="name" id = "name">
    <input type="checkbox" name="data[]" value="41" class="sel_emp"  />
    <input type="checkbox" name="data[]" value="42" class="sel_emp"  />
    <input type="checkbox" name="data[]" value="43" class="sel_emp"  />
    <input type="checkbox" name="data[]" value="44" class="sel_emp"  />
    <input type="checkbox" name="data[]" value="45" class="sel_emp"  />
    <input type="submit" name="submit" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>

script.js

$(function () {
    $('#ajaxTest').submit(function () {
        var form = this;
        $.ajax({
            url: 'test.php',
            data: $(form).serialize(),
            type:"POST",
            success: function(data) {
                alert(data);
            }
        });
        return false;
    });
});

The form data that is received by the test.php page is:

array
  'name' => string 'Paul' (length=4)
  'data' => 
    array
      0 => string '41' (length=2)
      1 => string '42' (length=2)
  'submit' => string 'submit' (length=6)