Question

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

我当前的代码如下所示，它是通过php函数显示的，我正在将其带有data属性的值发送给我的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代码相互连接，不，它不能正确发送数据，但是仅在输入字段中，我需要在{{1 }}标签。这是我当前的模式表

<td>

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>

然后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 );
});

从不同的PHP变量在模式div上设置文本

2 个答案: