saving data without reloading a page - php

Question

I have a simple form in which a user can fill the form and can add multiple input fields as he/she wishes,
Here is HTML
<form id="paramsForms">
{{csrf_field()}}
<div class="modal-body">
<dvi class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-12 animated bounceInDown myForm" id="multiple-container">
<div class="card-header">
<h4>Bidders Information</h4>
</div>
<div class="card-body" id="add_info">
<div id="dynamic_container">
<small id="bidder">Bidder 1</small>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="Bidders Name" name="bidders_name[]" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="atribute name" name="params_name[]" id="field1" class="form-control"/>
<input type="number" placeholder="atribute value" name="params_value[]" id="field2" class="form-control"/>
<a class="btn btn-secondary btn-sm moreinput_field" id="add_more_input">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
</div>
<div class="card-footer" id="card-footer">
<a class="btn btn-success btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
<!-- <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button> -->
</div>
</div>
</div>
</dvi>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
Here is js to save the form
$("#paramsForms").on('submit', function(e){
e.preventDefault();
$.ajax({
type:"POST",
url: "/parameters",
data: $("#paramsForms").serialize(),
success: function(response){
console.log(response)
alert('data saved');
},
error: function(error){
console.log(error)
alert('Data not saved');
}
})
})
Here is controller store function
public function store(Request $request)
{
$parameters = new Parameter;
$parameters->params_name = $request->input('params_name');
$parameters->params_value = $request->input('params_name');
$parameters->bidders_name = $request->input('bidders_name');
// dd($parameters);
$parameters->save();
}
The dd($parameters) in-store function gives the following.
So when I remove dd($parameters) and click submit button I get the following error on console (network).
message: "Argument 1 passed to Illuminate\Database\Grammar::parameterize() must be of the type array, string given, called in C:\xampp\htdocs\roayalad-blog\vendor\laravel\framework\src\Illuminate\Database\Query\Grammars\Grammar.php on line 869
What is wrong with my codes?

Answer 1

The issue is that you are sending params_name and params_name as an array but controller as handling as strings. Make this change in controller:
public function store(Request $request)
{
$parameters = new Parameter;
$record_count = count($request->input('params_name'));
for($i=0; $i<$record_count; $i++) {
$parameters->params_name = $request->input('params_name')[$i];
$parameters->params_value = $request->input('params_name')[$i];
$parameters->bidders_name = $request->input('bidders_name')[$i];
$parameters->save();
}
}
Above code will execute one query each record. You can also do bulk insertion. This is the link.

Answer 2

Try just
$request->params_name[$i]
Instead of
$request->input(“params_name”)[$i]