My form sends multiple forms of (name and image). However, the last element sends a name only with the wrong 'name.' Do I need to simultaneously make multiple inserts in the database to solve this problem?
Form View
Dump of the request with wrong last element of array
Script of repeat the form
<div class="row">
<div class="col-12">
<form class="form repeater-default" method="POST"
action="{{ route('admin.cat.doCreate2') }}"
enctype="multipart/form-data">
#csrf
<input type="hidden" name="admin_id"
value="{{ auth()->guard('admin')->user()->id }}">
<div data-repeater-list="group_a">
<div data-repeater-item>
<div class="row justify-content-between">
<div class="col-md-4 col-sm-12 form-group">
<label for="Name">Name </label>
<input type="text" class="form-control" name="name[]" required
placeholder="Enter Name of Category">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control" name="image[]">
</div>
{{-- Delete Button --}}
<div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
<button class="btn btn-danger" data-repeater-delete type="button"><i
class="mdi mdi-x"></i>
Delete
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i class="mdi mdi-plus"></i>
Add
</button>
</div>
<div class="col p-0">
<button class="btn btn-success" type="submit"><i class="mdi mdi-account"></i>
Done
</button>
</div>
</div>
</form>
</div>
</div>
Script
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableData tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
first solution : inputs and their labels must be on table tag and th tag and td tag
to send right data
second solution : dont use array for inputs names like name[ ] or image[ ] :
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control"
name="image">
</div>
and receive datas like this :
$data=$request->group_a
group_a is your data-repeater-list name :
<div data-repeater-list="group_a">
and now you can put $data in foreach and use data arrays for create ...insert and anything
Related
I am trying to copy full form on click add button,
copying only label name.
below JS code: below is js code trying to add form dynamically.
how to add same form below last div onclick '+' button.
using js code below, only adding panel, but it's not working.
document.getElementById('add').onclick = duplicate;
var i = 0;
var original = document.getElementById('add-form');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "add-form" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div class="row mt-4">
<div class="row">
<div class="col-md-3 text-center mt-3 ml-3">
<button type="button" class="btn btn-light" id="add"><i class="fas fa-plus fa-xs"></i></button>
</div>
<div class="col-md-3 text-center mt-3 ml-4">
<button type="button" class="btn btn-light" id="minus"><i class="ri-delete-bin-line mr-0"></i></button>
</div>
</div>
<div class="col-md mt-1" id="add-form" style="width: 100%;">
<button class="accordion btn btn-primary">Product screen</button>
<div class="panel">
<div class="col-sm-12">
<div class="card mt-3">
<div class="col-md-12">
<!-- first row -->
<div class="row" style="margin-top: 9px;">
<div class="col-sm">
<label for="fname">product_name
</label>
<input type="text" id="fname" class="form-control" placeholder="product_name">
</div>
<div class="col-sm">
<label for="fname">price
</label>
<input type="text" id="fname" class="form-control" placeholder="price">
</div>
<div class="col-sm">
<label for="fname">pur_id
</label>
<input type="text" id="fname" class="form-control" placeholder="pur_id">
</div>
<div class="col-sm">
<label for="field2">type
</label>
<select name="field2" id="field2" class="selectpicker form-control" data-style="py-0" width="50">
<option selected>select one</option>
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
after click add button displayed only this panel.
I need to display the JSON data which is inside the column extras_name individually inside a input boxes with the value filled on edit
Here's the blade file codes
<div class="card">
<h5 class="card-header">
Manage Extras
</h5>
<div class="card-body">
{{ $customProduct }}
<br><br><br>
<div class="optionBox">
<div class="block main">
<div class="form-row pb-2">
<div class="col">
<input type="text" class="form-control" name="extras_name[]" value="{{ $customProduct->name }}" placeholder="Name">
</div>
<div class="col">
<input type="text" class="form-control" name="extras_price[]" placeholder="Price">
</div>
<div class="col">
<button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<div class="block mt-2 ">
<button type="button" class="add btn btn-success">Add Extras</i></button>
</div>
</div>
</div>
</div>
</div>
Here's the Controller Edit function
public function edit($venue, CustomProduct $customProduct)
{
$data = [
'customProduct'=>$customProduct,
];
return view('manage.custom-products.edit')->with($data);
}
Here's how the data is saved in the database
If you want to show data in a table then you can use this code
<td>
#foreach(json_decode($value->extras_name, true) as $extras_name)
{{ $extras_name}}
#endforeach
</td>
first of all json_decode this
and then in foreach you can use that.
Blade File:
#if(!empty(json_decode($data->extras_name))) {{--JUST FOR CHEKING THAT IF THIS WAS NOT JSON OR THIS WAS NULL, THE ERROR NOT SHOWING--}}
#foreach(json_decode($data->extras_name as $title=>$value))
<label>
{{$title ?? ''}} : {{$value ?? ''}}
</label>
<br/>
#endforeach
#endif
it doesnt make sense to do that
instead you can show your values on list item below your input and when new value is added or removed refresh the list using ajax
How can i load the JSON array saved in the database to the edit form input field ?
Here's how my create form looks like
Here's the form Code
<div class="card">
<h5 class="card-header">
Manage Extras
</h5>
<div class="card-body">
<div class="optionBox">
<div class="block main">
<div class="form-row pb-2">
<div class="col">
<input type="text" class="form-control" name="extras_name[]" value="" placeholder="Name">
</div>
<div class="col">
<input type="text" class="form-control" name="extras_price[]" placeholder="Price">
</div>
<div class="col">
<button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<div class="block mt-2 ">
<button type="button" class="add btn btn-success">Add Extras</i></button>
</div>
</div>
</div>
</div>
</div>
Here's the Script to Add Extra input field and delete button
<script>
$('.add').click(function() {
$('.block:last').before('<div class="form-row pb-2"><div class="col"><input type="text" class="form-control" name="extras_name[]" placeholder="Name"></div><div class="col"><input type="text" class="form-control" name="extras_price[]" placeholder="Price"></div><div class="col"><button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button></div></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().parent().remove();
});
</script>
Here's how it saves in the database
Here's the edit function in the Controller
public function edit(CustomProduct $customProduct)
{
$data = [
'customProduct'=>$customProduct,
];
return view('manage.custom-products.edit')->with($data);
}
I was able to load the data into the form using a foreach as below
<div class="row">
<div class="col">
<strong>Names</strong>
#foreach ($customProduct['extras_name'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
<div class="col">
<strong>Prices</strong>
#foreach ($customProduct['extras_price'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
</div>
And here's how it was looking like
I just want to load the json data into the input fields on edit and should be able to remove a pacific input by clicking the delete icon,
How can i do make this happen, Please help me out
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>