ど素人から毛を生やす。<延>

フォームメールの値をjsで操作

Web > javascript 2014年2月27日(最終更新:3年前)

このページは2014.2.27に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
そろそろレジンクラフトも佳境なのに、週末に予定ぎっしりの餅。です。

今回はフォームメールの話をします。

こんな話が来ました。

h260227

無茶です。

とは言えないのが辛いところ。

正しくは、「インデックスのリンクによってフォームのセレクトの初期値が変動し、更にそのセレクトの値によって送信するメールアドレスを変更する」なのですが、ウチで使っているフォームメールcgiは1つ1メールアドレスしか設定できないので、必然的に複数のcgiを積む必要性が発生します。

では、まずは「セレクトの値によって使用するcgiを変更する」方から。

<script language="javascript" type="text/javascript">  
    function onChangeSlect() {	
	var select = document.getElementById('select');
        var options = document.getElementById('select').options;
        var sele = options.item(select.selectedIndex).value;
	if(sele == 'リンク①'){
	var val = document.getElementById("formmail").action = 'cgiのURL①';
	}
	if(sele == "リンク②"){
	var val = document.getElementById("formmail").action = 'cgiのURL②';
	}
}
</script>

借り物拾い物をつぎはぎした感じが丸見えですが…

selectとIDを設定したセレクトにonchangeをつけ、何でも良いですが取り敢えず値をonChangeSlectに設定。

onchangeで関数が発動して、選択したoptionのvalueを取得します。

で、このvalueの値によって条件分岐です。
今回はformmailとIDを設定したformのactionを取得し、変更します。

cgiのURLですが、ディレクトリ名(またはファイル名)を「form1」のように、特定の文字列と連番にしておいてください。
この段階では無意味ですが、後の作業で必要になります。

しかし、このdocument.getElementById("○○").××はすごぶる便利ですが、難点は××を予め定義しておかないといけないというところです。

今回はフォームのURLにそのまま飛んできた際の対策も兼ねて、デフォルトで一番上になっている選択肢のときの条件にしておけば良いですが、問題は「値を設定しない××」を操作したいときです。

例えば、こんな感じに。

<script>
var str = "";
var no = location.search.match(/[?&](d+)(&|$)/);
if(no != null){
  no = no[1];
}
document.getElementById('select1').selected=false;
document.getElementById('select2').selected=false;
document.getElementById('select'+no).selected=true;
var val = document.getElementById("formmail").action = 'cgiのURL前半'+no+'後半';
</script>

selectedは値を持たないため、フォームの方に予め記載し、スクリプトでoffにするという二度手間を要します。

注意点としては、optionの方にも連番(番号はcgiのディレクトリと合わせる)でIDを設置すること、この記述はフォームの下に持ってくることです。

で、インデックスのリンクのhrefに「フォームのURL?1」という感じで連番を設定します。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)