EVOLUTION-NINJA

Edit File: feedback.php

<?php $this->load->view('includes/admin_dashboard_header');?>

<div id="wrapper">
    	<?php $this->load->view('includes/admin_menu');?>
        
      
   		<div id="page-wrapper">

<div class="row">
                    <div class="col-lg-12">
                       
                    </div>
                </div>

<div class="row">
				<div class="container">		
					<h3 class="page-title">
						Add Opinion
					</h3>	
		
			
			
					<form id="ask_feedback">
						<div class="row  col-sm-offset-2" style="padding-top: 14px;">
						
									
									<div class="form-group">
										<label class="control-label col-sm-4" for="email">Add Opinion</label>
										<div class="col-sm-8">												
											<textarea type="text" class="form-control" name="feedback" id="feedback" required ></textarea> 
										</div>
									</div>
									
									<div class="form-group">
										<label class="control-label col-sm-4" for="email">Options</label>
										<div class="col-sm-6">												
											<input type="text" class="form-control"  name="options[]" id="options" required >
										</div>
										<div class="col-sm-2">
											<button type="button" class="btn btn-primary add_more_options" >Add</button>
										</div>		
									</div>

<div class="add_options">
									</div>			
									
									
									
								</div>
								
								
							<div class="col-sm-4"></div>
						
						
						<div class="row">
							<div class="col-sm-2"></div>
							<div class="col-sm-3">
								<button type="submit" id="submit" class="btn btn-default mybt profilebt">Submit</button>
							</div>
							
							<div class="col-sm-2"></div>						
						</div>	 				
					</form>

<div id = "jaytab" class="jaytab">
						<table id="list2"></table>
						<div id="pager2"></div>
						<div id="dialogSelectRow" title="Warning" style="display:none">
							<p>Please select row</p>
						</div>									
					</div>
				</div> 	
			  </div> 
            </div>
            
        </div>
        
    			
    </div>
         <?php $this->load->view('includes/admin_dashboard_header');?>
    
<style>

@media only screen and (min-width:320px) and (max-width:641px){
.ui-jqgrid {
margin-left: 1px !important;
}

#sData span, #cData span {
	margin-left: 0 !important;
	}
}
@media only screen and (min-width:641px) and (max-width:991px){

.ui-jqgrid {
margin-left: 1px !important;
}
#jaytab{
	margin-top: 0 !important;
	margin-left: 0 !important;
	overflow-x: scroll;
	width: 100% !important;
	padding-left:0 !important;
	padding-right:9px !important;
}

}

#sData span, #cData span 
{
    margin-left: 3px;
}
#sData {
    height: 29px;
}
#cData {
    height: 29px;
}

.jqgfirstrow
	{
		    height: 0px !important;
	}
	
	.text_color a{
	
	color:white !important;
	}
</style>  
 <script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/jquery.jqGrid.js'); ?>"></script>
                      
     <script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/i18n/grid.locale-en.js'); ?>"></script>
                    <script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/jquery.jqGrid.min.js'); ?>"></script>

<script type="text/javascript">

function sanitizeInput(input) {
   
    var tempDiv = document.createElement("div");
    tempDiv.textContent = input;
    return tempDiv.innerHTML;
}

// document.getElementById('ask_feedback').addEventListener('submit', function(e) {
//     e.preventDefault();

//     const feedback = document.getElementById('feedback').value;
//     const options = Array.from(document.querySelectorAll('input[name="options[]"]')).map(opt => opt.value);

//     // Check if feedback and options follow expected patterns
//     const isFeedbackValid = /^[a-zA-Z0-9\s.,_/!?-]*$/.test(feedback);
//     const areOptionsValid = options.every(opt => /^[a-zA-Z0-9\s.,_/!?-]*$/.test(opt));

//     if (!isFeedbackValid || !areOptionsValid) {
//         alert("Invalid input detected.");
//         return;
//     }

//     // Submit data via AJAX if valid
//     const formData = new FormData(this);
//     $.ajax({
//         type: 'POST',
//         url: '<?php echo base_url("controller/insert_feedbacks"); ?>',
//         data: formData,
//         contentType: false,
//         processData: false,
//         success: function(response) {
//             response = JSON.parse(response);
//             alert(response.message);
//             if (response.result == 1) {
//                 location.reload();
//             }
//         }
//     });
// });

