php - 1 つのフォーム 2 つの送信ボタンとキャプチャ

Question

私は予約ページフォームに取り組んでいます。クライアントが情報を入力する単一のフォームと、下部にある 2 つの送信ボタンが必要です。最初のボタンは、データをメールで送信し、ユーザーを静的な html ページにリダイレクトする必要があります。2 番目のボタンもデータをメールで送信し、ユーザーをチェックアウトページにリダイレクトする必要があります。

まず、この方法で送信ボタンを 2 つ持つことは可能なのでしょうか? 同意/同意しないボタンがあることについての投稿を見たことがあります。同意しないボタンは多かれ少なかれフォームをキャンセルし、同意するボタンはデータを渡します。データを渡すには両方のボタンが必要ですが、ポストアクションが異なります。

次に、フォームに無料のキャプチャを挿入しました。メールの受信箱にボットからの返信が来るのにうんざりしています。1つの送信ボタンでキャプチャがうまく機能しています。しかし、私は2つの送信ボタンでキャプチャを実装する方法について完全に途方に暮れています.

これが私のコードで、キャプチャと1つの送信ボタンが機能しています（もう1つのボタンはまだ「接続」されておらず、機能していません）：

<h2>Traveler Information</h2>
<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">
   <input type="hidden" id="skip_WhereToSend" name="skip_WhereToSend" value="my@email.com" />
   <input type="hidden" id="skip_Subject" name="skip_Subject" value="Reservation" />
   <input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="confirm.shtml" />
   <input type="hidden" id="skip_SnapHostID" name="skip_SnapHostID" value="xxx" />

<!-- form start -->
   <table width="558" border="0" cellpadding="2" cellspacing="0">
      <tr>
         <td width="214" align="right"># of Travelers</td>
         <td width="344">
            <select name="travelers" id="travelers">
              <option value="1" selected="selected">1</option>
              <option value="2">2</option>
            </select>
         </td>
      </tr>

      <tr>
         <td align="right">Room type</td>
         <td valign="top">
            <select name="room" id="room">
               <option value="" selected="selected">Select...</option>
               <option value="single">Single (1 bed)</option>
               <option value="double">Double (2 beds)</option>
               <option value="doublePlus">Superior Double (2 beds)</option>
            </select>
         </td>
      </tr>
   </table>
<!-- form end -->

<!-- captcha start -->
<table border="0" align="center" cellpadding="2" cellspacing="0" style="background-color:#b9558b;">
   <tr valign="bottom">
      <td style="padding: 0 4px 8px 8px;">
         <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');" style="font-size:11px;color: #000;">reload image</a><br />
         <a href="http://www.SnapHost.com"><img id="CaptchaImage" alt="Captcha Code" style="border-width:0px;" title="This Captcha image is intended to prevent spam. The Captcha code is generated by an online form processor. To submit this form, enter the code into the text field. For more information click on the Captcha image." src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=PR64FH7HK8F7" /></a>
      </td>

      <td style="padding: 0 8px 8px 4px;">
         <span style="color: #fff;"><i>Enter security code:</i></span><br />
         <input id="skip_CaptchaCode" name="skip_CaptchaCode" type="text" style="width:130px; height:64px; font-size:38px;" maxlength="6" />
      </td>
   </tr>

   <tr>
      <td colspan="2" align="center" style="background-color: #fff;">
         <a href="http://www.SnapHost.com" style="text-decoration:none; font-size:11px; font-family:Verdana, Arial, Helvetica; color:#000099;">This web form is protected from SPAM by <span style="text-decoration:underline;">SnapHost.com</span></a></td>
   </tr>
</table>

<script type="text/javascript">
function ReloadCaptchaImage(captchaImageId) 
{
   var obj = document.getElementById(captchaImageId);
   var src = obj.src;
   var date = new Date();
   var pos = src.indexOf('&rad=');

   if (pos >= 0) 
   { 
      src = src.substr(0, pos); 
   }

   obj.src = src + '&rad=' + date.getTime();
   return false; }
</script>

<!-- end captcha -->
<!-- start submit buttons -->
<table width="558" border="0" cellspacing="0" cellpadding="2">
   <tr>
      <td width="55%" align="right" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
         <input type="submit" name="bookMP-nov" value="Hold my reservation" class="submit" />
      </td>

      <td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
         <input type="submit" name="bookMP-nov" value="Book Now!" class="submit" />
      </td>
   </tr>
</table>
<!-- end submit buttons -->

彼らのウェブサイトによると、キャプチャは同じページで複数回使用できます。私は SnapHost.com で使用されている画像が本当に気に入っています。私のクライアントの多くは古いものであり、これらは私が出会った中で最も読みやすい画像です。そのため、SnapHost を使い続けて二重送信を達成できることを願っています。ボタンが必要です。

（A）これが実行可能かどうか、および（B）一緒に機能する二重送信ボタン/キャプチャのコーディングを開始する場所について誰かがアイデアを持っている場合は、本当に助けていただければ幸いです!! php (何も知らない) が必要なのか、javascript や jQuery (少し知っている) が必要なのか、それとも完全に何か他のものが必要なのかはわかりません。ありがとうございました！！

アップデート

このコードを試してみましたが、正しいページにリダイレクトされますが、キャプチャが検証されず、フォームの結果が返されません。一瞬だけ希望が持てましたが、地面に激突して戻ってきました!

<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='mp-NOVconfirm.shtml'; e.submit();" value="Hold my reservation" class="submit"></td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='../../index.shtml'; e.submit();" value="Book Now!" class="submit">

これも削除しました

input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="http://www.happywivestravel.com/tours/machupicchu/mp-NOVconfirm.shtml"

入力タグの onClick 関数に置き換えられると考えて、フォームの上部からコードを変更しますが、明らかにそれはここでの答えではありません。

私は素敵な簡単な修正を望んでいましたが、そうではありませんでした。他のアイデアを持っている人はいますか？

score 0 · Accepted Answer

更新:コード、質問、回答をもう一度確認すると、次のようになりました。

Javascript :

<head>
<script type='text/javascript' >
   function validateReservation()
   {
     //You can validate your captcha here
     document.forms['mpNOV'].submit(); //this submits the form
   }

   function validateBooking()
   {
     //You can validate your captcha here
     document.forms['mpNOV'].submit(); //this submits the form
   }
</script>
</head>

コードのこの部分は、フォームがあるページに配置されます。私はキャプチャの操作に慣れていないため、検証を自分で理解できることを願っています。

元のコード:

<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">

かわった：

<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" name="mpNOV" id="mpNOV">

<form>を使用して操作できるように、要素に名前を追加しましたdocument.forms。さらに、あなたのアクションが<form>SnapHost.com に移動していることに気付きました。つまり、サイトが SnapHost.com にリダイレクトされ、$_POSTそこを使用して情報を取得する必要があります。これはおそらくあなたの Web サイトではないため、SnapHost.com にリダイレクトせずに、サイトで SnapHost 画像を使用する別の方法を見つけてください。

これがあなたの Web サイトである場合、この PHP コードを使用して、フォームに入力されたデータを取得できます。

 <head>
       <?php
         if($_SERVER['REQUEST_METHOD'] === 'POST') //This if statement checks wether there's been a $_POST request...
         {
            if(isset($_POST['Reservation']) //Is the Reservation button clicked?
            {
               //You can get your data here using $_POST
            }

            if(isset($_POST['Booking']) //Is the Booking button clicked?
            {
               //You can get your data here using $_POST
            }
         }
       ?>
 </head>

このissetステートメントは、変数、またはこの場合はボタンが「設定」されているかどうかをチェックします。したがって、「予約」ボタンをクリックすると、ifステートメントは「予約」ボタンが設定されていることを認識します。

コードの PHP 部分は、リダイレクト<head>先のページのに入ります。<form action>

HTML :

<td>
    <input type="button" onClick="validateReservation();" value="Hold my reservation" class="submit" name="Reservation" />
</td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
    <input type="button" onclick="validateBooking();" value="Book Now!" class="submit" name="Book />
</td>

上記の送信ボタンに名前を追加したことに注意してください。また、常にタグ<input>で要素を閉じる必要があることに注意してください。/>これは私が信じているW3C標準です。また、これまでのところ、送信ボタンにクリック機能を持たせることはできないと読みましたが、これについてはよくわかりません。

PHP と $_POST メソッドを使用してデータを取得する方法についてヘルプが必要な場合は、こちらを参照してください。

stackoverflow.com は完全なコードを記述するためのものではないことに注意してください。ウェブを検索して Google を使用することが最初になります。その後でわからない場合は、ここで質問してください。

これがお役に立てば幸いです。

ご不明な点がございましたら、お気軽にお問い合わせください。

php - 1 つのフォーム 2 つの送信ボタンとキャプチャ

1 に答える 1

Related

Reference