Question

我使用了以下jQuery，它允许您点击图像中的任何位置（这是地图的图片），当您点击时，它会在地图上放置一个标记： -

<img src="images/marker.png" id="marker" style="display: none; position: absolute;" />
<img src="images/square.png" id="map"/>

$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
 });

我们的想法是，当您点击地图时，会将一个坐标填充到表单字段中，以便您可以提交包含所点单位信息的表单。

我需要在jQuery中更改哪些内容才能添加此功能？此外，这将在IE中准确工作吗？

由于

Answer 1

您可以使用表单字段的隐藏输入来保存坐标。请参阅以下代码：

假设xValue和yValue是表单字段，则在表单标记内创建两个隐藏的输入，如：

<form action="...">
    <input type="hidden" id="xValue" name="xValue">
    <input type="hidden" id="yValue" name="yValue">
</form>

修改你的jQuery，如：

$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.

   $('#xValue').val(e.pageX);
   $('#yValue').val(e.pageY);
 });

当您提交表单时，您可以阅读xValue和yValue。

Answer 2

这是你在找什么？

<img src="images/marker.png" id="marker" style="display: none; position: absolute;" />
<img src="images/square.png" id="map"/>
<form action="...">
    <input type="hidden" name="coord[x]" id="coordX" />
    <input type="hidden" name="coord[y]" id="coordY" />
    <input type="submit" value="submit" />
</form>

$('#map').click(function(e)
{
    $('#marker').css('left', e.pageX).css('top', e.pageY).show();
    $('#coordX').val(e.pageX);
    $('#coordY').val(e.pageY);
});

如何使用jQuery填充表单字段

2 个答案: