Persisting dynamically created input fields after validte() refresh

Hello

I have a category list that a user can choose from, and based on a user's choice, additional fields can be displayed. The issue I'm having is that when a validate() refresh occurs, all the additional fields are gone. Is there a way to store the additional fields and display them again after refresh? Note that I'm very inexperienced in Javascript and I'm only using it because there is not alterantive to what I'm trying to achieve so forgive me if my script is bad.

            <input type="radio" name="category_id"
            value="{{ $category->id }}"
            {{ old('category_id') == $category->id ? 'checked' : '' }}
            @if ((isset($listing)) && (str_contains(url()->current(), 'listings/' . $listing->id . '/edit')) && ( $category->id == $listing->category_id))
                {{ 'checked' }}
            @endif

            class="category-radio"
            onClick="showFields({{ json_encode($category->ancestorsAndSelf->toArray()) }}, {{ json_encode($fields->toArray()) }})"
            >

function showFields(categories, fields) {
        var inputFields = '';

        var selectedCategoryId = $(".category-radio:checked").val();


        for (let category of categories) {
            for (let field of fields) {
                if (selectedCategoryId == category.id && field.category_id == category.id) {
                        inputFields += `<div>
                            <label for="${field.name}" class="text-gray-600">${field.name} <span class="text-primary">*</span></label>
                            <input type="text" name="${field.name}" class="input-box border border-gray-200 rounded" value="{{ old('${field.name}') }}">
                            @error('${field.name}')
                                <p class="text-red-500 text-xs mt-1"> {{ $message }} </p>
                            @enderror
                            </div>`;
                    }
            }
        }

        $('#fields-container').html(inputFields);

Tray2

3 years ago

Level 73

I take it you are validating those dynamic field values as well.

Then you just need to check of their presence in your code.

@if( old('dynamic_field', null) != null)
  <input type="text" name="dynamic_field" value="{{ old('dynamic_field') }}">
@endif

faust

3 years ago

Level 1

@Tray2 Yes i am. The dynamic fields are only accessible in the for loops, so i placed the the check you provided in the inputFields variable, but that doesn't seem to work.

Tray2

3 years ago

Level 73

@default123 You can always just do something like this.

<input type="text" name="title">
<input type="text" 
			id="show_if_value_is_set"  
		   name="show_if_value_is_set" 
		  class="is-hidden" 
		 value="{{ old('show_if_value_is_set') }}">

<script>
	function displayDynamicFields() {
		let dynField = document.querySelector('#show_if_value_is_set');
		if (dynField.value !== '') {
			dynField.classList.remove('is-hidden');
		} else {
			dynField.classList.add('is-hidden');
		}
	}

	displayDynamicFields();
</script>

<style>
	.is-hidden {
		display: none;
   }
</style>

Sinnbeck

3 years ago

Level 102

Submit using ajax so that you retain state on the page

Please or to participate in this conversation.