Develop Reference

Javascript function works only on the first table row inside my foreach laravel loop

I am using a javascript functions to input a number and automatically display the result after calculation inside a boostrap modal.
If click the request button at the first row, javascript functions work well. But when I click on the request button on the second row and succeeding rows, it doesn't function.
I am not really sure if the problem is the data inside the modal or the data outside the modal
I tried to getElementsByClassName instead of ID but it still not working.
<script>
function mult(value) { // === calculate the profit and the total amount due === //
var x = value * 15 / 100;
var y = parseFloat(x)+parseInt(value);
document.getElementById("profit").value = x;
document.getElementById("total").value = y;
}
</script>
<table id="table1">
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>Requests</th>
</tr>
</thead>
<tbody>
#foreach($Clients as $Client)
<tr id="foreach-row">
<td>{{ $Client->full_name }}</td>
<td>
<div class="buttons">
<a class="btn icon btn-secondary" data-toggle="modal"
data-target="#LoanRequestModel-{{ $Client->id }}">
Request
</a>
</div>
</td>
</tr>
{{-- =========== MODEL - NEW REQUEST ===============--}}
<div class="modal" id="LoanRequestModel-{{ $Client->id }}" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>REQUEST</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<form action="{{ route('finance.storeRequest', $Client->id) }}" method="post"
class="loanrequest_form" enctype="multipart/form-data">
{{ csrf_field() }}
<label>Full name</label>
<div class="form-group">
<input type="text" name="creditor_full_name"
class="form-control" value="{{ $Client->full_name }}" >
</div>
<div>
<label>Amount</label>
<div class="form-group">
<input type="number" name="loan_amount"
class="form-control" onkeyup="mult(this.value);" >
</div>
</div>
<div class="row">
<div class="col-md-5">
<label>Interest Rate</label>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Choose</label>
<select class="form-select rate"name="interest_rate" >
<option value="15" selected>15%</option>
<option value="20">20%</option>
</select>
</div>
</div>
<div class="col-md-7">
<label>Profit</label>
<div class="input-group mb-3">
<input type="text" id="profit" class="form-control" name="profit"
aria-label="Amount">
</div>
</div>
</div>
<div class="row">
<label>Total Amount due</label>
<div class="input-group mb-3">
<input type="text" id="total" class="form-control" name="amount_due"
aria-label="Amount">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-secondary ml-1" >
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Submit</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
#endforeach
</tbody>
</table>

