ajax - Short cut way of collecting form input values using javascript -
i have form collects information user. form composed of 10 input text field. individual value of input text field accessed via var first_name = $("#fname").val()
example , passed var postdata = {'fname':first_name};
, passed ajax url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata
controller function again collect it. if have 30 input text field , used way, take me lot of time. best way pass numerous input field values using javascript in miniature way? there shortcut this? lot. have 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); }
indeed there is:
$("#save").click(function () { var postdata = $("#idofyourform").serialize(); $.ajax({ type: "post", url: "<?php echo base_url(); ?>main_controller/save_data", data: postdata, // perhaps better specify datatype // of data expected server // readability datatype: 'json', success: function (data) { if (data.notify) { alert('success'); } else { alert('failed'); } } }); // maybe need return false; });
Comments
Post a Comment