EVOLUTION-NINJA
Edit File: add_product_details.php
<?php $this->load->view('includes/admin_dashboard_header');?> <div id="wrapper"> <!-- Navigation --> <?php $this->load->view('includes/admin_menu');?> <div id="page-wrapper"> <div class="container-fluid"> <!-- Page Heading --> <!-- /.row --> <div class="row"> <div class="container"> <h3 class="page-title"> Add New Product </h3> <div class="file-uploader"> <form action="<?php echo site_url('controller/product_import'); ?>" method="post" name="upload_excel" enctype="multipart/form-data"> <a href="<?php echo site_url("controller/download_product"); ?>" style="padding-left:20px" >Download .XLS file format</a> <div class="file-uploader__message-area"> <p>No files selected. Please select a file.</p> </div><ul class="file-list"></ul><div class="hidden-inputs hidden"></div> <div class="file-chooser"> <input id="file" class="file" name="file" type="file"> </div> <button class="form-control btn btn-default mybt profilebt" name="fileSubmit" type="submit">Submit</button> </form> </div> <form action="<?php echo base_url('controller/insert_product');?>" method="post" id="profile" onsubmit="return validateForm()"> <div class="row col-sm-offset-2" style="padding-top: 14px;"> <div class="form-group"> <label class="control-label col-sm-4" for="email">Item Name</label> <div class="col-sm-8"> <input type="text" class="form-control" name="item_name" id="item_name" required> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="email">Item Code</label> <div class="col-sm-8"> <input type="text" class="form-control" name="code" id="code" required> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="email">HSN Code</label> <div class="col-sm-8"> <input type="text" class="form-control" name="hsn" id="hsn" required> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="email">List Price</label> <div class="col-sm-8"> <input type="text" class="form-control" name="price" id="price" required> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="email">Item Decription</label> <div class="col-sm-8"> <input type="text" class="form-control" name="description" id="description" required> </div> </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-3"> <!-- <button style="margin-left: 300px;margin-top: -56px;" type="button" id="cancel" class="btn btn-default mybt profilebt">Cancel</button> --> </div> <div class="col-sm-2"></div> </div> <!--- row ----> </form> </div> <!--- container ----------> </div> <!-- /.row end--> </div> <!-- /.container-fluid --> </div> <!-- /#page-wrapper --> <!-- /#wrapper --> </div> <?php $this->load->view('includes/admin_dashboard_footer');?> <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> <style> .file-uploader { max-width: 400px; height: auto; //margin: 2em auto; margin-left:25%; } .file-uploader { //background-color: #dbefe9; background-color: #c7e7ff; border-radius: 3px; color: #242424; } file-uploader * { display: block; } .file-uploader__message-area { font-size: 18px; padding: 1em; text-align: center; //color: #377a65; color: #0065b3; } .file-chooser { width: 90%; margin: .5em auto; } .file-chooser { padding: 1em; transition: background-color 1s, height 1s; } .mybt { background: #0261b7 !important; color: white !important; //width: 100%; } </style> <script> function validateForm() { const item_name = document.getElementById('item_name').value; const code = document.getElementById('code').value; const hsn = document.getElementById('hsn').value; const price = document.getElementById('price').value; const description = document.getElementById('description').value; const alphaNumericPattern = /^[a-zA-Z0-9\s,./_-]+$/; if (!alphaNumericPattern.test(item_name)) { alert("Invalid input detected."); return false; } if (!alphaNumericPattern.test(code)) { alert("Invalid input detected."); return false; } if (!alphaNumericPattern.test(hsn)) { alert("Invalid input detected."); return false; } if (!alphaNumericPattern.test(price)) { alert("Invalid input detected."); return false; } if (!alphaNumericPattern.test(description)) { alert("Invalid input detected."); return false; } return true; } </script>