时间戳

首页 > 解决方案 > 在 html 表单上提交打开模式，将数据传递给他

javascript - 在 html 表单上提交打开模式，将数据传递给他

问题描述

我有一个像这样的简单表格：

<form id="submit-button">
        <label for="name">Serial number:</label>

        <input type="text" name="form_serialno" autofocus="autofocus" placeholder="Serial nomber"/>
        <input type="hidden" name="form_idorder" value="<?PHP echo $idorder; ?>">    
        <input type="hidden" name="form_customer" value="<?PHP echo $Customer; ?>">
        <input type="submit" value="submit" />
    </form>

我只是希望当我按下提交时，它会显示一个引导模式并将来自 3 输入的表单数据发送到该模式。

我已经有一个所有项目的列表，并且在每个项目附近都有一个按钮，我可以调用引导模式（使用数据字段并使用“button.data”从javascript调用。）但是现在我想要一个条形码扫描仪，我可以扫描项目的标识符，然后页面使用我在表单中填充的数据填充模式，但我不明白如何将表单中的数据传递给模式。

谢谢

标签： javascriptphphtmlbootstrap-modal

解决方案

使用 jQuery 事件，为“提交”添加一个监听器。
将以下代码添加到您的 js 中。 

function handleModal(e){
  e.preventDefault();
  // Get the input data.
  var input1 = $('input[name="form_serialno"]').val();
  var input2 = $('input[name="form_idorder"]').val();
  var input3 = $('input[name="form_customer"]').val();
  //Manipulate the data here.
  // Example:
  //$('#<id-of-modal-element>').text(input1);
  // Show the modal
  $('#myModal').modal('show');
  return false;
}
$('#submit-button').on('submit',handleModal);

推荐阅读