EVOLUTION-NINJA
Edit File: upload_signed_po.php
<div class="content-wrapper"> <div class="col-sm-10"> <div class="middle_work_table"> <div class="container"> <h3 class="page-title">Upload Signed PO</h3> <form enctype="multipart/form-data" action="<?php echo site_url('controller/signed_po');?>" method="post" onsubmit="return validateForm()" > <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>" /> <div class="row" style="padding-top: 14px;"> <input type="hidden" class="form-control" name="uid" id="uid" value="<?php echo $id;?>" required> <div class="form-group"> <label class="control-label col-sm-6" for="email">Enter Your PO Number</label> <div class="col-sm-6"> <input type="text" class="form-control" name="po_no" id="po_no" required> </div> </div> <div class="form-group"> <label class="control-label col-sm-6" for="description">Description</label> <div class="col-sm-6"> <textarea type="text" class="form-control" name="description" id="description"></textarea> </div> </div> <div class="form-group"> <label class="control-label col-sm-6" for="region">Region</label> <div class="col-sm-6"> <select id="region" name="region" class="form-control"> <option>Select</option> <?php foreach ($region as $reg){ ?> <option value="<?php echo $reg->id;?>"><?php echo $reg->region;?></option> <?php } ?> </select> </div> </div> <input type="hidden" class="po_type" id="po_type" name="po_type" style="width: 70%;border: transparent;" value="signed"> </div> <div class="file-uploader"> <div class="file-uploader__message-area"> <p>Upload PDF file.</p> </div> <div class="file-chooser"> <input type="file" id="file" class="file" name="userFiles[]" multiple required="required"> </div> </div> <br> <div class="row"> <!--<div class="col-sm-2"></div>--> <div class="col-sm-2"> <button class="form-control btn btn-default mybt profilebt" name="fileSubmit" type="submit" >Submit</button> </div> <div class="col-sm-2"> <button type="button" id="cancel" class="btn btn-default mybt profilebt">Cancel</button> </div> <div class="col-sm-4"></div> </div> <!--- row ----> </form> </div> <!--- container ----------> </div> <!--- row ----> </div><!---right side---> </div><!-- /.main-content --> <script> function validateForm() { const po_no = document.getElementById('po_no').value; const description= document.getElementById('description').value; const alphaNumericPattern = /^[a-zA-Z0-9\s]+$/; if (!alphaNumericPattern.test(po_no)) { alert("Invalid input detected."); return false; } if (!alphaNumericPattern.test(description)) { alert("Invalid input detected."); return false; } return true; } </script> <!--</div>--> <style> .form-control:focus, input[type="Submit"]:focus, input[type="button"]:focus { border-color: #FF0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); } .form-group{ margin-bottom: 48px; width: 550px; padding: 15px; } #editmodlist2 { //height: 232px !important; width: 326px !important; } #FrmGrid_list2 { width: 100% !important; } .ui-jqdialog .ui-jqdialog-titlebar { height: 29px !important; background-color:#2A4474 !important; color: white; padding-left: 10px; } .fm-button { height: 21px !important; padding: 1px; margin-right: 10px !important; height: 21px !important; width: 43%; margin-top: -7px !important; } .ui-jqdialog-content td.navButton { padding-top: 12px !important; } .ui-jqgrid .ui-jqgrid-titlebar { height: 27px !important; background-color: #2A4474!important; color:white !important; } .ui-jqgrid-bdiv { height: 232px !important; } .ui-widget-overlay { z-index:0 !important; } .my-nav{ width:100% !important; } .my-nav li{ width:100% !important; } .my-nav a:hover{ color:black !important; } .navbar-collapse{ padding-right:0px !important; padding-left:0px !important; } .menu-left{ padding-right:0px !important; } @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> (function( $ ) { $.fn.uploader = function( options ) { var settings = $.extend({ MessageAreaText: "No files selected.", MessageAreaTextWithFiles: "File List:", DefaultErrorMessage: "Unable to open this file.", BadTypeErrorMessage: "We cannot accept this file type at this time.", acceptedFileTypes: ['csv', 'rtf', 'xls', 'xlsx'] }, options ); var uploadId = 1; //update the messaging $('.file-uploader__message-area p').text(options.MessageAreaText || settings.MessageAreaText); //create and add the file list and the hidden input list var fileList = $('<ul class="file-list"></ul>'); var hiddenInputs = $('<div class="hidden-inputs hidden"></div>'); $('.file-uploader__message-area').after(fileList); $('.file-list').after(hiddenInputs); //when choosing a file, add the name to the list and copy the file input into the hidden inputs $('.file-chooser__input').on('change', function(){ var file = $('.file-chooser__input').val(); var fileName = (file.match(/([^\\\/]+)$/)[0]); //clear any error condition $('.file-chooser').removeClass('error'); $('.error-message').remove(); //validate the file var check = checkFile(fileName); if(check === "valid") { // move the 'real' one to hidden list $('.hidden-inputs').append($('.file-chooser__input')); //insert a clone after the hiddens (copy the event handlers too) $('.file-chooser').append($('.file-chooser__input').clone({ withDataAndEvents: true})); //add the name and a remove button to the file-list $('.file-list').append('<li style="display: none;"><span class="file-list__name">' + fileName + '</span><button class="removal-button" data-uploadid="'+ uploadId +'"></button></li>'); $('.file-list').find("li:last").show(800); //removal button handler $('.removal-button').on('click', function(e){ e.preventDefault(); //remove the corresponding hidden input $('.hidden-inputs input[data-uploadid="'+ $(this).data('uploadid') +'"]').remove(); //remove the name from file-list that corresponds to the button clicked $(this).parent().hide("puff").delay(10).queue(function(){$(this).remove();}); //if the list is now empty, change the text back if($('.file-list li').length === 0) { $('.file-uploader__message-area').text(options.MessageAreaText || settings.MessageAreaText); } }); //so the event handler works on the new "real" one $('.hidden-inputs .file-chooser__input').removeClass('file-chooser__input').attr('data-uploadId', uploadId); //update the message area $('.file-uploader__message-area').text(options.MessageAreaTextWithFiles || settings.MessageAreaTextWithFiles); uploadId++; } else { //indicate that the file is not ok $('.file-chooser').addClass("error"); var errorText = options.DefaultErrorMessage || settings.DefaultErrorMessage; if(check === "badFileName") { errorText = options.BadTypeErrorMessage || settings.BadTypeErrorMessage; } $('.file-chooser__input').after('<p class="error-message">'+ errorText +'</p>'); } }); var checkFile = function(fileName) { var accepted = "invalid", acceptedFileTypes = this.acceptedFileTypes || settings.acceptedFileTypes, regex; for ( var i = 0; i < acceptedFileTypes.length; i++ ) { regex = new RegExp("\\." + acceptedFileTypes[i] + "$", "i"); if ( regex.test(fileName) ) { accepted = "valid"; break; } else { accepted = "badFileName"; } } return accepted; }; }; }( jQuery )); //init $(document).ready(function(){ $('.fileUploader').uploader({ MessageAreaText: "No files selected. Please select a file." }); }); $("#cancel").click(function(e) { e.preventDefault(); window.location.href = '<?php echo base_url('controller/create_po');?>'; }); </script> <?php if ($this->session->flashdata('error_message')): ?> <script> alert("<?php echo $this->session->flashdata('error_message'); ?>"); </script> <?php endif; ?>