Pass a Javascript variable to PHP using a HTML form

I have the following code that builds a several tables besides each other with the name of each employee on top

@foreach($all_calendars as $name => $employee)
    @foreach($employee->appointments as $key => $appointment)
        <tr>
            <td>
                <h4 class="free-appointment text-center">
                    <a data-toggle="modal" data-target="#modal_addAppointment" data-time="{{ $key }}"
                        data-employee="{{ $name }}" class="btn btn-link" role="button" aria-pressed="true"><i
                            class="fas fa-plus"></i>
                    </a>
                </h4>
                <div id="modal_addAppointment" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    @include('salon.includes.modal_create_appointment')
                </div>
            </td>
        </tr>
    @endforeach
@endforeach

data-time and data-employee pass two variables to the modal: $name (of the employee) and $key (time of the appointment).

In order to show then in the modal I used Javascript like this. Otherwise it will only pass the name of the last employee and last time:

<script>
    // data-* attributes to scan when populating modal values
var ATTRIBUTES = ['time', 'employee'];

$('[data-toggle="modal"]').on('click', function (e) {
// convert target (e.g. the button) to jquery object
var $target = $(e.target);
// modal targeted by the button
var modalSelector = $target.data('target');

// iterate over each possible data-* attribute
ATTRIBUTES.forEach(function (attributeName) {
// retrieve the dom element corresponding to current attribute
var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
var dataValue = $target.data(attributeName);

// if the attribute value is empty, $target.data() will return undefined.
// In JS boolean expressions return operands and are not coerced into
// booleans. That way is dataValue is undefined, the left part of the following
// Boolean expression evaluate to false and the empty string will be returned
$modalAttribute.text(dataValue || '');

});
});

</script>

And it allows to show the results in HTML like this:

<h2>Appointment on <span id="modal-time"> </span> with <span id="modal-employee"></span></h2>

where  contains the name of the employee. Time works in a similar way.

Now, my problem is that I have a form in the modal that submits, among others, that name and that time variablesas hidden fileds. But I have the following problem:

<form method="POST" action="{{route('appointments.store', $company)}}" accept-charset="UTF-8">
@include('partials.errors')
<input name="employee_name" type="hidden" value="<span id="modal-employee"></span>"> // <-- this does not work
...

This does not work:

<input name="employee_name" type="hidden" value="">

So I need to store the content of  in a variable

The question is: how do I store the value of that variables on the fly directly in the HTML modal?

RafaelMunoznl

6 years ago

Level 8

After a lot of tests I have got the solution. I post here the answer in case it is useful to anyone in the future (including myself)

I already had the value of each field in each iteration in the Javascript variable: $target.data(attributeName)

So I added a counter to the loop and saved each value:

$('[data-toggle="modal"]').on('click', function (e) {
    var $target = $(e.target);
    var modalSelector = $target.data('target');

    let count = 0;  // <- The counter

    ATTRIBUTES.forEach(function (attributeName) {
    var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
    var dataValue = $target.data(attributeName);
    $modalAttribute.text(dataValue || '');
    document.getElementById('attribute_' + count).value = $target.data(attributeName); // <- save the value in a variable
    count++
    });
});

After that, I just set an id to each input field equal to the name of the variable:

<form...
<input name="appointment_time" type="hidden" id="attribute_0" value="">
<input name="employee_name" type="hidden" id="attribute_1" value="">
// and as much variables as I have in the loop
...</form

The hidden fields are passed through with the form once I hit the submit button

Please or to participate in this conversation.