document.getElementById('ask_feedback').addEventListener('submit', function(e) {
    e.preventDefault();

const feedback = document.getElementById('feedback').value;

const options = Array.from(document.querySelectorAll('input[name="options[]"]')).map(opt => opt.value);

// Validate feedback and options against the forbidden tags regex pattern
    const isFeedbackValid = forbiddenTagsRegex.test(feedback);
    const areOptionsValid = options.every(opt => forbiddenTagsRegex.test(opt));

if (!isFeedbackValid || !areOptionsValid) {
        alert("Invalid input detected. ");
        return;
    }

const formData = new FormData(this);

$.ajax({
        type: 'POST',
        url: '<?php echo base_url("controller/insert_feedbacks"); ?>', // Make sure this URL is correct
        data: formData,
        contentType: false,  
        processData: false,  
        success: function(response) {
            response = JSON.parse(response);

alert(response.message);

if (response.result == 1) {
                location.reload();  
              // Optionally, reset the form instead of reloading
                // document.getElementById('ask_feedback').reset();
            }
        },
        error: function(xhr, status, error) {
            // Handle errors (e.g., network issues)
            alert("An error occurred while submitting the form. Please try again.");
            console.error(error);
        }
    });
});

$(document).ready(function (){

jQuery("#list2").jqGrid({
			url:"<?php echo base_url('controller/get_added_feedbacks')?>",	 
			datatype: "json", 
		   colNames:['Id','Questions','Options','DELETE'],
				
			colModel:[
					  {name:'id',index:'id',hidden:true, width:50,editable:true},
					  {name:'feedback',index:'feedback', width:150,editable:true},
					  {name:'options',index:'options', width:150,editable:true},
					  {name:'delete',index:'delete',align: "center",editable:false,search:false,editrules:{required: true}, width:150,cellattr: function (rowId, tv, rawObject, cm, rdata) 
							{
	                	     return ' onclick="fun_delete($(this))" ';
	                		},formatter:function (cellvalue, options, rowObject) {    
							return "<input type='button' value='DELETE'  \>";
				  		}},
					],
						height: 'auto',
		      	rowNum:20,
		      	rowTotal: 2000,
		      	rowList : [20,30],
		      	rownumbers: true,
		      	rownumWidth: 40,
		      	pager:"#pager2", 
		      	//sortname:'id', 
		      	viewrecords: true,
		      	gridview: true,
		      	autowidth: true,
		      	//sortorder:"desc",
		       	loadonce:true,
				caption:"Opinion Poll",
			
  });

$("#list2").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required
	
	 		$("#list2").jqGrid('navGrid','#pager2',
				{edit:false,add:false,del:false,search:false,refreshstate:"current"},
				{ },
		        { },
		        { }, 
				{
			    	sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
			        closeOnEscape: true, 
			        	multipleSearch: true, 
			         	closeAfterSearch: true }
			);

});

$("#cancel").click(function(e) {
	e.preventDefault();
		window.location.href  = '<?php echo base_url('controller/create_po');?>';
		 });

$('.add_more_options').click(function(){

var options = '';
		options += '<div class="form-group more_options">';
		options += '<label class="control-label col-sm-4"></label>';
		options += '<div class="col-sm-6">';												
		options += '<input type="text" class="form-control"  name="options[]" id="options" required >';

options += '<a class="remove" href="javascript:void(0);"><span class="glyphicon glyphicon-trash remove"></span> Remove</a>';
		options += '</div>';
		options += '</div>';

$('.add_options').append(options);

$('.remove').click(function()
		{
			$(this).closest('.more_options').remove();
		});

});

function fun_delete(rowId)
	{
	  var id = rowId.closest('tr').attr('id');
		
		$.ajax({
			type:'post',
			url:'<?php echo base_url("controller/delete_feedback"); ?>',
			data:{'id':id},
			async:false,
			success:function(response)
			{
                  response=jQuery.parseJSON(response);
                  console.log(response);

if(response.result == 1)
				{
					alert(response.message);
					$("#list2").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
				}
				else
				{
					alert(response.message);
				}
				
			}
			 
		});
		
 
	}

</script>

<style>

.mybt {
    background: #0261b7 !important;
    color: white !important;
   //width: 100%;
}

</style>