CODEWITHSUNDEEP
formsdatatablessubmit
ivva
ivva

Reputation: 2949

How to submit form with Datatables

I use Datatables to submit answers of questions from a survey. Each question is in new page, and the next is seen with the "Next" button. I want to have only one submit button and it has to appear in the end of all questions. In my code, it's under the table and is visible all the time. My biggest problem is that this submit button insert in db only the last question, but not all questions. Please can you help me? :) My view is:

    <html>
    <head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" type="text/css"  />
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

    <script>

    	$(document).ready(function() {
        $('#example').dataTable( {
            "pagingType": "simple",
            "lengthMenu": [[1], [1]],
            "bSort": false,

             "language": {
        "paginate": {
          "previous": true
        }
      }


        } );

    } );

    </script>
    </head>
    <body>
      <?php 
    echo form_open('index/survey_fill/' .$survey_id  ); ?>
    <table  id="example" >
      <thead>
      	<tr><th>Question</th></tr>
      </thead>   
      <tbody>
      <?php
    	echo validation_errors();

    	foreach ($survey as $row)
    	{	
    		
    		?>
    		<tr>
    	
    	   	<td> 
    		<?php echo "$row->question"; ?><br/>
    		<?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
    		$data=array(
    			'name' =>  'answer['.$row->question_id.']',
    			'value' => '5'
    		);
              echo form_radio($data); 
    		echo " 5 ";
    		$data=array(
    			'name' =>  'answer['.$row->question_id.']',
    			'value' => ' 4'
    		);
    		echo form_radio($data);
    		echo " 4";
             </td></tr>
   
	<?php 
	}

?>	
		
	</tbody>
</table> 
      <?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
    <input type="submit" id="button" name = "submit" value="Submit" class="btn btn-success"> 
    </form>
</div>
</body>
</html>

My model is:

   public function survey_fill() 
    {
        $answers=($this->input->post('answer'));
        
        if (null !==($this->input->post('submit'))) {
            $date = new DateTime("now"); 

            foreach($answers as $question_id=>$answer)
            {
                $data = array(
                    'user_id'=>$this->session->userdata['user_id'],
                    'question_id'=>$question_id,
                    'answer'=>$answer,              
                    'created_at'=>$date->format('Y-m-d H:i:s')
                );
            
             
                $this->db->insert('survey_answers', $data);
                
            }
              if($this->db->affected_rows() > 0)
            {
                 
                return true;
            } 
            return false;
        }
    }

Upvotes: 1

Views: 7023

Answers (1)

bpeterson76
bpeterson76

Reputation: 12870

I'm thinking Datatables is quite a lot of overkill for what you're trying to do. Personally, I'd output this in a set of divs and do a simple forward-back type button with jQuery toggle, which is a LOT less overhead. There's also very low-overhead paging solutions out there that could suffice. Remember, datatables is not only reformatting the table, but it has an encyclopedia of API calls that are loaded, plus the data model it holds. That's a LOT for a show/hide type test.

Regardless, the solution is pretty straightforward. Wrap your container (whatever it is, datatable or divs) with a <form> tag. Put the submit button at the end, and show/hide or enable/disable it via whatever means you want. Datatables has an API call that can tell you the current page, and you could key off that to enable your button. Since the button will be before you close the <form> it will automatically submit.

Alternative, you could wrap your container in the form, build a jQuery .on('click') event that serializes the form and submits it via Ajax if that was desired. The key if you go this route is to preventDefault() so the form doesn't auto-submit as is standard for html forms.

Upvotes: 1

Related Questions