How to use value="{{ old('value', default_value) }}" when appending code from JavaScript to...

I'm working on the project which I have to make my users to be able to add and remove items; in this case is the reward information. I'm developing this on Laravel 10 and I've tried so many attempts to get the old values from the controller when the validation is failed by the rules I declared.

In my JavaScript, I have addMoreItem() function and removeItem() function. In addMoreItem() function, I can used value="{{ old('reward_name') }}". After the failure, I have to check for the old value(s) by using @json('reward_details') which contains the array of reward data like this :

{"1":
{
"reward_award_status":"1",
"reward_type_id":"1",
"reward_owner_name":"International Kid Scientist Programme",
"reward_owner_description":"Example of Description",
"reward_date":"2024-10-04",
"reward_name":"International Kid Scientist",
"reward_education_level_id":"1",
"reward_academic_year":"2024",
"reward_academic_semester":"1",
"reward_prize_amount":null
},
"2":
{
"reward_award_status":"1",
"reward_type_id":"3",
"reward_owner_name":"National Kid Scientist Programme",
"reward_owner_description":"Example of Description",
"reward_date":"2024-10-04",
"reward_name":"National Kid Scientist",
"reward_education_level_id":"1",
"reward_academic_year":"2024",
"reward_academic_semester":"1",
"reward_prize_amount":null
},
}


After I got the old values as above, I will work in JavaScript like this :

var reward_items = @json(old('reward_total_items', 0));
if(reward_items > 0){
const reward_details = @json(old('reward'));
Object.entries(reward_details).forEach(([key, value]) => {
$('#reward_details').append(
'<div id="reward-' + key + '" class="card border-dark mt-3 mb-3' + '">' +
'<div class="card-header bg-warning">' +
'<div class="row align-items-center">' +
'<div class="col d-flex justify-content-start">' +
'<strong>Reward Information</strong>' +
'</div>' +
'<div class="col d-flex justify-content-end">' +
'<a class="btn btn-clear text-center" onclick="removeReward(\'reward-' + key + '\');">' +
'<i class="fa-solid fa-trash"></i>' +
'<strong>Remove This Item</strong>' +
'</a>' +
'</div>' +
'</div>' +
'</div>' +

'<input type="text" id="reward_' + key + '_reward_award_status" name="reward[' + key + '][reward_award_status]" class="form-control" value="{{ old("reward.' + key + '.reward_award_status", ' + value.reward_award_status + ') }}" style="display: none;"/>' +

'<div class="card-body">' +
'<div class="row row-cols-1">' +
'<div class="col mt-1 mb-1">' +
'<label for="reward_' + key + '_reward_type_id" class="form-label">' +
'<strong>Reward Type <span style="color: red;">*</span> : </strong>' +
'</label>' +
'<select id="reward_' + key + '_reward_type_id" name="reward[' + key + '][reward_type_id]" class="form-select form-control search-on-selection ' +
'@error("reward.' + key + '.reward_type_id") is-invalid @enderror" style="width: 100%;">' +
'<option value="" selected disabled>กรุณาเลือก/พิมพ์เพื่อค้นหา</option>' +
reward_type_list.map(reward_type => {
return '<option value="' + reward_type.id + '" ' +
(value.reward_type_id == reward_type.id ? 'selected' : '') +
' data-is-get-reward="' + reward_type.is_get_reward + '">' +
reward_type.name + '</option>';
}).join('') +
'</select>' +
'@error("reward.' + key + '.reward_type_id")' +
'<span class="invalid-feedback" role="alert">' +
'<strong>{{ $message }}</strong>' +
'</span>' +
'@enderror' +
'</div>' +
'</div>' +

'<div id="reward_' + key + '_reward_details" name="reward_' + key + '_reward_details" class="@if(' + value.reward_award_status + ' == "1")' + ' d-block @endif">' +
'<div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2">' +
'<div class="col mt-1 mb-1">' +
'<label for="reward_' + key + '_reward_owner_name" class="form-label">' +
'<strong>Reward Owner Name <span style="color: red;">*</span> : </strong>' +
'</label>' +
'<input type="text" id="reward_' + key + '_reward_owner_name_th" name="reward[' + key + '][reward_owner_name]" class="form-control ' +
'@error("reward.' + key + '.reward_owner_name") is-invalid @enderror" ' +
'placeholder="Please Type Reward Owner Name" ' +
'value="{{ old(\'reward.' + key + 'reward.owner_name\', ) }}"' +
'onkeyup="typeOnlyEN(\'reward_' + key + '_reward_owner_name\');" ' +
'onkeydown="typeOnlyEN(\'reward_' + key + '_reward_owner_name\');"/>' +
'<span class="invalid-feedback type_alert_reward_reward_owner_name" role="alert" style="display: none;">' +
'<strong>Please specify in English</strong>' +
'</span>' +
'@error("reward.' + key + 'reward.reward_owner_name")' +
'<span class="invalid-feedback" role="alert">' +
'<strong>{{ $message }}</strong>' +
'</span>' +
'@enderror' +
'</div>' + ...


I want to use old function like the code above but I can't use it. I don't know why it is not working but I assume that it is because of the different of how Blade and JavaScript read the code in different side. However, I need to use the old function. If you have any ideas about this, please inform me. I'd love to know every opinions from you guys. Please help me. I don't really know what to do next. If you want further information, please contact me.

Continue reading...