I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});
Related
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
I have branch index page it contains 2 drop-down menu called company and dealership when i click on company it contains a company i created when click on a company the corresponding dealership should list in the dealership dropdown. i used eloqent straightly into index page i did that because the i can't access the company and dealership in the index page
Index
#include('theme.header')
<?php use Illuminate\Support\Facades\DB;?>
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
</div>
<h4 class="page-title">Branch Management</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title">Branch</h4>
<br>
<br>
<form id="form" method="post" action="{{route('branch.store')}}">
{{csrf_field()}}
<div class="form-group row">
<label class="col-sm-2 col-form-label">Company</label>
<div class="col-sm-10">
<select class="form-control" id="company" name="company">
<option>Select Company</option>
#foreach(\App\Company::all()->where('status','0') as $company)
<option value="{{$company->comp_id}}">{{$company->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Dealership</label>
<div class="col-sm-10">
<select class="form-control" id="dealer" name=" dealer">
<option>Select Dealership</option>
#foreach(\App\Dealership::join('companies','comp_id','=','dealerships.comp_id')->where('status','0') as $dealership)
<option value="{{$dealership->dlr_id}}">{{$dealership->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="branch" name="branch" required>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<button class="btn btn-primary" id="btn_save" data-toggle="modal"
data-target="#create" type="submit">Save
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
#include('theme.footer')
First thing first. You need to change queries.
Company::where(‘status’, 0)->get();
And next you missed the tailing get() in the next dropdown.
And why are you not using relationships to query?
Like Muhammad Naumann already said you have to use the get() method to get the actual data:
Company::where(‘status’, 0)->get();
On the company select field you could add an event listener like onChange. In this listener you run a ajax get request to fetch the dealerships for the selected company.
I figured it out with Ajax.
Create a custom function in controller file. In this case Branch controller, this function contains query builder to retrieve the data
Write Ajax, in the index file, the dealership dropdown is hidden default when you select the company the dropdown will show corresponding data.
Index File
#include('theme.header')
<?php use Illuminate\Support\Facades\DB;?>
<script language="javascript">
/*--- Fliter dealership corressponging company---*/
$(document).ready(function () {
$('#dealership_div').hide();
$('#company').change(function () {
alert('hello');
$('#dealership_div').show();
let id = this.value;
$.ajax({
url: '/filter_dealer',
type: "post",
data: {option: id},
success: function (data) {
$('#dealer')
.find('option')
.remove()
.end()
.append(" <option value=''>--- Select dealership ---</option>")
$.each(data, function (key, value) {
$('#dealer')
.append($("<option></option>")
.attr('value', value['dlr_id'])
.text(value['name'])
);
});
},
error: function () {
alert("Error occurred While Processing");
}
});
});
});
</script>
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
</div>
<h4 class="page-title">Branch Management</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title">Branch</h4>
<br>
<br>
<form id="form" method="post" action="{{route('branch.store')}}">
{{csrf_field()}}
<div class="form-group row">
<label class="col-sm-2 col-form-label">Company</label>
<div class="col-sm-10">
<select class="form-control" id="company" name="company">
<option>Select Company</option>
#foreach(\App\Company::all()->where('status','0') as $company)
<option value="{{$company->comp_id}}">{{$company->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row" id="dealership_div">
<label class="col-sm-2 col-form-label">Dealership</label>
<div class="col-sm-10">
<select class="form-control" id="dealer" name=" dealer">
<option></option>
</select>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="branch" name="branch" required>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<button class="btn btn-primary" id="btn_save" data-toggle="modal"
data-target="#create" type="submit">Save
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Branch Controller File With a custom function
public function filter_dealer(Request $request)
{
$company_id=$request->input('option');
$dealership=DB::table('dealerships')->select('dlr_id','name')->where([['comp_id','=',$company_id],['status','=','0']])->get();
return response()->json($dealership);
}
Route File
Route::post('filter_dealer', 'BranchController#filter_dealer')->name('filter_dealer');
If you want to dynamically change the contents of dealership dropdown, on the event of changing the company dropdown, you should use javascript, jquery or similar javascript framework, because PHP is a server side scripting language and require page refresh to change the contents of a web page.
I'm trying to upload a file with Laravel but it does not work
I will send the field with the meta name view
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1success">
<form method="post" name="type" action="songs">
{{ csrf_field() }}
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="Name">نام موزیک</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-music">
</i>
</div>
<input id="Name" name="title" type="text"
placeholder="نام موزیک" class="form-control input-md">
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">دسته
بندی</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-list">
</i>
</div>
<select id="Name" name="category" type="دسته بندی"
placeholder="دسته بندی" class="form-control input-md">
<option>fun</option>
<option>love</option>
<option>birth</option>
<option>wedding</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">توضیحات</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-file-text-o">
</i>
</div>
<textarea id="Name" name="text" placeholder="توضیحات"
class="form-control input-md"></textarea>
</div>
</div>
</div>
<br>
<div class="row">
<label class="col-md-3 control-label" for="Name (Full name)">انتخاب
فایل</label>
<div class="col-md-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-folder-o">
</i>
</div>
<input id="meta" name="meta" type="file" placeholder="انتخاب فایل"
class="form-control input-md">
</div>
</div>
</div>
<br>
<div class="row" style="text-align: center">
<div class="col-md-10 " style="text-align: center">
<button id="Name" name="submit" type="submit" placeholder="انتخاب فایل"
class="form-control input-md" style="text-align: center">اضافه
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Controller
public function create(Request $req, $type) {
$this->authorize('is_admin');
$req->file('meta')->store('app');
// $path = Storage::putFile('app', $req->file('meta'))
}
error
Symfony \ Component \ Debug \ Exception \ FatalThrowableError (E_ERROR)
Call to a member function store() on null
Here is an image of the error
Does anybody know what i should do about this?
Add enctype="multipart/form-data" to your <form> tag in your blade:
<form method="post" name="type" action="songs" enctype="multipart/form-data">
Based on your blade file you can see that the file meta being uploaded is not required, so in your controller, you need to check if the file was sent before calling the store method on it. Check this:
public function create(Request $req, $type) {
$this->authorize('is_admin');
$file = $req->file('meta') ? $req->file('meta')->store('app') : null;
}
master peace of codeigniter. im new user for this framework.
i have problem to show comment data by id_diskusi in the single post of diskusi. i try to show data using 'where' in the lybrary code but its still not show the data. i hope the people at there can help me & solved this problem.
i use library to get data from database
public function setuju(){
$data=$this->CI->db->query("SELECT komentar.id AS id,
komentar.diskusi_id AS id_diskusi,
komentar.pilih AS pilih,
komentar.nama AS nama,
komentar.email AS email,
komentar.pesan AS pesan,
komentar.tanggal AS tanggal,
diskusi.diskusi_id as nomor_diskusi
FROM diskusi, komentar
WHERE diskusi.diskusi_status='publish' AND komentar.pilih='1' AND komentar.diskusi_id=diskusi.diskusi_id ORDER BY komentar.id DESC
");
return $data->result_array();
}
i use this code to filter data who data on komentar will be show by id of diskusi.
komentar.diskusi_id=diskusi.diskusi_id
but still not work
and its my controller
$data['setuju']=$this->diskusi->setuju();
code in the view
<div id="netral" class="tab-pane">
<?php
foreach ($netral AS $value) {
echo "<div class='box box-body no-border'>
<div class='row'>
<div class='col-md-2'>
<div class='box-profile'>"; ?>
<img alt='user image' style='margin-top:10px' class='profile-user-img img-responsive img-circle' src='<?php echo img_user_url('user.png'); ?>'>
<?php echo"
<h3><center>$value[nama]</center</h3>
</div>
</div>
<div class='col-md-10'>
<div class='callout callout-danger lead'><span class='pull-right'>".format_tanggal($value['tanggal'])."</span><br>
<p>$value[pesan]</p>
</div>
</div>
</div>
</div>";
}?>
</div><!-- /.tab-pane -->
<div class="box box-danger">
<div class="box-header with-border">
<div class="user-block">
<h3 class="no-margin">Tinggalkan Komentar</h3>
</div><!-- /.user-block -->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-danger btn-sm"><i class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div>
<div class="box-body">
<form method='POST' id='komentar' action='<?php echo baseURL('form_visitors/komentar'); ?>' autocomplete='off' method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputName">Name</label>
<div class="col-sm-10">
<input type="hidden" name="diskusi_id" value="<?php echo "$diskusi[id]";?>">
<input type="text" placeholder="Nama" data-original-title="Masukkan Nama" required='required' name="nama" id="inputName" class="form-control">
<input type='hidden' class='form-control' name='url' value='<?php echo current_url() ?>' />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail">Email</label>
<div class="col-sm-10">
<input type="email" name="email" data-original-title="Masukkan Email" placeholder="Email" required='required' id="inputEmail" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="radio" name="pilih" value="1"> <i class="fa fa-thumbs-o-up margin-r-5 text-green"> <b>Setuju</b></i>
</label>
<label>
<input type="radio" name="pilih" value="2"> <i class="fa fa-square margin-r-5 text-yellow"> <b>Netral</b></i>
</label>
<label>
<input type="radio" name="pilih" value="3"> <i class="fa fa-thumbs-o-down margin-r-5 text-red"> <b>Tidak Setuju</b></i>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputExperience">Komentar</label>
<div class="col-sm-10">
<textarea placeholder="Komentar" name="pesan" id="inputExperience" required='required' class="form-control"></textarea>
</div>
</div>
<div class='form-group'>
<label class="col-sm-2 control-label" for="inputExperience"></label>
<div class="col-sm-10">
<div id='recaptcha1'></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-danger" type="submit" id="submit">Submit</button>
<div class="cssload" style="display: none; width: 100px">
<div class="cssload-tube-tunnel"></div>
</div>
</div>
</div>
</form>
</div>
</div>
how can i show comment data according with single post of diskusi who have comment. Thank you very much in advance! sorry for my english.
I can see you are fetching the data from two different tables but you have not used 'JOIN'.
you can try the following query string :
public function setuju(){
$data=$this->CI->db->query("SELECT komentar.id AS id,
komentar.diskusi_id AS id_diskusi,
komentar.pilih AS pilih,
komentar.nama AS nama,
komentar.email AS email,
komentar.pesan AS pesan,
komentar.tanggal AS tanggal,
diskusi.diskusi_id as nomor_diskusi
FROM komentar, diskusi
JOIN diskusi
ON diskusi.diskusi_id=komentar.diskusi_id
WHERE diskusi.diskusi_status='publish' AND komentar.pilih='1' ORDER BY komentar.id DESC
");
return $data->result_array();
}
I am trying to render an html view via ajax call and in success callback i will add this html to DOM.But i am not getting any response in the success callback.
public function create()
{
$format = new ProductFormat();
//return response()->view('cms.formats.create_modal', compact('format'));
return (String) view('cms.formats.create_modal', compact('format'));
}
$.ajax({
dataType: 'json',
method: 'GET',
type: 'html',
url: '{{ url("admin/formats/create") }}',
success: function (data) {
alert(data);
console.log(data);
$('#format_modal').html(data);
$('#add_edit_format_modal').modal('show');
}
}).error(function(e){
console.log(e);
});
error callback is getting the html response but why not in success call back?
my response is:
<div class="modal fade" id="add_edit_format_modal" tabIndex="-1">
<div class="modal-dialog">
<div class="modal-content"> <!--start modal content-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Product Format</h4>
</div>
<!--start modal body-->
<div class="modal-body">
<div class="form-horizontal" role="form" id="add_format">
<div class="form-group">
<label for="format_title_en" class="col-md-3 control-label">Title (en)</label
>
<div class="col-md-6">
<input id="format_title_en" value="" name="format_title_en" class="form-control"
type="text" required="required">
</div>
</div>
<div class="form-group">
<label for="format_title_fr" class="col-md-3 control-label">Title (fr)</label
>
<div class="col-md-6">
<input id="format_title_fr" value="" name="format_title_fr" class="form-control"
type="text">
</div>
</div>
<div class="form-group">
<label for="barcode" class="col-md-3 control-label">Barcode</label>
<div class="col-md-6">
<input id="barcode" value="" name="barcode" class="form-control" type="number"
>
</div>
</div>
<div class="form-group">
<label for="packaging_type" class="col-md-3 control-label">Packaging Type</label
>
<div class="col-md-6">
<select class="form-control" id="format_packaging_type" name="packaging_type"
>
<option value="">Other</option>
<option value="bottled">Bottled</option>
<option value="canned">Canned</option>
</select>
</div>
</div>
<div class="form-group">
<label for="amount_g" class="col-md-3 control-label">Size (g)</label>
<div class="col-md-6">
<input id="amount_g" value="" name="amount_g" class="form-control" type="number"
onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="amount_ml" class="col-md-3 control-label">Size (ml)</label>
<div class="col-md-6">
<input id="amount_ml" value="" name="amount_ml" class="form-control" type
="number" onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="size_indicated_amount" class="col-md-3 control-label">Size Indicated
Amount</label>
<div class="col-md-6">
<input id="size_indicated_amount" value="" name="size_indicated_amount" class
="form-control" type="number" onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="size_indicated_unit" class="col-md-3 control-label">Size Indicated
Unit</label>
<div class="col-md-6">
<input id="size_indicated_unit" value="" name="size_indicated_unit" class
="form-control" type="text">
</div>
</div>
<div class="form-group">
<label for="store_code" class="col-md-3 control-label">Store Code</label>
<div class="col-md-6">
<input id="store_code" value="" name="store_code" class="form-control" type
="number">
</div>
</div>
<div class="form-group">
<label for="price" class="col-md-3 control-label">Price</label>
<div class="col-md-6">
<input id="price" value="" name="price" class="form-control" type="number"
>
</div>
</div>
</div>
</div> <!--end modal body-->
<div class="modal-footer">
<button type="button" class="btn btn-success" id="save_product_format">
Save
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div> <!--end modal content-->
</div>
</div>