Short cut way of collecting form input values using javascript

Question

I have a form that collects information from a user. The form is composed of 10 input text field. The individual value of input text field is accessed via var first_name = $("#fname").val() as an example and passed to var postdata = {'fname':first_name}; and then passed to ajax with url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata then the controller function again will collect it. If I have 30 input text field and then used this way, it would take me a lot of time. What is the best way to pass numerous input field values using javascript in miniature way? Is there a shortcut for this? Thanks a lot. I have a sample code below.

Views:

<input class="input input-large" type="text" name="fname" id="fname" value=""/>
<input class="input input-large" type="text" name="lname" id="lname" value=""/>
<input class="input input-large" type="text" name="address" id="address" value=""/>
<input class="input input-large" type="text" name="age" id="age" value=""/>
<input class="input input-large" type="text" name="height" id="height" value=""/>
<input class="input input-large" type="text" name="gender" id="gender" value=""/>
<input class="input input-large" type="text" name="school" id="school" value=""/>
<input class="input input-large" type="text" name="course" id="course" value=""/>
<input class="input input-large" type="text" name="year" id="year" value=""/>
<input class="input input-large" type="text" name="date_of_birth" id="date_of_birth"
value=""/>

<button class="btn btn-success" id="save" name="save">Save</button>

<script type="text/javascript">
$("#save").click(function(){
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var address = $("#address").val();
    var age = $("#age").val();
    var height = $("#height").val();
    var gender = $("#gender").val();
    var school = $("#school").val();
    var course = $("#course").val();
    var year = $("#year").val();
    var date_of_birth = $("#date_of_birth").val();

    var postdata = {
            'fname': fname,
            'lname': lname,
            'address': address,
            'age': age,
            'height': height,
            'gender': gender,
            'school': school,
            'course': course,
            'year': year,
            'date_of_birth': date_of_birth
    };

    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>main_controller/save_data",
        data: postdata,
        success: function (data) {
            if (data.notify) {
                alert('success');
            } else {
                alert('Failed');
            }
        }
    });

    });
</script>

Controller:

function save_data(){
    $fname = $this->input->post('fname');
    $lname = $this->input->post('lname');
    $address = $this->input->post('address');
    $age = $this->input->post('age');
    $height = $this->input->post('height');
    $gender = $this->input->post('gender');
    $school = $this->input->post('school');
    $course = $this->input->post('course');
    $year = $this->input->post('year');
    $date_of_birth = $this->input->post('date_of_birth');
    $this->insert_model->save_data($fname,$lname,$address,$age,$height,$gender,$school,$course,$year,$date_of_birth);
 }

Answer 1

Indeed there is:

$("#save").click(function () {

    var postData = $("#idOfYourForm").serialize();

    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>main_controller/save_data",
        data: postdata,

        // it is perhaps better to specify the dataType
        // of the data expected back from the server 
        // for readability
        dataType: 'json',
        success: function (data) {
            if (data.notify) {
                alert('success');
            } else {
                alert('Failed');
            }
        }
    });

    // maybe you need this
    return false;
});

http://api.jquery.com/serialize/