【问题标题】:HTML Imagemap As Form SubmitHTML Imagemap 作为表单提交
【发布时间】:2013-12-08 16:30:36
【问题描述】:

我目前正在尝试为在线托管的 mysql 数据库创建一个简单的 php 前端。

我正在进行的项目将采用办公楼中办公桌的网格布局并将它们转换为图像地图。从那里,根据点击的座位,它将从 MySQL 数据库中提取信息,填充表单的字段,并在必要时允许进行编辑。

我有几个文件,下面列出了它们的功能:

locator.php - '主页',保存图像地图,是座位号变量的来源

form.php - 数据将填充的表单,取决于从 locator.php 传递的座位号(现在,这只是我计划稍后完成的基本 HTML 表单)

我在网上看到过使用常规形式完成此操作,但显然图像映射会使事情变得有些棘手。我尝试创建一个 onClick() 事件,该事件获取被点击的座位号并将其传递给 javascript 函数,但是从那里我冻结了如何使用该变量继续到下一页。

我觉得我有几个想法只是部分地在我的代码中实现,而且我碰壁了。任何想法将不胜感激。

locator.php:

<img src="map.jpg" usemap="#disp_map">
<form name="formmap" action="form.html" method="post">
    <map name="disp_map">
        <area name="area_159" shape="rect" coords="11,261,58,308" href='#' onClick="submitform(159)" alt="#159">
        <area name="area_160" shape="rect" coords="11,311,58,358" href='#' onClick="submitform(160)" alt="#160">
    </map>
</form>

<br>
<hr>

<?php
$dbhost = "<<removedforprivacy>>";
$dbname = "<<removedforprivacy>>";
$dbuser = "<<removedforprivacy>>";
$dbpass = "<<removedforprivacy>>";

try{
    $conn = mysql_connect($dbhost,$dbuser,$dbpass);
    $db = mysql_select_db($dbname, $conn);
    echo '<img src="check.jpg" alt="Database Connection Made">' . 'Connection to the server was successfully made.<br>';
}catch(Exception $e){
    echo 'Exception!: ' . $e->getMessage() . '<br>';
}
?>

<script language="javascript" type="text/javascript">
function submitform(jack) {
    window.alert("Data will be displayed for jack #"+ jack +".");
    document.formmap.submit();
}
</script>

【问题讨论】:

  • 您可以使用隐藏的输入字段。只需将点击事件的结果(座位号)放入该字段并正常提交即可。
  • 所以我的函数应该和这个类似...code

标签: javascript php html post imagemap


【解决方案1】:

考虑以下 sn-ps:

<form name="formmap" action="form.html" method="POST">
    <input type='hidden' id='seatNumber'/>
</form>

function submitform(jack) {
    window.alert("Data will be displayed for jack #"+ jack +".");
    document.getElementById('seatNumber').value = jack;
    document.formmap.submit();
}

【讨论】:

  • 像魅力一样工作。感谢您的指导!
猜你喜欢
  • 2016-02-17
  • 2012-06-25
  • 2011-03-22
  • 1970-01-01
  • 2017-11-16
  • 2010-10-10
  • 2013-04-22
  • 2017-02-17
  • 1970-01-01
相关资源
最近更新 更多