I am currently making a module where a user would upload an image with some details to the database but its not working not even the validations are showing up i already created the uploads directory for the images
controller:
public function do_upload() {
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '1024';
$config['max_width'] = '1024';
$config['max_height'] = '1024';
$config['new_image'] = './uploads/';
$config['overwrite'] = TRUE;
$this->load->library('upload', $config);
$this->form_validation->set_rules('type', 'Type', 'required');
$this->form_validation->set_rules('school', 'School', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
if (!$this->upload->do_upload() || !$this->form_validation->run()) {
$error = array('error' => $this->upload->display_errors());
redirect('user/payment');
} else {
$data = $this->upload->data();
$this->thumb($data);
$file = array(
'img_name' => $data['raw_name'],
'thumb_name' => $data['raw_name'] . '_thumb',
'ext' => $data['file_ext'],
'type' => $this->input->post('type'),
'school' => $this->input->post('school'),
'email' => $this->input->post('email'),
);
$data = array('upload_data' => $this->upload->data());
$this->user_model->add_image($file);
// redirect('user/home_register');
$this->load->view('user/upload_success');
}
}
public function thumb($data) {
$config['image_library'] = 'gd2';
$config['source_image'] = $data['full_path'];
$config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 275;
$config['height'] = 250;
$config['new_image'] = './thumbs/';
$this->load->library('image_lib', $config);
$this->image_lib->resize();
}
View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Technofest - user</title>
<?php echo link_tag('css/bootstrap.min.css'); ?>
<?php echo link_tag('jumbotron-narrow.css'); ?>
</head>
<body>
<br>
<div align="center">
</div>
<br>
<div class ="container">
<ul class="nav nav-pills nav-justified">
<li role="presentation">Home</li>
<li role="presentation" >About</li>
<li role="presentation">Contact</li>
<li role="presentation" class="active" >Register</li>
</ul>
</div>
<br>
<br>
<div>
<?php echo form_open_multipart('user/do_upload'); ?>
<?php if (validation_errors()): ?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<?php echo validation_errors(); ?>
</div>
<?php endif ?>
<div class ="container center-block">
<div class="jumbotron">
<div class ="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Payment</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Type:</label>
<input type="radio" id="indiv" name="regtype" value="<?php echo set_value('type'); ?>" id='1'<?php echo set_radio('type','Individual', TRUE)?>/> Invidivual
<input id="bat" type="radio" name="regtype" value="<?php echo set_value('type'); ?>" id='2' <?php echo set_radio('type','Batch')?>/> Batch
<?php echo form_error('type'); ?>
<br><br>
<label class="col-sm-2 control-label">Payment for:</label>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">School:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter School Name" name="school" value="<?php echo set_value('school'); ?>">
</div>
</div>
</div>
<?php echo form_error('school'); ?>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter Email" name="Email" value="<?php echo set_value('email'); ?>">
</div>
</div>
</div>
<?php echo form_error('email'); ?>
<input type="file" id="imgInp" name = "pic" required width = "10px">
<div class="col-sm-offset-2 col-sm-10">
<button type="button, submit" class="btn btn-primary " style="border-radius: 0;">
Upload
</button>
Back
</div>
<?php echo form_close() ?>
</div>
</div>
</div>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
model
function add_image($data) {
$this->db->set('payment_date', 'NOW()', FALSE);
$this->db->insert('payment', $data);
}
I have 8 fields in db
id(auto increment),payment_data,type,school,email,img_name,thumb_name and ext
Try adding pic field name to
$this->upload->do_upload('pic')
And Change Raw Name to file_name
Try giving the name = "userfile"
just replace your
<input type="file" id="imgInp" name = "pic" required width = "10px">
with
<input type="file" id="imgInp" name = "userfile" required width = "10px">
Related
I am using the following angularJS function to upload images to my site,
.controller('fupController', ['$scope', '$http', function ($scope, $http) {
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
$scope.imagesrc = [];
for (var i = 0; i < $files.length; i++) {
var reader = new FileReader();
reader.fileName = $files[i].name;
reader.onload = function (event) {
var image = {};
image.Name = event.target.fileName;
image.Size = (event.total / 1024).toFixed(2);
image.Src = event.target.result;
$scope.imagesrc.push(image);
$scope.$apply();
}
reader.readAsDataURL($files[i]);
}
angular.forEach($files, function (value, key) {
formdata.append(key, value);
})
}
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: 'http://localhost:61194/api/FileUpload',
//data: formdata,
//data: { gallery: $scope.galleries[$scope.index].Id },
file: File,
headers: {
'Content-Type': undefined
}
};
$http(request).success(function (d) {
alert(d);
$scope.reset();
}).error(function () {
alert("Failed");
$scope.reset();
})
}
$scope.reset = function () {
angular.forEach(
angular.element("input [type = 'file']"),
function (inputElem) {
angular.element(inputElem).val(null);
}
);
$scope.imagesrc = [];
formdata = new FormData();
}
}])
the full code of the angular html template is as below:
<section class="view">
<div class="form-group">
<div class="controls">
<button type="submit" class="btn btn-success" ng-click="goBack()">Back</button>
</div>
</div>
<div class="row">
<img class="contact-img" ng-src="{{contact.imageUrl}}">
<section>
<article>
<div class="contact-card">
<h3 class="text-center">{{contact.firstName}} {{contact.lastName}}</h3>
<h6 class="text-center">{{contact.emailAddress}}</h6>
</div>
</article>
</section>
</div>
<form class="form margin-top-small" name="contactForm">
<fieldset>
<legend>Contact</legend>
<div class="form-group">
<label class="control-label" for="first-name">Picture</label>
<div class="controls">
<!--<input type="text" class="form-control input-large" required id="Picture" placeholder="Enter image Url" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="contact.imageUrl">-->
<!--<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" />-->
<!--<div ng-controller="fupController">
<input type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
</div>-->
<div ng-controller="fupController">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
Photos
</div>
<div class="panel-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>title</td>
<td>Image</td>
<td>Size</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="image in imagesrc track by $index">
<td>{{image.Name}}</td>
<td>
<img ng-src="{{image.Src}}" title="{{image.Title}}" style="width: 100px;" />
</td>
<td>{{image.Size}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-7">
<input type="file" multipe ng-files="getTheFiles($files)" />
</div>
<div class="col-lg-5">
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
<!-- FILE UPLOAD WITH PREVIEW, NEED TO ENABLE THE JAVASCRIPT BELOW -->
<!--<input type="file" id="imagess" onchange="previewFile()" ng-model="contact.imageUrl"><br>-->
<!--FILE UPLOAD 1-->
<!--<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" />-->
<!--FILE UPLOAD 2-->
<!--<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>-->
<!--FILE UPLOAD 3-->
<!--<div ng-controller="fileuploadCtrl">
<input type="file" ng-file-select name="file" ng-file-change="upload($files)">
<div class="progress" style=" margin 0%">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': percentComplete + '%' }" style="width: 0%;">
<span ng-if="percentComplete === 100">{{items.attachment}} upload completed successfully</span>
</div>
<span ng-if="percentComplete > 0" class="fileupload">{{percentComplete}}%</span>
</div>
</div>-->
<!--FILE UPLOAD 4-->
<!--<div ng-controller="fileuploadCtrl">
<input type="file" ngf-select="upload($files)" multiple>
</div>-->
<!--FILE UPLOAD 5-->
<!--<div ng-controller="MyCtrl2">
<h4>Upload on file select</h4>
<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
Select File
</button>
<br><br>
File:
<div style="font:smaller">
{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
{{errorMsg}}
</div>-->
<!--FILE UPLOAD 6-->
<!--<div ng-controller="MyCtrl2">
<input type="file" ngf-select="uploadFiles($file, $invalidFiles)" multiple>
</div>-->
<!--<img src="" height="200" alt="Image preview...">-->
<!--<input type="file" id="multi_file_upload" ng-model="contact.imageUrl"><br>
<img src="" height="200" alt="Image preview...">-->
</div>
</div>
<div class="form-group">
<label class="control-label" for="first-name">First Name</label>
<div class="controls">
<input type="text" class="form-control input-large" required id="first-name" placeholder="Enter first name" ng-model="contact.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label" for="last-name">Last Name</label>
<div class="controls">
<input type="text" class="form-control input-large" required id="last-name" placeholder="Enter last name" ng-model="contact.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label" for="email-address">Email</label>
<div class="controls">
<input type="text" class="form-control input-large" required ng-pattern="{{regularExpressions.emailAddress}}" id="email-address" placeholder="Enter email address" ng-model="contact.emailAddress">
</div>
</div>
<div class="form-group margin-top-small">
<div class="controls">
<!--<button type="submit" class="btn btn-lg btn-primary" ng-click="save(contact, contactForm)">Save Contact</button>-->
<button type="submit" class="btn btn-lg btn-primary" ng-click="save(contact, contactForm)">Save Contact</button>
<span class="alert alert-info" ng-show="hasSaved">
<strong>Confirmation: </strong>contact saved ! <br>
<button type="button" class="close" data-dismiss="alert">×</button>
</span>
<span class="alert alert-info" ng-show="saveError">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Failed: </strong>contact not saved ! <br>
</span>
<p>{{errortext}}</p>
</div>
</div>
</fieldset>
</form>
This is the Index page and the scripts:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>CSS Black Book</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="src/css/app.css" rel="stylesheet" media="screen">
<link href="src/css/Flip.css" rel="stylesheet" media="screen">
</head>
<body>
<header data-ng-controller="HeaderController">
<nav class="navbar">
<a class="navbar-brand" href="#/contacts">CSS Black Book</a>
<ul class="nav navbar-nav">
<li ng-class="{active: routeIs('contacts')}">Contacts</li>
<li ng-class="{active: routeIs('about')}">About</li>
</ul>
</nav>
</header>
<div data-ng-view data-ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!--<script src="lib/angular/ng-file-upload-shim.min.js"></script>--> <!-- for no html5 browsers support -->
<script src="../node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script>
<!--<script src="../../Scripts/angular.js"></script>-->
<script src="lib/angular/angular.min.js"></script>
<!--<script src="lib/angular/ng-file-upload.min.js"></script>-->
<script src="../node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>
<script src="lib/angular/angular.resource.min.js"></script>
<!--<script src="../Scripts/angular-resource.js"></script>-->
<script src="src/common/resources/contacts.js"></script>
<script src="src/common/resources/lookups.js"></script>
<script src="src/common/services/config.js"></script>
<script src="src/common/services/state.js"></script>
<script src="src/common/directives/mouse-enter-css.js"></script>
<script src="src/common/directives/mouse-leave-css.js"></script>
<script src="src/common/services/config.js"></script>
<script src="src/app/contacts/contacts.js"></script>
<script src="src/app/about/about.js"></script>
<script src="src/app/app.js"></script>
<script src="lib/respond/respond.min.js"></script>
<!--<script src="../../Scripts/angular.js"></script>-->
<!--<script src="../../site/lib/jquery/jquery.min.js"></script>-->
<!--<script src="../../site/lib/bootstrap/js/bootstrap.min.js"></script>-->
<!--<script src="../App2/file-upload.js"></script>-->
</body>
</html>
Here is the controller that gets called to do the actual upload of the image to a project folder called "Gallery":
public class FileUploadController : ApiController
{
private FileUploadDemoDbContext Context = new FileUploadDemoDbContext();
[System.Web.Http.HttpPost]
[HttpRoute("api/FileUpload")]
public IHttpActionResult Upload()
{
int uploadCount = 0;
string sPath = System.Web.Hosting.HostingEnvironment.MapPath("/Gallery/");
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
for (int i = 0; i < files.Count; i++)
{
System.Web.HttpPostedFile file = files[i];
string fileName = new FileInfo(file.FileName).Name;
if (file.ContentLength > 0)
{
//Guid id = new Guid();
Guid id = Guid.NewGuid();
string modifiedFileName = id.ToString() + "_" + fileName;
if (!File.Exists(sPath + Path.GetFileName(modifiedFileName)))
{
file.SaveAs(sPath + Path.GetFileName(modifiedFileName));
uploadCount++;
//Context.Galleries.Add(new Gallery() { Id = Convert.ToInt32(id.ToString()), FileName = "/Gallery" + modifiedFileName, Title = fileName });
Context.Galleries.Add(new Gallery() { Id = id, FileName = "/Gallery" + modifiedFileName, Title = fileName });
}
}
}
if (uploadCount > 0)
{
Context.SaveChanges();
return Ok("Uploaded Successfully");
}
return InternalServerError();
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
Context.Dispose();
}
base.Dispose(disposing);
}
}
Issue I am having is that no file is sent to the controller... I can actually see that the image is uploaded on the page though as this is the first step of the download, its sort of a preview of the image before user clicks on the Upload button. The interesting part is that if I make the call from a different html document, one with the structure below, the AJAX Post call does succeed and the file is uploaded successfully !!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="../../site/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/angular.js"></script>
<script src="../../site/lib/jquery/jquery.min.js"></script>
<script src="../../site/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../App2/file-upload.js"></script>
</head>
<body ng-app="fupApp" ng-controller="fupController">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
Photos
</div>
<div class="panel-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>title</td>
<td>Image</td>
<td>Size</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="image in imagesrc track by $index">
<td>{{image.Name}}</td>
<td>
<img ng-src="{{image.Src}}" title="{{image.Title}}" style="width: 100px;"/>
</td>
<td>{{image.Size}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-7">
<input type="file" multipe ng-files="getTheFiles($files)" />
</div>
<div class="col-lg-5">
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Have tried to change the way the data is sent like below with no joy...
data: formdata
data: [gallery: $scope.galleries[$scope.index].Id]
data: file
Another possible reason could be the scripts I use as they are different on both templates...
Any suggestions ?? many thanks
I have a website. With forecasts of sport. When in admin panel want to add new forecasts released the following error:
error!
There was a problem saving the tips: DB Error: Unknown column 'result' in 'field list'
Where is perhaps the error in the system? Can anyone help me with this?
Thank you!
<?php
$tips_open = $this->settings_lib->item('tips.allow_post');
?>
<?php
if (validation_errors()) :
?>
<div class='alert alert-block alert-error animated animated-short zoomIn'>
<a class='close' data-dismiss='alert'>×</a>
<h4 class='alert-heading'>
<?php echo lang('tips_errors_message'); ?>
</h4>
<?php echo validation_errors(); ?>
</div>
<?php
endif;
$id = isset($tips->id) ? $tips->id : '';
?>
<div class="box">
<div class="box-body">
<p class="text-center"><h4><?php if (isset($toolbar_title)) : ?><?php echo $toolbar_title; ?><?php endif; ?>
<span class="pull-right fs12"><span class="hidden-xs"><?php echo lang('tips_action_before_post');?></span>
<button type="button" class="btn btn-blue ml20" data-toggle="modal" data-target="#TipsRules">
<?php echo lang('tips_action_read_rules');?>
</button></span>
</h4></p>
<div class="divider-4"></div>
<?php if ( $tips_open ) { ?>
<?php echo form_open($this->uri->uri_string(), 'id="form" class="form-horizontal"'); ?>
<?php if (isset($current_user->id)) : ?>
<input id="created_by" type="hidden" name="created_by" maxlength="30" value="<?php echo $current_user->id; ?>" />
<?php endif; ?>
<input id="created_on" type="hidden" name="created_on" value="<?php echo date('Y-m-d H:i:s'); ?>" />
<!-- Start Row -->
<div class="row">
<div class="col-sm-4">
<div class="form-group<?php echo form_error('sport_id') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_select_sport') . lang('bf_form_label_required'), 'sport_id', array('class' => 'control-label')); ?>
<select name="sport_id" id="sport_id" class="form-control">
<option value=""><?php echo lang('tips_select_sport');?></option>
<?php foreach ($sports->result() as $row) {
$sel = ($row->id==set_value('sport_id'))?'selected="selected"':'';
?>
<option value="<?php echo $row->id;?>" <?php echo $sel;?>><?php echo $row->name;?></option>
<?php }?>
</select>
<span class='help-block'><?php echo form_error('sport_id'); ?></span>
</div>
</div>
<div class="league">
<div class="col-sm-4">
<div class="form-group<?php echo form_error('league_id') ? ' has-error' : ''; ?>">
<label class="control-label"><?php echo lang('tips_select_league');?></label>
<select name="league_id" id="league_id" class="form-control">
<!-- Auto Populated -->
</select>
<?php echo form_error('league_id');?>
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Start Row -->
<div class="row">
<div class="match">
<div class="col-sm-8">
<div class="form-group<?php echo form_error('match_id') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_select_event') . lang('bf_form_label_required'), 'match_id', array('class' => 'control-label')); ?>
<select name="match_id" id="match_id" class="form-control">
<!-- Auto Populated -->
</select>
<?php echo form_error('match_id');?>
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Start Row -->
<div class="row">
<div class="bet_id">
<div class="col-sm-4">
<div class="form-group<?php echo form_error('bet_id') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_bet_category') . lang('bf_form_label_required'), 'bet_id', array('class' => 'control-label')); ?>
<select name="bet_id" id="bet_id" class="form-control">
<!-- Auto Populated -->
</select>
<?php echo form_error('bet_id');?>
</div>
</div>
</div>
<div class="choice_id">
<div class="col-sm-5">
<div class="form-group<?php echo form_error('choice_id') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_bet_type') . lang('bf_form_label_required'), 'choice_id', array('class' => 'control-label')); ?>
<select name="choice_id" id="choice_id" class="form-control">
<!-- Auto Populated -->
</select>
<?php echo form_error('choice_id');?>
</div>
</div>
</div>
<div class="stake">
<div class="col-sm-3">
<div class="form-group <?php echo form_error('stake') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_stake') . lang('bf_form_label_required'), 'stake', array('class' => 'control-label')); ?>
<?php $stakes = array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5','6'=>'6','7'=>'7','8'=>'8','9'=>'9','10'=>'10');?>
<select name="stake" id="stake" class="form-control">
<option value=""><?php echo lang('tips_select_stake');?></option>
<?php foreach ($stakes as $stake) {
$sel = ($stake==set_value('stake'))?'selected="selected"':'';
?>
<option value="<?php echo $stake;?>" <?php echo $sel;?>><?php echo $stake;?></option>
<?php }?>
</select>
<span class='help-block'><?php echo form_error('stake'); ?></span>
</div>
</div>
</div>
</div>
<!-- End Row -->
<input type="hidden" name="odds" id="odds" value="" />
<!-- Start Row -->
<div class="row">
<div class="col-sm-12">
<div class="form-group<?php echo form_error('description') ? ' has-error' : ''; ?>">
<?php echo form_label(lang('tips_description') . lang('bf_form_label_required'), 'description', array('class' => 'control-label')); ?>
<textarea class="textarea" name="description" id="description" placeholder="<?php echo lang('tips_min_words');?>" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
<span class='help-block'><?php echo form_error('description'); ?></span>
</div>
</div>
<!-- End Row -->
<div class="box-footer">
<input type='submit' name='save' class='btn btn-blue' value="<?php echo lang('tips_action_send'); ?>" />
</div>
<?php echo form_close(); ?>
<?php } else { ?>
<div class="alert alert-info">
<h4> Sorry!</h4>
Cannot bet now.
</div>
<?php } ?>
</div><!-- /.box-body -->
</div><!-- /.box -->
<div id="TipsRules" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p10">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center"><?php echo lang('tips_rules'); ?></h1>
</div>
<div class="modal-body" data-ng-controller="rulesCtrl">
<?php $rules = $this->settings_lib->item('tips.rules');
echo $rules
;?>
</div>
<div class="modal-footer bg-default">
</div>
</div>
</div>
</div><!--/modal-->
<script type="text/javascript">
// Define site_url variable for use in the js file
var site_url = "<?php echo site_url(); ?>";
// Define error messages for jquery validation
var description_forgot = '<?php echo lang('tips_desc_forgot');?>'
var description_req = '<?php echo lang('tips_min_words');?>'
</script>
I am developing Spring MVC AngularJS example. I've simply taken a code from link: https://github.com/sivaprasadreddy/sivalabs-blog-samples-code/tree/master/springmvc-angular-crud. I am able to login using siva#gmail.com/siva successfully, but when I'm accessing logout, user profile, setting etc, nothing is happening. Please guide what is missing here.
login.jsp:
<!DOCTYPE html>
<%#include file="taglib.jsp" %>
<html>
<head>
<title>Login</title>
<base href="${rootUrl}">
<%# include file="assets.jspf" %>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${param.error != null}">
<div class="alert alert-danger">
Invalid UserName and Password.
</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success">
You have been logged out.
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Login Form</h2>
<form:form id="loginForm" method="post" action="login" modelAttribute="user"
class="form-horizontal" role="form" cssStyle="width: 800px; margin: 0 auto;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="UserName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
New User? Register
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
register.jsp
<!DOCTYPE html>
<%#include file="taglib.jsp"%>
<html>
<head>
<title>Create User</title>
<script type="text/javascript">
$(document).ready(function() {
$("#registrationForm").submit(function( event ) {
var userName = $.trim($("#userName").val());
var password = $.trim($("#password").val());
var firstName = $.trim($("#firstName").val());
var email = $.trim($("#email").val());
if(userName == '' || password == '' || firstName == '' || email == ''){
alert("Please enter all mandatory fields");
event.preventDefault();
return false;
}
});
});
</script>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${ERROR != null }">
<div class="alert alert-danger">
<p>${ERROR}
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Registration Form</h2>
<form:form id="registrationForm" method="post" action="register"
modelAttribute="user" cssStyle="width: 800px; margin: 0 auto;"
class="form-horizontal" role="form">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="userName" name="userName"
class="form-control" placeholder="UserName" />
<form:errors path="userName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password"
class="form-control" placeholder="Password" />
<form:errors path="password" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email*</label>
<div class="col-sm-4">
<input type="text" id="email" name="email" class="form-control"
placeholder="Email" />
<form:errors path="email" />
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">FirstName*</label>
<div class="col-sm-4">
<input type="text" id="firstName" name="firstName"
class="form-control" placeholder="FirstName" />
<form:errors path="firstName" />
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-4">
<input type="text" id="lastName" name="lastName"
class="form-control" placeholder="LastName" />
<form:errors path="lastName" />
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">Date Of
Birth</label>
<div class="col-sm-4">
<input type="text" id="dob" name="dob" class="form-control"
placeholder="dd-MM-yyyy" />
<form:errors path="dob" cssClass="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
Already Registered? Login
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
welcome.jsp:
<!DOCTYPE html>
<%# include file="taglib.jsp" %>
<html lang="en" ng-app="usersApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring MVC Angular Tutorials : Forum</title>
<%# include file="assets.jspf"%>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${rootUrl}home">My DashBoard</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> My Account </a>
<ul class="dropdown-menu dropdown-user">
<li><a href="${rootUrl}myAccount"><i
class="fa fa-user fa-fw"></i> User Profile</a></li>
<li><a href="${rootUrl}changePwd"><i
class="fa fa-gear fa-fw"></i> Settings</a></li>
<li class="divider"></li>
<li>Logout</li>
</ul> <!-- /.dropdown-user --></li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="list-group">
<span class="list-group-item active">Personal Data</span> PhoneBook Events <span
class="list-group-item active">Settings</span> <a href="#"
class="list-group-item">Configuration</a>
</div>
</div>
<div class="col-md-9 " ng-controller="UserCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="20px;">Id</th>
<th width="100px;">FirstName</th>
<th width="100px;">LastName</th>
<th width="150px;">Email</th>
<th width="100px;">Edit / Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList">
<td>{{user.id}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td><span style="cursor: pointer;"
class="glyphicon glyphicon-pencil"
ng-click="handleEditUser(user)"></span> <span
style="cursor: pointer;" class="glyphicon glyphicon-trash"
ng-click="handleDeleteUser(user)"></span></td>
</tr>
</tbody>
</table>
<div class="panel panel-default">
<div class="panel-heading">Edit User</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputId"
placeholder="Id" ng-model="editUser.id">
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-2 control-label">FirstName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFirstName"
placeholder="FirstName" ng-model="editUser.firstName">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLastName"
placeholder="LastName" ng-model="editUser.lastName">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail"
placeholder="Email" ng-model="editUser.email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"
ng-click="handleUpdateUser(editUser)">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ContactController.java
#RestController
#RequestMapping("/users/{userId}/contacts/")
public class ContactController{
#Autowired
private UserService userService;
#RequestMapping(value="", method=RequestMethod.GET)
public List<Contact> findAll(#PathVariable("userId") int userId) {
return userService.findUserContacts(userId);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.GET)
public Contact findContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
return userService.findUserContact(userId, contactId);
}
#RequestMapping(value="", method=RequestMethod.POST)
public Contact createContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="", method=RequestMethod.PUT)
public Contact updateContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.DELETE)
public void deleteContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
userService.deleteUserContact(userId, contactId);
}
}
UserController.java
#Controller
public class UserController {
#Autowired
private UserService userService;
#RequestMapping(value = "login", method = RequestMethod.GET)
public String loginForm(Model model){
model.addAttribute("user", new User());
return "login";
}
#RequestMapping(value = "/register", method = RequestMethod.GET)
public String registrationForm(Model model){
model.addAttribute("user", new User());
return "register";
}
#RequestMapping(value = "/register", method = RequestMethod.POST)
public String handleRegistration(#ModelAttribute("user") User user, BindingResult errors, Model model){
if (errors.hasErrors()) {
return "register";
}
try {
userService.createUser(user);
return "redirect:login";
} catch (Exception e) {
e.printStackTrace();
model.addAttribute("ERROR", e.getMessage());
return "register";
}
}
}
assets.jspf
<script type="text/javascript" src="${rootUrl}resources/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="${rootUrl}resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angularjs/angular.js"></script>
<script src="resources/angularjs/angular-resource.js"></script>
<script src="${rootUrl}resources/js/controllers.js"></script>
<script src="${rootUrl}resources/js/services.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/css/styles.css"/>
<script type="text/javascript" src="${rootUrl}resources/js/app.js"></script>
taglib.jsp:
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:url var="rootUrl" value="/"/>
Please let me know if You need any info.
Screen shots of UI:
If I call any tab it gives nothing why?
not seeing any handelar for /logout. Create a controller method to handle this request
#RequestMapping(value = "/logout", method = RequestMethod.GET/POST)
public String registrationForm(Model model){
//your logic
return "register";
//or return "redirect:/login"
}
I am currently making a registration form what I want is to have a modal what will appear whenever a user has successfully registered into the database how I am able to do this ?
this is my view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Register</title>
<?php echo link_tag('css/bootstrap.min.css'); ?>
<?php echo link_tag('jumbotron-narrow.css'); ?>
<?php echo link_tag('styles/menu.css'); ?>
<?php echo link_tag('styles/form.css'); ?>
</head>
<body class='bg'>
<div class='header'>
<img src = "<?php echo base_url() . '/images/tf_header.png' ?>"/>
</div>
<?php if (validation_errors()): ?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<?php echo validation_errors(); ?>
</div>
<?php endif; ?>
<div class ="container center-block">
<br>
<div class ="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Registration</h3>
</div>
<div class="panel-body">
<form class="form" action="<?php echo base_url() . 'user/addDelegate'; ?>" method="post" class="form-horizontal" role="form">
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Surname:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter Surname" name="surname" value="<?php echo set_value('surname'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter First Name" name="firstname"value="<?php echo set_value('firstname'); ?>" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Course:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter your Course" name="course" value="<?php echo set_value('course'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter email address" name="email" value="<?php echo set_value('email'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Register</button>
Back
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer">
<img src = "<?php echo base_url() . '/images/tf_footer.png' ?>"/>
</div>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
the controller:
public function addDelegate(){
$this->form_validation->set_rules('surname', 'surname', 'required');
$this->form_validation->set_rules('firstname', 'firstname', 'required');
$this->form_validation->set_rules('age', 'Age', 'required|is_numeric');
$this->form_validation->set_rules('course', 'Course', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
if ($this->form_validation->run() == TRUE) {
$reg_dat = array(
'surname' => $this->input->post('surname'),
'name' => $this->input->post('firstname'),
'age' => $this->input->post('age'),
'course' => ($this->input->post('course')),
'email' => ($this->input->post('email')),
);
$this->load->view('user/home_view');
$this->user_model->add_user($reg_dat);
$this->load->view('user/individual_register');
} else {
$this->load->view('user/individual_register');
}
}
Try this code
model
class User_Model extends CI_Model
{
public function __construct()
{
$this->load->database();
}
public function add_user($data)
{
if($this->db->insert('tablename', $data))
{
return TRUE;
}else
{
return FALSE;
}
}
}
controller
public function addDelegate(){
$this->form_validation->set_rules('surname', 'surname', 'required');
$this->form_validation->set_rules('firstname', 'firstname', 'required');
$this->form_validation->set_rules('age', 'Age', 'required|is_numeric');
$this->form_validation->set_rules('course', 'Course', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
if ($this->form_validation->run() === FALSE) {
$this->load->view('');
}else
{
$reg_dat = array(
'surname' => $this->input->post('surname'),
'name' => $this->input->post('firstname'),
'age' => $this->input->post('age'),
'course' => ($this->input->post('course')),
'email' => ($this->input->post('email')),
);
//call method from model
if($this->user_model->add_user($reg_dat) === TRUE)
{
$data['message'] = 'Insert success';
//load your view page
$this->load->view('user/home_view',$data);
}else
{
$data['message'] = 'insert failled';
// load your view page
$this->load->view('user/home_view',$data);
}
} else {
// load your register page
$this->load->view('user/individual_register');
}
}
view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Register</title>
<?php echo link_tag('css/bootstrap.min.css'); ?>
<?php echo link_tag('jumbotron-narrow.css'); ?>
<?php echo link_tag('styles/menu.css'); ?>
<?php echo link_tag('styles/form.css'); ?>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<body class='bg'>
<div class='header'>
<img src = "<?php echo base_url() . '/images/tf_header.png' ?>"/>
</div>
<?php if (validation_errors()): ?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<?php echo validation_errors(); ?>
</div>
<?php endif; ?>
<div class ="container center-block">
<br>
<div class ="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Registration</h3>
</div>
<div class="panel-body">
<?php echo form_open(base_url('user/addDelegate'),['name' => 'addform', 'id' => 'addform', 'class' => 'form-horizontal', 'role' => 'form']) ?>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Surname:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter Surname" name="surname" value="<?php echo set_value('surname'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter First Name" name="firstname"value="<?php echo set_value('firstname'); ?>" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Course:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter your Course" name="course" value="<?php echo set_value('course'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter email address" name="email" value="<?php echo set_value('email'); ?>">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Register</button>
Back
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer">
<img src = "<?php echo base_url('images/tf_footer.png')?>"/>
</div>
</body>
</html>
I have a dropdown that is populated by my database so what I want is if a user wants to add another item but cant find the category in the dropdown he would select "other" from the list and then will create a new category for that particular item
view
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Add Item</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="shortcut icon" href="assets/ICON.PNG">
<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-10">
<br>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">
<?php echo form_open_multipart('add_products/do_upload'); ?>
<center> <?php if (validation_errors()): ?>
<div class="alert alert-danger alert-dismissible" role="alert" style="width: 700px;">
<?php echo validation_errors(); ?>
</div>
<?php endif ?>
<div class="form-group">
<label class="col-sm-2 control-label" style=" color: white"></label>
<label class="col-sm-2 control-label">Product Image</label>
<div class="col-sm-5">
<input type="file" class="form-control" placeholder="" name="userfile">
</div>
</div>
<br> <br>
<br>
<div class="form-group">
<label class="col-sm-2 control-label" style=" color: white"></label>
<label class="col-sm-2 control-label">Product Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="ex. coffee"
name="name"
value="<?php echo set_value('name'); ?>">
</div>
</div>
<br> <br>
<div class="form-group">
<label class="col-sm-2 control-label" style=" color: white"></label>
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="ex. brewed drink from roasted coffee"
name="description"
value="<?php echo set_value('description'); ?>">
</div>
</div>
<br> <br>
<div class="form-group">
<label class="col-sm-2 control-label" style=" color: white"></label>
<label class="col-sm-2 control-label">Price</label>
<div class="col-sm-5">
<input type="number" class="form-control" placeholder="ex. P180"
name="price"
value="<?php echo set_value('price'); ?>">
</div>
</div>
<br> <br>
<div class="form-group">
<label class="col-sm-2 control-label" style=" color: white"></label>
<label class="col-sm-2 control-label">Category</label>
<div class="col-sm-5">
<select class="form-control" name="prod_category">
<?php
foreach($category as $row)
{
echo '<option value="'.$row->category.'">'.$row->category.'</option>';
}
?>
<option>Other</option>
</select></div>
</div>
<br> <br>
<button style="margin-left: 75px; width: 320px;" type="submit" class="btn btn-success">Submit</button>
</form>
<?php echo form_close() ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
controller"
function index()
{
$this->load->helper(array('form'));
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['username'] = $session_data['username'];
$data['category'] = $this->User->get_category();
$this->load->view('add_products',$data);
}
model:
public function get_category(){
$p = $this->db->query("select category from product_category");
$p1 = $p->result();
return $p1;
}
You can use change() in jquery for adding a textarea to your UI
$("#category").on("change",function() {
var selectedcat = $(this).val();
if(selectedcat == -1)
{
$("#newcategory").show();
}
});
Just refer the Filddle below
https://jsfiddle.net/5ueco3s9/
html for your select box :-
<select class="form-control select" name="prod_category">
<?php
foreach($category as $row)
{
echo '<option value="'.$row->category.'">'.$row->category.'</option>';
}
?>
<option value="lllvnjs">Other</option>
</select>
<div class="append"></div>
then jquery's change for your select box(Dont forget to add jquery before this in your markup )
$("select").change(function(){
if($(this).val() == "lllvnjs")
{
$(".append").append('<input type="text" value="" name="other_category" />');
}
});
In last when submits your form check this condition in your controller
$category = $_POST["prod_category"];
if($category == "lllvnjs")
{
$category = $_POST["other_category"];
}
And insert this in your database Or whatever you want to do with this just do :)