2017-04-19 15 views
0

私はRSVPフォームで本当に苦労しています。

私は一度提出された簡単なメールを私に送ることを得ようとしているhttp://adrianandemma.com/これまでのこのフォームを持っています。

フォームには「名前」フィールドと「参加 - はい/いいえ」のラジオボタンがあります。

私はいくつかのJSを持っていますので、一度に複数のゲストのためにこれらのフィールドをRSVPにクローンすることができます。

「名前」フィールドは配列の罰金を通過し、電子メールで送信されます。入力のname属性をname = "name []"に設定することができますが、ラジオボタン。

複製されたラジオボタンに同じ名前を付けることはできません。クローン化されたすべてのラジオが同じ名前を持つので、はいいくつかのJSを追加して、クローンラジオの名前を「来る」、来る〔2〕などに修正しようとしている。

フォームを送信するたびに、ラジオボタンの値が空白になるように見えるため、これを正常に動作させることはできません。

ラジオボタンを配列として設定し、$ _POSTと最終的に電子メールスクリプトを経由してそれらを運ぶのに最善の方法をアドバイスできますか?ここで

は私のHTMLフォームです:

<?php 
if(@$_REQUEST['submit'] == '1') { 
    include('assets/forms/rsvp.php'); 
} 
?> 

<form action="?" method="post"> 
      <?php if(@$errors) :?> 
       <p class="errors"><?php echo $errors; ?></p> 
      <?php endif; ?> 
      <input type="hidden" name="submit" value="1" /> 
      <div class="form-row"> 
       <div class="field-l"> 
        <p>Name</p> 
       </div> 
       <div class="field-r"> 
        <p>Attending?</p> 
       </div> 
      </div> 
      <div class="form-row guest"> 
       <div class="field-l"> 
        <input type="text" name="name[]" id="name" value="<?php echo htmlspecialchars(@$_REQUEST['name']); ?>" tabindex="1" /> 
       </div> 
       <div class="field-r"> 
        <input type="radio" name="coming" id="coming-yes" class="coming-yes" value="Yes"><label for="coming-yes">Yes</label><input type="radio" name="coming" id="coming-no" class="coming-no" value="No"><label for="coming-no">No</label> 
       </div> 
      </div> 
      <a class="addguest" href="#">Add further guest</a> 
      <div class="form-row"> 
       <button type="submit" id="rsvp-submit" tabindex="2">Submit RSVP</button> 
      </div> 
     </form> 

ハーズは私のフォームプロセスコード:

<?php 

$name = $_POST['name']; 
$coming = $_POST['coming']; 

$errors = ""; 
if([email protected]$_POST['name']) { $errors .= "Please enter your name.<br/>\n"; } 
if([email protected]$_POST['coming']) { $errors .= "Please enter yes or no for attending.<br/>\n"; } 

if(@$_POST['emailaddress'] != '') { $spam = '1'; } 

if (!$errors && @$spam != '1') 
    { 
     $to = "[email protected]"; 
     $subject = "Wedding RSVP"; 
     $headers = "From: [email protected]"; 
     $body = "The following RSVP has been sent via the website.\n\n"; 
     for($i=0; $i < count($_POST['name']); $i++) { 
      $body .= " 
      Name ".($i+1)." : " . $_POST['name'][$i] . "\n 
      Coming ".($i+1)." : " . $_POST['coming'][$i] ."\n\n"; 
     } 
     $body .= "\n\nDate Received: " . date("j F Y, g:i a") . "\n"; 

     mail($to,$subject,$body,$headers); 
    } 

?> 

は、ここに私のJSです:

$(document).ready(function() { 

    $('.addguest').on('click', function(e) { 
     e.preventDefault(); 
     // 
     // get the current number of ele and increment it 
     // 
     var i = $('.guest').length + 1; 
     $('.guest').first().clone().find("input").attr('id', function(idx, attrVal) { 
      return attrVal + i; // change the id 
     }); 
     $('.guest').first().clone().find("input[type=radio]").attr('id', function(idx, attrVal) { 
      return attrVal + i; // change the id 
     }).attr('name', function(idx, attrVal) { 
      return attrVal+'['+i+']'; // change the name 
     }).val('').end().find('label').attr('for', function(idx, attrVal) { 
      return attrVal + i; // change the for 
     }).end().insertBefore(this); 
    }); 

}); 

は、ここで私がすることによって受信てるものの一例です現在メールには名前が付いていますが、「Coming Yes/No」のラジオの値はすべて空白です:

The following RSVP has been sent via the website. 

      Name 1 : John Doe 
      Coming 1 : 

      Name 2 : Ann Doe 
      Coming 2 : 

      Name 3 : Fred Doe 
      Coming 3 : 

Date Received: 19 April 2017, 1:04 am 
+0

クローンされた行のフィールドの内容を消去することから始めることをお勧めします。 – RiggsFolly

+2

画像は1,000語を保存し、 '@ 'エラー抑圧記号を使用すると1000個のシンクがシンクします – RiggsFolly

+0

