0

我正在尝试创建一个用户界面，它会自动将数据插入数据库。这个数据还应该包括鼠标坐标，因为我想在那个地方的世界地图上创建一个图钉。

问题是我不知道如何将鼠标坐标输入到 php 插入查询中。有人可以帮帮我吗？

PHP

<body>
    <h1>Add Project to the database</h1>        
    <div class="left_column">
        <svg version="1.1" xmlns="//www.w3.org/2000/svg" viewBox="0 0 400 620" xmlns:xlink="//www.w3.org/1999/xlink">               
            //country paths ...
        </svg>
    </div>
    <?php       
    if(isset($_POST['submit']))
    {
        $username = "root";
        $password = "clacs_2013";
        $hostname = "localhost"; 

        $conn = mysql_connect($hostname, $username, $password) 
          or die("Unable to connect to MySQL");
        print_r("INSERT INTO projects VALUES ('".$_POST['project_ID']."', '".$_POST['project_name']."', '".$_POST['project_desc']."', '".$_POST['leftCoord']."', '".$_POST['topCoord']."')");
        $insertProject= mysql_query("INSERT INTO projects VALUES ('".$_POST['project_ID']."', '".$_POST['project_name']."', '".$_POST['project_desc']."', '".$_POST['leftCoord']."', '".$_POST['topCoord']."');") 
                            or die(mysql_error());

        mysql_select_db("clacs") or die(mysql_error()); 

        $retval = mysql_query( $insertProject, $conn );
        if(! $retval )
        {
          die('Could not enter data: ' . mysql_error());
        }
        echo "Entered data successfully\n";
        mysql_close($conn);
        }
        else
        {
    ?>
    <form method="post" action="<?php $_PHP_SELF ?>">
        project ID: <input type="text" name="project_ID"><br/>
        project name: <input type="text" name="project_name"><br/>
        project description: <input type="text" name="project_desc"><br/>
        <input type="submit" name="submit" value="Submit">
    </form>
    <?php
        }
    ?>
</body>

JS

$(document).ready(function(){   
$(".country").click(function(e) {   
    $("form").css("display", "block");

    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var leftCoord = Math.round( (e.clientX - offset_l) );
    var topCoord = Math.round( (e.clientY - offset_t) );

});         
});
4

2 回答 2

0

由于 PHP 是一种服务器端语言，您不能直接访问在客户端运行的这些属性。

但是，您可以在表单中创建两个隐藏的输入，它们将保存鼠标坐标（x 和 y），并编写一个 JavaScript 代码来观察鼠标移动并定期更新此字段。

$(document).mousemove(function(e) {
    $('#input_x').val(e.pageX)
    $('#input_y').val(e.pageY)
});

小提琴：http: //jsfiddle.net/av4wM/2/

于 2013-10-29T19:15:02.780 回答
0

用您的代码详细说明@Guilherme Sehn 的解决方案：

<form method="post" action="<?php $_PHP_SELF ?>">
    project ID: <input type="text" name="project_ID"><br/>
    project name: <input type="text" name="project_name"><br/>
    project description: <input type="text" name="project_desc"><br/>
    <input type="hidden" id="topCoord" name="topCoord">
    <input type="hidden" id="leftCoord" name="leftCoord">
    <input type="submit" name="submit" value="Submit">
</form>

JS

$(document).ready(function(){   
$(".country").click(function(e) {   
    $("form").css("display", "block");

    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var leftCoord = Math.round( (e.clientX - offset_l) );
    var topCoord = Math.round( (e.clientY - offset_t) );

    $('#topCoord').val(topCoord);
    $('#leftCoord').val(leftCoord);
});         
});

显然可以简化

于 2013-10-29T20:33:39.113 回答