从不同的 php 变量在模态 div 上设置文本

Question

我正在尝试在模式中的 div 字段上设置不同的文本，我正在使用 Bootstrap 模态并使用下一个 Javascript 函数设置 1 个字段，我实际需要做的是将几个数据文本发送到该模态。我发送的数据是来自隐藏在表单中的不同输入的value 标签，还有我的<a></a> 标签可以打开我的模式。

我当前的代码看起来像这样，它从一个 php 函数中显示出来，我正在将它们的值与数据属性一起发送到我的 JS：

         echo '<form name="data-form">
              <input type="hidden" name="value" value="'.$qb["value"].'">
              <input type="hidden" name="idBol" value="'.$dat["id"].'">
              <input type="hidden" name="numBol" value="'.$n.'">
              <input type="hidden" name="idEvent" value="'.$qb["eventId"].'">
              <input type="hidden" name="nameEvent" value="'.$nameEve.'">
              <button type="button" href="#detallesModal" role="button" data-toggle="modal" data-nomb="'.$nomEve.'" data-precio="'.$valor.'" data-ciudad="'.$nomCiu.'" data-fecha="'.$fechaEvento.'" data-hora="'.$horaEvento.'" class="botonbol botonesbol btn-block ubicacionBoton open-detallesModal">
            Details
          </button>
            </form>
          </div>'; 
    }       
    echo '</div>      
        </div>';

这是我的 Javascript，它使用我的按钮的值设置一个字段，但我需要使用这些输入中的所有值并将它们发送到我的模式，加上它。有一个 foreach 函数，因此表单会针对来自我的数据库的每个响应更改其值

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val(myBookId);

     document.getElementById("content").innerHTML = $(this).name('valor');
     document.getElementById("title-content").innerHTML = $(this).name('nombreEvento');
     // As pointed out in comments, 
     // it is superfluous to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

编辑： 现在我在我的视图中设置了我的模式，并且表单在一个控制器中，它们用javascript代码相互连接，没有正确发送数据，但只在输入字段中，我需要在我的<td>中设置它们标签。这是我当前的模态表

<table class="table table-striped"> 
                            <tr>
                              <th style="text-align: right!important;">
                                Nombre del Evento:
                              </th>
                              <td>
                                <input readonly class="form-control"  name="nomb" value="" id="nomb" type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Precio de entrada:
                              </th>
                              <td>
                                <input readonly class="form-control" name="precio" id="precio" onkeydown="alpha(this)" onkeyup="alpha(this)" onblur="alpha(this)" onclick="alpha(this)" value="" type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Ciudad:
                              </th>
                              <td>
                                <input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)"  name="ciudad" id="ciudad" value=""  type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Fecha:
                              </th>
                              <td>
                                <input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="fecha" id="fecha" value="" type="date">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Hora:
                              </th>
                              <td>
                                <input readonly class="form-control" name="hora" id="hora" onkeydown="emailk(this)" onkeyup="emailk(this)" onblur="emailk(this)" onclick="emailk(this)" value="" type="time">
                              </td>
                            </tr>
                        </table>
                        <div>
                          <h4>Condiciones del Evento: </h4>
                          <p>aquí las condiciones del evento</p>
                        </div>

Answer 1

如果你可以使用 jQuery，你可以这样做：

var formData = {};
$('form[name="data-form"]').find('input[type="hidden"]').each(function(index, element){
    formData[ $(element).attr('name') ] = $(element).val();
});

在你的 js 代码中你可以像这样使用这个对象：formData.idBol

Answer 2

刚刚添加了一个捕获按钮数据的JS文件：

<button type="button" href="#Modal" role="button" data-toggle="modal" data-nomb="'.$nomEve.'" data-precio="'.$valor.'" data-ciudad="'.$nomCiu.'" data-fecha="'.$fechaEvento.'" data-hora="'.$horaEvento.'" class="btnbol btn-block ubiBtn open-detModal">
   Details
</button>

然后de JS文件捕获数据值并将它们发送到模态div：

$(document).on("click", ".open-detallesModal", function () 
{
  var nomb = $(this).data('nomb');
  var precio = $(this).data('precio');
  var ciudad = $(this).data('ciudad');
  var fecha = $(this).data('fecha');
  var hora = $(this).data('hora');
  // $(".modal-body #nomb").val( nomb );
  $(".modal-body #nomb").html(nomb);
  $(".modal-body #precio").html( precio );
  $(".modal-body #ciudad").html( ciudad );
  $(".modal-body #fecha").html( fecha );
  $(".modal-body #hora").html( hora );
});