inputのvalueを変数として使うには

下記ソースのaタグ内map.phpのパラメータ({緯度}・{経度}の部分)にinputで入力した値を渡したいので
すが、どうすれば良いでしょうか？

<form action="index.php" method="POST" enctype="multipart/form-data" name="data">
緯度：<input name="lat" type="text" value="" size="20">
経度：<input name="lng" type="text" value="" size="20">
<a href="map.php?lat=｛緯度｝&lng={経度}">マップを表示</a>
</form>

No.2 ベストアンサー 回答者： yambejp 回答日時： 2011/11/12 23:25

こんな感じ？

<script>
function func(obj)
{
obj.href+="?lat="+obj.parentNode.elements["lat"].value;
obj.href+="&lng="+obj.parentNode.elements["lng"].value;
}
</script>
<form action="index.php" method="POST" enctype="multipart/form-data" name="data">
緯度：<input name="lat" type="text" value="" size="20">
経度：<input name="lng" type="text" value="" size="20">
<a href="map.php" onclick="func(this)">マップを表示</a>
</form>

formとaの関係次第だね

この回答へのお礼

上記ソースでばっちりうまくいきました！
おっしゃっていたformとaの関係のところなのですが
私のソースは下記のような構成となっていてノードが参照できません。

この場合はどのように参照すれば良いでしょうか？
ご教授お願い致します。

<form action="index.php" method="POST" enctype="multipart/form-data" name="data">
<table>
<tr><td>・・・</td><tr>
<tr><td>
緯度：<input name="lat" type="text" value="" size="20">
経度：<input name="lng" type="text" value="" size="20">
<a href="map.php" onclick="func(this)">マップを表示</a>
</td><tr>
</table>
</form>

お礼日時：2011/11/14 17:12

No.3 回答者： yambejp 回答日時： 2011/11/14 23:52

>この場合はどのように参照すれば良いでしょうか？

formにidをふってdocument.getElementById("フォームのid")でつかむか
document.forms["data"]みたいにすればつかめるかも。

アンカーがフォームに必ず含まれるならロジック的には
オブジェクトからformになるまでparentNodeをさかのぼっていくという手もあります。

<script>
function func(obj)
{
var f=getParentNode(obj,"form");
obj.href+="?lat="+f.elements["lat"].value;
obj.href+="&lng="+f.elements["lng"].value;
}
function getParentNode(obj,nodeName){
var n=obj.parentNode;
while(n){
if(n.nodeName==nodeName.toUpperCase()) return n;
n=n.parentNode;
}
}
</script>
<form action="index.php" method="POST" enctype="multipart/form-data" name="data">
緯度：<input name="lat" type="text" value="" size="20">
経度：<input name="lng" type="text" value="" size="20">
<a href="map.php" onclick="func(this)">マップを表示</a>
</form>

この回答へのお礼

function func(obj)
{
obj.href+="?lat="+document.getElementById("フォームのid").elements["lat"].value;
obj.href+="&lng="+document.getElementById("フォームのid").elements["lng"].value;
}

この記述でシンプルに出来ました。
解説ありがとうございました！本当に助かりました！

お礼日時：2011/11/15 09:24

No.1 回答者： think49 回答日時： 2011/11/12 15:37

パラメータを渡すだけなら JavaScript は不要だと思いますが…。

<a href="map.php?lat=｛緯度｝&lng={経度}">マップを表示</a>
　↓
<input type="submit" value="submit">

この回答への補足

最終的にはmap.phpではなくindex.phpにデータを渡したいのです。
途中で座標を表示させるために、javascriptやphpを使ってinput内のデータを
抜き出そうと考えております。

補足日時：2011/11/12 16:03