The problem - as others have said above - is that whilst you are making the ID of each modal unique using :
id="LoanRequestModel-{{ $Client->id }}"
within your loop, when generating each modal, you are using fields which have non-unique IDs :
type="text" id="profit"
type="text" id="total"
What you would be better off is making those IDs non-unique, in the same way that you did with the modal ID :
type="text" id="profit-{{ $Client->id }}"
type="text" id="total-{{ $Client->id }}"
and add IDs to the fields which you will need to use in your script that does not presently have one :
type="number" id="loan_amount-{{ $Client->id}}" name="loan_amount"
Then, when you trigger the javascript on keyup here :
onkeyup="mult(this.value);"
rather than pass the value of the field, pass the client ID :
onkeyup="mult({{ $Client->id);"
Then you just need to adjust your javascript (because it's no longer being passed the loan_amount) so that it first gets the loan_amount, then the other bits and pieces it needs, and finally returns them to the right place :
<script>
function mult(id) { // === this is now receiving the ID, not a value so first we need to get the value for the relevant field *emphasized text*== //
var value = document.getElementById("loan_amount-" + id).value
var x = value * 15 / 100;
var y = parseFloat(x)+parseInt(value);
document.getElementById("profit" + id).value = x;
document.getElementById("total" + id).value = y;
}
</script>

Dynamically creating table inside form with JS, will load blank page before I submit form to Laravel backend

I have this form inside a blade.php file, that contains a table. I am adding rows to this table dynamically by pressing on "Add" button, which adds the selected option (with a JS function). If I enter a "Name" in the first input tag, and then Add a selected option to the table, the page reloads and is blank without even giving me the chance to submit the form. What is going on?? Has anybody ever had a similar problem? Thanks for precious help!
<form method="POST" action="{{ url('/groups/create') }}">
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Add user</label>
<div class="col-md-6">
<select class="custom-select" id="chooseUserSelect" name="user_id">
<option value="0">Choose...</option>
#foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<button class="btn btn-outline-primary" id="addUserToGroupButton" disabled>Add</button>
</div>
</div>
<div class="form-group row">
<table class="table table-hover" id="usersInGroupTable">
<thead class="thead-light">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">Create group</button>
</div>
</div>
</form>
tbody tag is empty because I am creating rows with JS.

Got it, it was a simple error! The "Add" button was acting like a submit button, so the solution was simply to add type="button" and voilà! Kinda weird it was acting as a submit button without specifying the type...

Laravael PHP, JavaScript help needed

First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.

Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">

Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.

Add step="0.01"(for example 0.01) property to your price input.

If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules

Not able to take data from table and set to bootstrap modal

I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>

In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example

JQuery unable to post dynamically added form elements

I have read the previous posts on this, but I can't seem to resolve my issue. I have a form that has static and dynamically created input fields. The static fields are being posted without issue. However, none of the dynamically created :inputs are coming across in the post request.
The form :
<div id="userModal" class="modal fade" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary" style="float:right;margin-bottom:4px;">Delete User
</button>
<h4 class="modal-title">Edit User : <span id="user_webUserProfilePrimaryName"></span></h4>
</div>
<div class="modal-body">
<span id="user_maintain_messages" name="user_maintain_messages"></span>
<form id="editUserForm" name="editUserForm">
<input type="hidden" name="user_maintain_action" id="user_maintain_action" value="update">
<input type="hidden" name="action" id="action" value="sc_admin_updateCustomerFundInfo">
<input type="hidden" name="version" id="version" value="1.1" ;
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_webUserLevel">User Level</label>
</div>
<div class="col-md-6">
<select class="form-control" id="user_webUserLevel" name="user_webUserLevel">
<option value="anonymous">Pending</option>
<option value="customer">Customer</option>
<option value="administrator">Admin</option>
<option value="superuser">Super</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_webUserProfileStatus">User Status</label>
</div>
<div class="col-md-6">
<select class="form-control" name="user_webUserProfileStatus"
name="user_webUserProfileStatus">
<option value="InReview">In Review</option>
<option value="Approved">Approved</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_verified">User Verified</label>
</div>
<div class="col-md-6">
<select class="form-control" id="user_verified" name="user_verified">
<option value="N">Not Verified</option>
<option value="Y">Verified</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="webUserName">Send Login Confirmation</label>
</div>
<div class="col-md-6">
<span id="user_sendConfirmButton"></span>
</div>
</div>
</div>
<div class="row">
<table class="table" id="user_fundTable">
<thead>
<tr>
<th>Fund(s)</th>
<th>Account #</th>
<th>Administrator</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" style="background:grey;float:left" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" onclick="saveUserMaintain()">Update (confirm changes)
</button>
</div>
</div>
</div>
</div>
It is populated with the following data :
{"Result":"OK","Records":[{"webUserProfilePrimaryName":"Johnny Appleseed","verified":"N","webUserProfileId":"24","webUserLevel":"anonymous","webUserProfileStatus":"InReview","webUserProfileReferenceAccount":"19, 30, 3126, 0090","fund":[{"fundName":"PCF","fundFullName":"Private Capital Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"CCIF","fundFullName":"Coast Capital Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"SIF2","fundFullName":"Secured Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"}],"sendConfirm":"<button class='btn btn-primary' onclick='sendConfirmEmail(\"24\")'>Email Now<\/button>"}]}
I use this function to populate my form :
function showUserMaintain(webUserProfileId) {
jQuery.post(stonecrestajax.ajaxurl, {
action: "sc_admin_getCustomerFundInfo",
webUserProfileId: webUserProfileId,
version: "1.1"
}, function (data) {
console.log(data['Records'][0]['webUserProfilePrimaryName']);
jQuery("#user_webUserProfilePrimaryName").html(data['Records'][0]['webUserProfilePrimaryName']);
jQuery("#user_webUserLevel").val(data['Records'][0]['webUserLevel']);
jQuery("#user_webUserProfileStatus").val(data['Records'][0]['webUserProfileStatus']);
jQuery("#user_verified").val(data['Records'][0]['verified']);
jQuery("#user_sendConfirmButton").html(data['Records'][0]['sendConfirm']);
jQuery('#user_fundTable tbody').empty();
jQuery.each(data['Records'][0]['fund'], function (fundIdx, fundValues) {
var fundStatusOptions = ["In Review", "New", "Approved"];
var combo = generateDropDownList(fundIdx, fundIdx, fundStatusOptions);
var row = '<tr><td>' + fundValues.fundName + '</td>';
row += '<td><input type="text" name="user_fundAccountNumber[]" id="user_fundAccountNumber_' + fundIdx + '" value="' + fundValues.fundAccNo + '"></td>';
row += '<td><input type="text" name="user_fundManagerName[]" id="user_fundManagerName_' + fundIdx + '" value="' + fundValues.fundManager + '"></td>';
row += '<td id="user_fundStatus_' + fundIdx + '" name="user_fundStatus_' + fundIdx + '"></td></tr>';
jQuery('#user_fundTable').append(row);
//jQuery("#user_fundStatus_" + fundIdx).append(combo);
//console.log(fundValues);
});
jQuery("#userModal").modal('show');
}, "json");
}
As you can see from the function I'm dynamically adding values to existing input fields and dynamically creating some input fields within a table that is within the form.
However, when I try to serialize (post) the form back to the server using this
function :
function saveUserMaintain() {
jQuery.ajax({
type: "POST",
url: url,
data: jQuery("#editUserForm").serialize(),
success: function (data) {
alert(data);
}
});
return false;
}
The only data I see coming across are the fields (inputs) I had statically defined, none of the "user_fundXXXXXX" fields are coming across in the post request.
I'm sure I'm just standing too far inside the box and can't see the obvious here, can anyone give me a hand ?