JavaScriptコードに問題があります。 FWIW、私は、あなたの考えがあなたのラジオの名前を '[1]'、 'coming [2]'などと命名する限り正しいことを伝えます。これらの名前を持つ直線HTMLフォームを作成すると、期待通りに値を配列として取得できますが、JSが名前を正しく設定していないため、デバッグにJSの人が足りません。 – alanlittle

答えて

0

正直なところ、私の最高の推測では、元の行では、あなたのラジオ入力の名前は単純にカッコなしで、「来て」いるということです。 I は、その名前に角括弧がないため、配列として動作するはずの同じ名前の他の名前が壊れていると考えています。言い換えれば、PHPは同じ名前の入力に対して2つの相反する型を取得しており、配列上の文字列を取ります。

直接テストするのは難しいとは言えません。入力がPHPフォームハンドラで配列として参照され、エラーをスローしないということは私には間違っているはずですが、試してみる価値があるかもしれません。 PHPは、ゼロインデックス配列を使用すると、私は具体的には、行ゼロとして最初の行をマークし

<div class="field-l"> 
    <input type="text" name="name[0]" id="name" value="<?php echo htmlspecialchars(@$_REQUEST['name']); ?>" tabindex="1" /> 
</div> 
<div class="field-r"> 
    <input type="radio" name="coming[0]" id="coming-yes" class="coming-yes" value="Yes"> 
    <label for="coming-yes">Yes</label> 
    <input type="radio" name="coming[0]" id="coming-no" class="coming-no" value="No"> 
    <label for="coming-no">No</label> 
</div> 

注意:ここで

は、私がしようとするだろうHTMLに変更します。

これはあなたのjavascriptにいくつかの変更が必要です。私はあなたの行のHTMLのための実際のテンプレートを作成し、毎回最初の行を試して、クローンを作成し、すべての入力をリセットし、名前を調整するよりも簡単に使用することがわかった。これがうまくいく方法は、IDとタイプが非標準のスクリプトタグ内にテンプレートHTMLを定義することです。ブラウザはそれを無視しますが、JavaScriptは他の要素と同様にアクセスでき、jQueryのhtml()メソッドでコンテンツを取り出すことができます。

は、ここで私は(あなたのインデックスの修正を含む)を作ってみたものです:

<!-- A script with a non-standard type is ignored by the browser --> 
<!-- We can reference it by ID in our JS though, and pull out the HTML --> 
<script id="guest-row-template" type="text/template"> 
    <div class="form-row guest"> 
     <div class="field-l"> 
      <input type="text" name="" id="name" class="name-ipt" /> 
     </div> 
     <div class="field-r"> 
      <input type="radio" name="" id="" class="coming-yes coming-yes-ipt" value="Yes" /> 
      <label for="" class="coming-yes coming-yes-label">Yes</label> 
      <input type="radio" name="" id="" class="coming-no coming-no-ipt" value="No" /> 
      <label for="" class="coming-no coming-no-label">No</label> 
     </div> 
    </div> 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.addguest').on('click', function(e) { 
      e.preventDefault(); 
      //Get the number of rows we have already - this is the index of the *next* row 
      //If we have 1 row, the first row's index is 0 and so our next row's index should be 
      //1, which is also our length, no need to increment 
      var i = $('.guest').length; 

      //Get HTML template content for a single row 
      var row = $('#guest-row-template').html(); 

      //Update the name attribute of the name input 
      row.find('.name-ipt').attr('name', 'name[' + i + ']'); 

      //Update the name and id attributes of the yes radio button 
      row.find('.coming-yes-ipt').attr('name', 'coming[' + i + ']'); 
      row.find('.coming-yes-ipt').attr('id', 'coming-yes-' + i); 

      //Update the name and id attributes of the no radio button 
      row.find('.coming-no-ipt').attr('name', 'coming[' + i + ']'); 
      row.find('.coming-no-ipt').attr('id', 'coming-no-' + i); 

      //Update the for attribute of the yes label 
      row.find('.coming-yes-label').attr('for', 'coming-yes-' + i); 

      //Update the for attribute of the no label 
      row.find('.coming-no-label').attr('for', 'coming-no-' + i); 

      row.insertBefore(this); 
     }); 

    }); 
</script> 

が、これは未テストコードであることに注意してください。もちろん、私は明らかなバグをすべて捕まえたことを確認するために数回行ってきましたが、他のバグは残っているかもしれません。私は積極的にテストすることができないので、完全にバグがないとは言えません。しかし、うまくいけば擬似コードとして、あなたが問題を解決するのに役立ちます。


EDIT 1

だけ明確にするには、通常は手動で配列としておよびへの入力を解釈するPHP用の入力名のカッコ内のインデックス値を提供するために、を持っていません入力を適切な順序で自動的に索引付けします。私は具体的には最初の入力をuse [0]に設定しています。そのあとのすべての入力はラジオボタンが機能するようにインデックス値を指定する必要があります(個人的には一貫性があります)。また、正しい名前正しいRSVP値にマッチします(徹底しようとしています)。

+0

上記の詳細な提案をありがとうございます。私はこれを実装しようとしましたが、私は

関連する問題