SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to store form input in javascript variable

    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??

    PHP Code:

    <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> 

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by condo123 View Post
    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.

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

    Or, another variation is to use the class name:

    Code javascript:
    var somedata = $('.sel_emp').map(function () {
        return this.value;
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??

    PHP Code:
    $(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
                         
         });
      });
    });

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    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.

    HTML Code:
    <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
    Code javascript:
    $(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:

    Code:
    array
      'name' => string 'Paul' (length=4)
      'data' => 
        array
          0 => string '41' (length=2)
          1 => string '42' (length=2)
      'submit' => string 'submit' (length=6)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •