Jquery 一页中有多个表单，数据应存储在不同的表中
我在laravel项目中工作，遇到了一个需求 我得开一张发票 在我们可以选择客户（列表将从数据库中提取）和项目（列表将从数据库中提取）的地方，我们还必须输入一些其他详细信息，如发票号。在同一页面中，我们应该能够输入多行项目名称、描述、数量、价格、总额和货币 稍后，我们需要提取所有这些行数据，并根据添加的行数计算总量 下面是我的代码 发票/创建：Jquery 一页中有多个表单，数据应存储在不同的表中,jquery,ajax,laravel-5,Jquery,Ajax,Laravel 5,我在laravel项目中工作，遇到了一个需求 我得开一张发票 在我们可以选择客户（列表将从数据库中提取）和项目（列表将从数据库中提取）的地方，我们还必须输入一些其他详细信息，如发票号。在同一页面中，我们应该能够输入多行项目名称、描述、数量、价格、总额和货币 稍后，我们需要提取所有这些行数据，并根据添加的行数计算总量 下面是我的代码 发票/创建： <div class="container"> {!! Form::open(['method'=>'POST', '
<div class="container">
{!! Form::open(['method'=>'POST', 'action'=> 'invoiceController@store']) !!}
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
{{ csrf_token() }}
<div class="row">
<div class="page-header">
<h1 class="title">Create invoice</h1>
</div>
<div class="col-xs-12 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Invoice details*
</div>
<div class="panel-body">
<div class="form-group">
{!! Form::label('client', 'Select client:') !!}
{!!Form::select('client', [''=>'Choose options']+$client_list,null , array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('project', 'Select project:') !!}
{!!Form::select('project', [''=>'Choose options']+$project_list,null , array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('Idate', 'Invoice date:') !!}
{!! Form::date('Idate',\Carbon\Carbon::now(), null, array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('password', 'PDF password(optional):') !!}
{!! Form::password('password', null, array('class'=>'form-control','required' => 'required'))!!}
</div>
</div>
<div class="panel-heading">
Invoice details*
</div>
<div class="panel-body">
<div class="form-group">
{!! Form::label('invoice_no', 'Draft invoice No:') !!}
{!! Form::number('invoice_no', null, array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('p_no', 'PDF no:') !!}
{!! Form::text('p_no', null, array('class'=>'form-control','required' => 'required'))!!}
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
{{-- <div class="panel panel-default">
<div class="panel-heading">
Tax details*
</div>
<div class="panel-body">
<div class="form-group">
{!! Form::label('amount', 'Amount') !!}
{!! Form::number('amount', null, array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('currency', 'Currency:') !!}
{!! Form::Select('currency', ['$' => '$', 'inr' => 'inr'], array('class'=>'form-control','required' => 'required'))!!}
</div>
<div class="form-group">
{!! Form::label('tax_id', 'Tax Rate:') !!}
{{-- {!! Form::Select('tax_id[]', ['NY (4.00%)' => 'NY (4/.00%)', 'VA (5.00%)' => 'VA (5.00%)', 'PA (6.00%)' => 'PA (6.00%)', 'NV (6.85%)' => 'NV (6.85%)', 'NJ (7.00%)' => 'NJ (7.00%)', 'CA (8.25%)' => 'CA (8.25%)'],null, array('class'=>'form-control','multiple' => true,'data-placeholder' => 'Click here to choose')!!} --}}
{{-- {{ Form::select('tax_id[]',['NY (4.00%)' => 'NY (4/.00%)', 'VA (5.00%)' => 'VA (5.00%)', 'PA (6.00%)' => 'PA (6.00%)', 'NV (6.85%)' => 'NV (6.85%)', 'NJ (7.00%)' => 'NJ (7.00%)', 'CA (8.25%)' => 'CA (8.25%)'],null,array('multiple'=>true,'class'=>'form-control','required' => 'required')) }}
</div>
</div> --}}
<div class="panel-body">
<div align="right" style="margin-bottom:5px;">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
</div>
<form method="post" id="user_form">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="user_data">
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th>Currency</th>
<th colspan="2">Action</th>
</tr>
</table>
</div>
{{-- <div align="center">
<input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
</div> --}}
</form>
<div style="background-color:black;color:white;opacity: 0.8" class="align-items-center" id="user_dialog" title="Add Data">
<div class="container ">
<div class="col-xs-6" id="formData">
<div class="form-group">
<label>Item:</label>
<input type="text" name="item_name" id="item_name" class="form-control" required/>
<span id="error_item_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" name="description" id="description" class="form-control" required/>
<span id="error_description" class="text-danger"></span>
</div>
<div class="form-group">
<label>Quantity:</label>
<input type="number" name="quantity" id="quantity" class="form-control" required/>
<span id="error_quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label>Price:</label>
<input type="number" name="price" id="price" class="form-control" required/>
<span id="error_price" class="text-danger"></span>
</div>
<div class="form-group">
<label>Total:</label>
<input type="number" name="total" id="total" class="form-control" required/>
<span id="error_total" class="text-danger"></span>
</div>
<div class="form-group">
<label>Currency:</label>
<input type="text" name="Currency_item" id="Currency_item" class="form-control" required/>
<span id="error_currency" class="text-danger"></span>
</div>
<div class="form-group" align="center">
<input type="hidden" name="row_id" id="hidden_row_id" />
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
</div>
</div>
</div>
<div id="action_alert" title="Action">
</div>
</div>
</div>
</div>
<div class="form-group">
{!! Form::submit('Create invoice', ['class'=>'btn btn-default btn-block submit_btn']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
$(document).ready(function(){
var count = 0;
$('#user_dialog').dialog({
autoOpen:false,
width:600,
height:'auto',
modal: true,
resizable: true,
});
$( "#user_dialog" ).dialog({
show: { effect: "blind", duration: 800 },
classes: {
"ui-dialog": "highlight"
}
});
$('#add').click(function(){
$('#user_dialog').dialog('option','title','Add Data');
$('#item_name').val('');
$('#description').val('');
$('#quantity').val('');
$('#price').val('');
$('#total').val('');
$('#Currency_item').val('');
$('#error_item_name').text('');
$('#error_description').text('');
$('#error_quantity').text('');
$('#error_price').text('');
$('#error_total').text('');
$('#error_currency').text('');
$('#item_name').css('border-color','');
$('#description').css('border-color','');
$('#quantity').css('border-color','');
$('#price').css('border-color','');
$('#total').css('border-color','');
$('#Currency_item').css('border-color','');
$('#save').text('Save');
$('#user_dialog').dialog('open');
$('#save').click(function(){
var item_name = '';
var description = '';
var quantity = '';
var price = '';
var total = '';
var Currency_item = '';
var error_item_name = '';
var error_description = '';
var error_quantity = '';
var error_price = '';
var error_total = '';
var error_currency = '';
if($('#item_name').val() == '')
{
error_item_name = 'Please specify item / task';
$('#error_item_name').text(error_item_name);
$('#item_name').css('border-color', '#cc0000');
item_name = '';
}
else
{
error_item_name = '';
$('#error_item_name').text(error_item_name);
$('#item_name').css('border-color', '');
item_name = $('#item_name').val();
}
if($('#description').val() == '')
{
error_description = 'Please provide description';
$('#error_description').text(error_description);
$('#description').css('border-color', '#cc0000');
description = '';
}
else
{
error_description = '';
$('#error_description').text(error_description);
$('#description').css('border-color', '');
description = $('#description').val();
}
if($('#quantity').val() == '')
{
error_quantity = 'Please enter quantity ';
$('#error_quantity').text(error_quantity);
$('#quantity').css('border-color', '#cc0000');
quantity = '';
}
else
{
error_quantity = '';
$('#error_quantity').text(error_quantity);
$('#quantity').css('border-color', '');
quantity = $('#quantity').val();
}
if($('#price').val() == '')
{
error_price = 'Please enter amount';
$('#error_price').text(error_price);
$('#price').css('border-color', '#cc0000');
price = '';
}
else
{
error_price = '';
$('#error_price').text(error_price);
$('#price').css('border-color', '');
price = $('#price').val();
}
if($('#total').val() == '')
{
error_total = 'Total Amount';
$('#error_total').text(error_total);
$('#total').css('border-color', '#cc0000');
total = '';
}
else
{
error_total = '';
$('#error_total').text(error_total);
$('#total').css('border-color', '');
total = $('#total').val();
}
if($('#Currency_item').val() == '')
{
error_currency = 'Currency is required';
$('#error_currency').text(error_currency);
$('#Currency_item').css('border-color', '#cc0000');
Currency_item = '';
}
else
{
error_total = '';
$('#error_currency').text(error_currency);
$('#Currency_item').css('border-color', '');
Currency_item = $('#Currency_item').val();
}
if(error_item_name != '' || error_description != '' || error_price != '' || error_quantity != '' || error_total != '' || error_currency != '')
{
return false;
}
else
{
if($('#save').text() == 'Save')
{
count = count + 1;
output = '<tr id="row_'+count+'">';
output += '<td>'+item_name+' <input type="hidden" name="hidden_item_name[]" id="item_name'+count+'" class="item_name" value="'+item_name+'" /></td>';
output += '<td>'+description+' <input type="hidden" name="hidden_description[]" id="description'+count+'" value="'+description+'" /></td>';
output += '<td>'+quantity+' <input type="hidden" name="hidden_quantity[]" id="quantity'+count+'" value="'+quantity+'" /></td>';
output += '<td>'+price+' <input type="hidden" name="hidden_price[]" id="price'+count+'" value="'+price+'" /></td>';
output += '<td>'+total+' <input type="hidden" name="hidden_total[]" id="total'+count+'" value="'+total+'" /></td>';
output += '<td>'+Currency_item+' <input type="hidden" name="hidden_Currency_item[]" id="Currency_item'+count+'" value="'+Currency_item+'" /></td>';
output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';
output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
output += '</tr>';
$('#user_data').append(output);
console.log(output);
}
else
{
var row_id = $('#hidden_row_id').val();
output = '<td>'+item_name+' <input type="hidden" name="hidden_item_name[]" id="item_name'+row_id+'" class="item_name" value="'+item_name+'" /></td>';
output = '<td>'+description+' <input type="hidden" name="hidden_description[]" id="description'+row_id+'" value="'+description+'" /></td>';
output = '<td>'+quantity+' <input type="hidden" name="hidden_quantity[]" id="quantity'+row_id+'" value="'+quantity+'" /></td>';
output = '<td>'+price+' <input type="hidden" name="hidden_price[]" id="price'+row_id+'" value="'+price+'" /></td>';
output = '<td>'+total+' <input type="hidden" name="hidden_total[]" id="total'+row_id+'" value="'+total+'" /></td>';
output = '<td>'+Currency_item+' <input type="hidden" name="hidden_Currency_item[]" id="Currency_item'+row_id+'" value="'+Currency_item+'" /></td>';
$('#row_'+row_id+'').html(output);
}
$('#user_dialog').dialog('close');
}
});
$(document).on('click', '.view_details', function(){
var row_id = $(this).attr("id");
var item_name = $('#item_name'+row_id+'').val();
var description = $('#description'+row_id+'').val();
var quantity = $('#quantity'+row_id+'').val();
var price = $('#price'+row_id+'').val();
var total = $('#total'+row_id+'').val();
var Currency = $('#Currency'+row_id+'').val();
$('#item_name').val(first_name);
$('#description').val(last_name);
$('#quantity').val(quantity);
$('#price').val(price);
$('#total').val(total);
$('#Currency').val(Currency);
$('#save').text('Edit');
$('#hidden_row_id').val(row_id);
$('#user_dialog').dialog('option', 'title', 'Edit Data');
$('#user_dialog').dialog('open');
});
$(document).on('click', '.remove_details', function(){
var row_id = $(this).attr("id");
if(confirm("Are you sure you want to remove this row data?"))
{
$('#row_'+row_id+'').remove();
}
else
{
return false;
}
});
$('#action_alert').dialog({
autoOpen:false
});
$('#submit_btn').on('submit', function(event){
event.preventDefault();
var count_data = 0;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$('#formData input').each(function(){
count_data = count_data + 1;
});
if(count_data > 0)
{
var form_data = $('#formData input').serialize();
console.log(form_data);
$.ajax({
url:"create",
method:"POST",
data:$('#formData input').serialize(),
success:function(data)
{
$('#user_data').find("tr:gt(0)").remove();
$('#action_alert').html('<p>Data Inserted Successfully</p>');
$('#action_alert').dialog('open');
}
})
}
else
{
$('#action_alert').html('<p>Please Add atleast one data</p>');
$('#action_alert').dialog('open');
}
});
});
});
public function store(Request $request)
{
$clients = Client::all(['id', 'name']);
$client_list = array();
foreach ($clients as $client) {
$client_list[$client->id] = $client->name;
}
$projects = Project::all(['id', 'p_name']);
$project_list = array();
foreach ($projects as $project) {
$project_list[$project->id] = $project->p_name;
}
$validator = Validator::make($request->all(), [
'client' => 'required|string|max:255',
'project' => 'required|string|max:255',
'Idate' => 'required',
'invoice_no' => 'required',
'p_no' => 'required',
'amount' => 'required',
'currency' => 'required',
'tax_id' => 'required',
]);
// if ($validator->fails()) {
// return redirect('post/create')->withErrors($validator)>withInput();
// }
$invoices_row = new invoices_row;
$invoices_row->item_name = $request['item_name'];
$invoices_row->description = $request['description'];
$invoices_row->quantity = $request['quantity'];
$invoices_row->price = $request['price'];
$invoices_row->total = $request['total'];
$invoices_row->currency = $request['currency'];
$invoices_row->save();
$invoices = new Invoice;
$client_name = $request['client'];
$invoices->client = $client_list[$client_name];
$project_name = $request['project'];
$invoices->project = $project_list[$project_name];
$invoices->Idate = $request['Idate'];
$invoices->password = $request['password'];
$invoices->invoice_no = $request['invoice_no'];
$invoices->p_no = $request['p_no'];
$invoices->amount = $request['amount'];
$invoices->currency = $request['currency'];
$invoices->tax_id = $request['tax_id'];
$invoices->save();
return redirect('/invoices');
}