RafaelMunoznl
1 month ago

Pass a Javascript variable to PHP using a HTML form

Posted 1 month ago by RafaelMunoznl

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 <span id="modal-employee"></span> 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="<span id='modal-employee'></span>">

So I need to store the content of <span id="modal-employee"></span> in a variable

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

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