ComputerMaverick
1 month ago

HTML Input Array not working

Posted 1 month ago by ComputerMaverick

So i have this section of my form that is supposed to be an input array. Upon clicking the add button, another box is show to collect the data. When submitting to database, only the data of the first input box is processed. It is treated as a single input box instead of an array of input elements.

Form Section Containing implementation.

<h3>Requirements</h3>
                                <section>
                                    <div class="form-group row mb-3">
                                        <label class="col-md-2 col-form-label" for="requirements">Requirements<span class="tx-danger">*</span></label>
                                        <div class="col-md-10">
                                            <div id = "requirement_area">
                                                <div class="d-flex mt-2">
                                                    <div class="flex-grow-1 px-3">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" name="requirements[]" id="requirements" placeholder="Provide requirements">
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <button type="button" class="btn btn-success" style="" name="button" onclick="appendRequirement()"> <i class="fa fa-plus"></i> </button>
                                                    </div>
                                                </div>
                                                <div id = "blank_requirement_field">
                                                    <div class="d-flex mt-2">
                                                        <div class="flex-grow-1 px-3">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" name="requirements[]" id="requirements" placeholder="Provide requirements">
                                                            </div>
                                                        </div>
                                                        <div class="">
                                                            <button type="button" class="btn btn-danger" style="margin-top: 0px;" name="button" onclick="removeRequirement(this)"> <i class="fa fa-minus"></i> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <h3>Outcomes</h3>
                                <section>
                                    <div class="form-group row mb-3">
                                        <label class="col-md-2 col-form-label" for="outcomes">Outcomes<span class="tx-danger">*</span></label>
                                        <div class="col-md-10">
                                            <div id = "outcomes_area">
                                                <div class="d-flex mt-2">
                                                    <div class="flex-grow-1 px-3">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" name="outcomes[]" id="outcomes" placeholder="Provide expected outcomes">
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <button type="button" class="btn btn-success" style="" name="button" onclick="appendOutcome()"> <i class="fa fa-plus"></i> </button>
                                                    </div>
                                                </div>
                                                <div id = "blank_outcome_field">
                                                    <div class="d-flex mt-2">
                                                        <div class="flex-grow-1 px-3">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" name="outcomes[]" id="outcomes" placeholder="Provide expected outcomes">
                                                            </div>
                                                        </div>
                                                        <div class="">
                                                            <button type="button" class="btn btn-danger" style="margin-top: 0px;" name="button" onclick="removeOutcome(this)"> <i class="fa fa-minus"></i> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>

JS to append input desired box

<script type="text/javascript"> 
    var blank_outcome = $('#blank_outcome_field').html();
    var blank_requirement = $('#blank_requirement_field').html();
    $(document).ready(function() {
        $('#blank_outcome_field').hide();
        $('#blank_requirement_field').hide();
    });
    function appendOutcome() {
        $('#outcomes_area').append(blank_outcome);
    }
    function removeOutcome(outcomeElem) {
        $(outcomeElem).parent().parent().remove();
    }

    function appendRequirement() {
        $('#requirement_area').append(blank_requirement);
    }
    function removeRequirement(requirementElem) {
        $(requirementElem).parent().parent().remove();
    }
</script>

Ajax Implementation for form submission

<script type="text/javascript">
    var quill = new Quill('#course_description', {
        theme: 'snow',
    });
    var description = quill.getContents();
    var course_description = description.opts;

    /*var arr_req = $("input[name='requirements[]']").map(function() {
        return this.value;
    }).get();

    var arr_out = $("input[name='outcomes[]']").map(function() {
        return this.value;
    }).get();

    var requirements = [];
    $( "input[name='requirements']" ).each(function() {
        requirements.push($( this ).val());
    });

    var outcomes = [];
    $( "input[name='outcomes']" ).each(function() {
        outcomes.push($( this ).val());
    }); */

    $('#wizard1').steps({
		headerTag: 'h3',
		bodyTag: 'section',
		autoFocus: true,
		titleTemplate: '<span class="number">#index#<\/span> <span class="title">#title#<\/span>',
        onFinishing: function (event, currentIndex){
            
            $.ajax({
                type : 'POST',
                url  : "{{route('courses.store')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:{
                    'title':$('#course_title').val(),
                    'short_description':$('#short_description').val(),
                    'course_description': course_description,
                    'level':$('#level').val(),
                    'language_made_in':$('#language_made_in').val(),
                    'is_top_course':$('#is_top_course').val(),
                    'requirements':$('#requirements').val(),
                    'outcomes':$('#outcomes').val(),
                    'course_overview_provider':$('#course_overview_provider').val(),
                    'course_overview_url':$('#course_overview_url').val(),
                    'course_thumbnail':$('#course_thumbnail').val(),
                    'meta_keywords':$('#meta_keywords').val(),
                    'meta_description':$('#meta_description').val(),
                    'is_free_course':$('#is_free_course').val(),
                    'price':$('#price').val(),
                    'discount_flag':$('#discount_flag').val(),
                    'discounted_price':$('#discounted_price').val(),
                },
                success:function(response){
                    if(response.success){
                        swal({
                            title: response.message,                                
                            type: "success"
                            }, function() {
                                location.href = "{{route('courses.index')}}";
                        });
                    } 
                },
                error:function(error){
                    swal({
                        title: "An Error Occured",
                        text: "Please Check Data and Try again.",
                        type: "error"
                        }, function() {
                            location.reload();
                    });
                    console.log(error)
                } 
            });
            event.preventDefault();
        }
	});
</script>

Please sign in or create an account to participate in this conversation.