javascript及びhtmlのformタグについて

Question

HTML及びjavascriptのformタグの扱いについて分からないので、ご教授お願い致します。

３つの入力フォームの値を計算し、別のフォームに計算した値を入れるプログラムの部品を作りました。

入力フォームaaaとbbbはページ上部、cccとdddはページ下部に配置するつもりですが、ページ中部には他の関数で使用するためのformタグがあるためaaaとbbbを分割したいです。

form method="get"タグ内の、入力フォームaaaと入力フォームbbbを分割し、正しく計算ができるように動作させるにはどうすればよいのでしょうか。

勉強中なため、言葉足らずでプログラムもお見苦しいかもしれませんが、どうぞよろしくお願い致します。

以下コード

ｊｓ部分

function calcu(c) {
aaa = eval(c.x.value);
bbb = eval(c.y.value);
ccc = eval(c.z.value);
c.ddd.value = Math.floor(aaa + bbb + ccc);
}

html部分

<form method="get"> 入力フォームaaa <input type="text" name="x"> 入力フォームbbb <input type="text" name="y"> 入力フォームccc <input type="text" name="z"> <input type="button" value="算出"onclick="calcu(this.form)"> <input type="text" name="ddd"> </form>

Answer 1

「都合上、１つの<form>内に関係するフォーム部品を配置する事が出来ないが、どうしたらいいか」という事かと思います。
<input>や<select>等のフォーム部品は必ず<form>要素の中で使わなければならない……という事はありません。

今回の場合、対象の<input>に入力された値を得る為には、document.getElementById()やdocument.getElementByName()が利用できます。

例えば、以下のような<input>が在ったとして、

<input type="text" name="x">

それへの入力値を得るには、以下のようにします。

var element = document.getElementByName('x');
var result = element.value;

後は、これを応用するだけですね。

質問内容からは外れますが、eval()の危険性についてはmaisumakunさんが仰る通り。nameかidかは、その違いさえ把握していれば、どちらでも良いとか思います（この回答では質問に合わせnameを利用した方法を提示していますが、今回の例ではidの方が適切かなとは思います）。

Comments

[main4]

初歩的なことだったかもしれませんが、回答ありがとうございます。しっかり勉強していきたいと思います

Answer 2

フォーム要素をnameで取得するのは、あまり現代では使われなくなっている書き方です。IDを定義して、document.getElementByIdで取得すれば、フォームの中にあろうが外にあろうが関係なくなります。

あと、evalを使うということは、javaScriptでできることは何でもさせてしまうのと同じことになります。数字の文字列を数値に変換したいだけならfoo.value - 0で実現できます。

Comments

[gouf]

parseInt() を利用しても数値に変換できそうです

* [parseInt() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt)

[main4]

なるほど。nameとevalは使わないほうが良いのですね。勉強になりました。