8 months ago

Pass a Javascript variable to PHP using a HTML form

Posted 8 months 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)
                <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>
                <div id="modal_addAppointment" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">

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:

    // 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 || '');



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">
<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.