質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4027questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Aリンクでのフォーム内容を送信する方法を教えてください

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 293

reyjd

score 2

いつも当サイトにて勉強させていただいております。

ツールはezHTNLを使用しております。

今回はAリンクでのフォーム内容をPOSTする方法をご教授いただいきたいのですが

背景

・フォームからメール(メルマガ)を登録する ←メールのみです

・ボタンに動きのあるCSSを使用した画像を使用(俗に言うプルプルボタン)

・ボタンを押すとメールの登録確認画面に行く

イメージとしては

<style type="text/css" class="style_default">.xx,.yy・・・</style>
<style type="text/css" class="style_option">.zz・・・</style>
<button class="xx yy" type="image"><img class="zz" src="○○.png"></button>

※○○.pngは大きめのボタンでCSSによりプルプル動くものです
当方商用利用を予定しており、動かないと困りますのでCSSの変更は厳しいです

上記のことを行いたいのですが、実際のHTMLを記述しますと

<form method="post" action="https://hoge.jp/hoge">
    <input type="hidden" name="Publisher_Id" value="12345" />
    <input type="hidden" name="Form_Cd" value="hogehoge" />
    <input type="hidden" name="charcode" value="auto" />
    <dl class="pub_form center">
      <dt class="t28 bold text_center red">
        <label for="touroku_mail">※メールアドレスをご入力下さい<span class="require"></span></label>
      </dt>
        <dd>
        <input type="text" name="Mail" size="40" istyle="3" mode="alphabet" value="" class="t40" placeholder="E-mail" align="center">
        </dd>
      <dt></dt>
    </dl>

    <div class="bcreate72">
    <style type="text/css" class="style_default">.animate72,.a-option72,.a-btnsub72~~</style>
    <style type="text/css" class="style_custom">.a-btn72~~</style>
    <p align="center">
    <button type="image" class="a-btn a-btn72" href="" target="_blank" data-id="72"><img class="a-main animate animate72" src="img/botton01.png" alt="" data-recalc-dims="0" />
    </button>
    </p>

</form>

×上記の<button>~</button>タグでtype="image"にすると、name要素が処理されメルマガのサイトに情報が飛ぶのですが

何故か画像の透過色がリセットさてしまう。
(こちらも原因わかる方いらっしゃいましたら教えてください)

また、上記<button>~を以下のように<a>~</a>にすると、こちらでは画像が綺麗に表示はされるのですが

<a class="xx yy" href="index.html" type="image"><img class="yy" src="○○.png"></a>

×<a class="xx" href="**.html">画像</a>だとうまくいくが、フォーム情報がうまく飛ばせない状態となります。

といった状態でハマってしまっており、サイトを調べたのですが

href="javascript{}"・・・

にすることで送信できるとの情報を得たのですが、当方あまりスクリプトは
得意ではなく、こちらにご相談を伺った次第です。

メール登録に関しましては、メルマガのID等を紐付けないといけませんので
そこも思慮しております。

上記の×2つがどちらかが解決できましたらOKなのですが、分かる範囲で構いませんので
どなたか詳しい方教えていただけないでしょうか。

本来こちらで聞くべき内容ではない場合は、その旨ご意見を頂けないでしょうか。

よろしくお願いいたします。

ご指摘いただきましたフォームでやってみたところ「スクリプトやActiveXコントロールを実行しないように・・・」との記述後許可をすると
画面のようになりました。
イメージ説明

<form action="https://hoge.jp/hoge" method="post" name="e-mail">
    <input type="text" size="10" />
    <a href="javascript:document.e-mail.submit()">投稿する</a>
</form>

以上ですが、なんとか完成の状態まで近づけたいのでご協力をお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

これとか
クリックしたらフォームをsubmitするテキストリンク

「hogeForm」の部分には任意の名前でOKです。
formのname属性の値を割り当てます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/02 10:40

    早速のお返事ありがとうございます。
    試しにリンクを作ってみて見ましたが、「ページが表示されません」と出てしまいました。

    当方の情報が足らなかったので、もう一度質問内容を精査しますので、ご指導を頂けないでしょうか。

    よろしくお願いいたします。

    キャンセル

  • 2018/06/02 10:47

    たぶんformのsubmit先(actionの設定値)ではないでしょうか。元々の送信先に修正してください。

    キャンセル

  • 2018/06/02 11:06

    お返事ありがとうございます。
    submit先を実際の設定値にして見ましたが、画像のような状態になってしまいました。(IE)
    chromeではリンク先に飛べず、困っております。
    scriptの内容というのは記述しないでもよろしいのでしょうか?

    キャンセル

  • 2018/06/02 11:34

    ハイフンではなくアンダーバー、またはいずれもなしではどうですか?

    キャンセル

  • 2018/06/02 11:35 編集

    e-mail → e_mail または email

    キャンセル

  • 2018/06/02 11:52 編集

    お返事ありがとうございます。
    メルマガのサイトには飛びましたが「パラメータが不正です」
    とのメッセージが出ました。
    少し前進したように思えます。
    actionにはメルマガサイトのURLとフォームIDと会員番号をURLの形で送っています。
    https://hoge.jp/hoge12345/hogehoge
          ↑   ↑     ↑
         サイト 会員番号  フォームID
    ちなみに上記を実際のものに当てはめてみるとクリックしても
    反応がないようです。
    これについてはメルマガサイトに問い合わせてみます。

    キャンセル

  • 2018/06/02 12:03

    そうですね。パラメータ部分は受け取り先のサイトによるので必要なパラメータを渡していないか渡す値がただしい形式じゃないかどちらかと思います。
    それぞれinputのhiddenにきちんと正しいnameとそれぞれの値をセットしてみては?
    methodもgetかpostかも受け取り先の仕様によるので確認して実装してみてください。

    キャンセル

  • 2018/06/02 12:05

    了解しました。
    お付き合い頂きありがとうございました。
    進捗ありましたら書き込みさせていただきます。

    よろしくお願いいたします。

    キャンセル

0

一度CSSを見直し、確認したところ<button>タグのスタイルの記述がダブっていたようです。
お騒がせしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4027questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。