javascript

質問

ある文字を入力して、文字を返すロジックですが、
ボックスを作成して入力を行いたいです。

以下のロジックだと、hogeのvalueに文字を入力すると、文字はボックスに返されますが、
valueをスペースにして、value=""
htmlで画面上で、文字を入力して、submitを実行しても、文字は返されません。
文字が引き渡されたないのが原因だと思われますが、
submitでどのようにして文字を引き渡してよいか、教えて頂けないでしょうか。
宜しくお願いします。

<form id="sample">
<input type="text" id="hoge" name="hoge" value="pass" size="30">
<input type="text" id="foo" name="foo" value="" size="100">
<INPUT type="submit" value="変換">

<script language="javascript">

(function () {
function test(p){var

省略

charAt(i);}return s;}

var elements = document.getElementById('sample').elements;
elements['foo'].value = test(elements['hoge'].value);
}());

</script>

回答No.2

noname#212058 · ベストアンサー

回答 No.1 です。

> 肝心のボックスの中身は、どちらもスペースになってしまいます。

データが Submit できないという質問ではなく、 INPUT ボックスが空になるという問題に対する質問だったのですか。それは今の実装方式で解決するのは難しいです。

INPUT ボックスが空になる原因は『Submit によってページが再読み込みされる』ためです。つまり、Javascript でボックスにデータを記入しても、Submit によってページが再読み込みされて、「最初の INPUT ボックスが空のページ」で上書きされてしまうために発生します。

これを回避するためには、以下のような対処を取るほうほうが考えられます。
A案) Submit を使用せずに、Ajax (jQuery) などを使用してサーバにデータを送る
　　（ページの再読み込みが発生しないようにする）
B案) 問題のページを PHP などを使用した動的ページに直し、
　　 再読込み時には value 値をセットした HTML を作るようにする

お礼

原因がわかりました、有難う御座います。
A案で対処したいと思います。有難う御座いました。

回答No.1

noname#212058

以下のようにすれば、foo にデータをコピーしてsubmit するようになります。
ポイントは <INPUT type="submit"> 要素に onclick を追加して、ボタン押下時に foo にデータを投入するコードが動くようにしたところでしょうか。

<form id="sample">
<input type="text" id="hoge" name="hoge" value="" size="30">
<input type="text" id="foo" name="foo" value="" size="100">
<INPUT type="submit" onclick="executeTest();" value="変換">
<script language="javascript">
function executeTest() {
function test(p){
return p;
}
var elements = document.getElementById('sample').elements;
elements['foo'].value = test(elements['hoge'].value);
}
executeTest();
</script>

補足

返信有難う御座います。

上記同じように組みなおしたつもりなのですが、
結果、get機能と同じように、
アドレスが
～.htm?hoge=test&foo=省略
とこのようになり、これで良いのかもしれないですが、
fooの中身は変換された文字が入ってましたが、
肝心のボックスの中身は、どちらもスペースになってしまいます。
私が何か間違ったでしょうか。