2016-04-19 15 views
0

私は必要に応じて追加のフィールドを動的に追加するフォームを作成しています。PHPの連絡フォームの複数のフィールド

どのように私は私の連絡先フォームPHPでこれらの動的フィールドを登録できますか?

また、なぜボタンを削除するとBootstrap core jQueryでエラーが発生するのですか?


形式:

<form action="%3C?php%20bloginfo('template_url');%20?%3E/contactengine.php" class="form-horizontal cd-form" method="post"> 
    <div class="col-md-12"> 
     <h3>Ditt navn og adresse</h3> 
    </div> 
    <div class="col-md-12 medlem-form"> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputEmail3">Fornavn*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Fornavn" name="Fornavn" placeholder="Fornavn" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputPassword3">Etternavn*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Etternavn" name="Etternavn" placeholder="Etternavn" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputEmail3">Fødselsdato*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Fodselsdato" name="Fodselsdato" placeholder="Fødselsdato" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputPassword3">Adresse*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Adresse" name="Adresse" placeholder="Adresse" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputPassword3">Post nummer*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Postnummer" name="Postnummer" placeholder="Post nummer" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputPassword3">Post sted*</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Poststed" name="Poststed" placeholder="Post sted" type="text"> 
      </div> 
     </div> 
    </div><!-- end form --> 
    <div class="col-md-12"> 
     <h3>e-post og telefon nummer</h3> 
    </div> 
    <div class="col-md-12 medlem-form"> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputEmail3">Navn foresatt</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Navnforesatt" name="Navnforesatt" placeholder="Nanv Foresatt" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputPassword3">E-post *</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Epost" name="Epost" placeholder="E-Post" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-12 control-label" for="inputEmail3">Mobil nummer</label> 
      <div class="col-sm-12"> 
       <input class="form-control" id="Mobilnummer" name="Mobilnummer" placeholder="Mobil nummer" type="text"> 
      </div> 
     </div> 
    </div><!-- end form --> 
    <div class="col-md-12"> 
     <h3>Velg en medlemskapstype</h3> 
    </div> 
    <div class="col-md-12 medlem-form"> 
     <div class="radio"> 
      <label class="radio-inline"><input id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1"> Støttemedlem (kr 300,-)</label> <label class="radio-inline"><input id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2"> Enkelt medlem (kr 1.500,-)</label> <label class="radio-inline"><input name="multi_note" onclick="showMe('div1', this)" type="checkbox" value="1"> Familemedlem (kr 2.500,-)</label> 
     </div><!-- third level ends here --> 
     <!-- Hidden form starts here --> 
     <div id="div1" style="display:none"> 
      <hr> 
      <div class="clonedInput" id="input1" style="margin-bottom:4px;"> 
       <div class="form-group"> 
        <label class="col-sm-12 col-xs-12 control-label" for="inputEmail3">Fornavn*</label> 
        <div class="col-sm-12"> 
         <input class="form-control" id="inputEmail3" placeholder="Email" type="text"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-12 col-xs-12 control-label" for="inputPassword3">Etternavn*</label> 
        <div class="col-sm-12"> 
         <input class="form-control" id="inputPassword3" placeholder="Password" type="text"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-12 col-xs-12 control-label" for="inputEmail3">Fødselsdato*</label> 
        <div class="col-sm-12"> 
         <input class="form-control" id="inputEmail3" placeholder="Email" type="text"> 
        </div> 
       </div> 
       <hr> 
      </div> 
      <div id="send-BTN"> 
       <input id="btnAdd" type="button" value="+ Legg en til"> <!--<input type="button" id="btnDel" value="remove name" />--> 
       <input id="fieldnumber" type="hidden" value="1"> 
      </div> 
     </div><!-- end Hidden form --> 
    </div><!-- end form --> 
    <div class="col-md-12 bottom-hack"> 
     <input type="submit" value="Send Message"> 
    </div> 
</form> 

、ここでは、PHP

<?php 
$EmailFrom = "[email protected]"; 
$EmailTo = "[email protected]"; 
$Subject = "Ny Medlem"; 
$Fornavn = Trim(stripslashes($_POST['Fornavn'])); 
$Etternavn = Trim(stripslashes($_POST['Etternavn'])); 
$Fodselsdato = Trim(stripslashes($_POST['Fodselsdato'])); 
$Adresse = Trim(stripslashes($_POST['Adresse'])); 
$Postnummer = Trim(stripslashes($_POST['Post nummer'])); 
$Poststed = Trim(stripslashes($_POST['Post sted'])); 
$Navnforesatt = Trim(stripslashes($_POST['Navn Foresatt'])); 
$Epost = Trim(stripslashes($_POST['E-post'])); 
$Mobilnummer = Trim(stripslashes($_POST['Mobil nummer'])); 
$Medlemskaptype = Trim(stripslashes($_POST['Medlemskapstype'])); 
$FamilieMedlemFornavn = Trim(stripslashes($_POST['Familie Medlem Fornavn'])); 
$FamilieMedlemEtternavn = Trim(stripslashes($_POST['Familie Medlem Etternavn'])); 
$FamilieMedlemFodselsdato = Trim(stripslashes($_POST['Familie Medlem Fødselsdato'])); 

// validation 
$validationOK = true; 
if (!$validationOK) { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; 
    exit; 
} 

// prepare email body text 
$Body = ""; 
$Body .= "Fornavn: "; 
$Body .= $Fornavn; 
$Body .= "\n"; 
$Body .= "Etternavn: "; 
$Body .= $Etternavn; 
$Body .= "\n"; 
$Body .= "Fodselsdato: "; 
$Body .= $Fodselsdato; 
$Body .= "\n"; 
$Body .= "Adresse: "; 
$Body .= $Adresse; 
$Body .= "\n"; 
$Body .= "Post nummer: "; 
$Body .= $Postnummer; 
$Body .= "\n"; 
$Body .= "Post sted: "; 
$Body .= $Poststed; 
$Body .= "\n"; 
$Body .= "Navn Foresatt: "; 
$Body .= $Navnforesatt; 
$Body .= "\n"; 
$Body .= "E-post: "; 
$Body .= $Epost; 
$Body .= "\n"; 
$Body .= "Mobil nummer: "; 
$Body .= $Mobilnummer; 
$Body .= "\n"; 
$Body .= "Medlemskapstype: "; 
$Body .= $Medlemskaptype; 
$Body .= "\n"; 
$Body .= "Familie Medlem Fornavn: "; 
$Body .= $FamilieMedlemFornavn; 
$Body .= "\n"; 
$Body .= "Familie Medlem Etternavn: "; 
$Body .= $FamilieMedlemEtternavn; 
$Body .= "\n"; 
$Body .= "Familie Medlem Fødselsdato: "; 
$Body .= $FamilieMedlemFodselsdato; 
$Body .= "\n"; 

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>"); 

// redirect to success page 
if ($success) { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">"; 
} else { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; 
} 
?> 

のJavaScript:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#btnAdd').click(function() { 
      var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
      var newNum = new Number(num + 1);  // the numeric ID of the new input field being added 

      // create the new element via clone(), and manipulate it's ID using newNum value 
      var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

      // manipulate the name/id values of the input inside the new element 
      newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 

      // insert the new element after the last "duplicatable" input field 
      $('#input' + num).after(newElem); 

      // enable the "remove" button 
      $('#btnDel').attr('disabled', ''); 
      $('#fieldnumber').val(num + 1); 

      // business rule: you can only add 5 names 
      if (newNum == -1) 
       $('#btnAdd').attr('disabled', 'disabled'); 
     }); 

     $('#btnDel').click(function() { 
      var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
      $('#input' + num).remove();  // remove the last element 

      // enable the "add" button 
      $('#btnAdd').attr('disabled', ''); 

      //Take one from value of hidden field 
      $('#fieldnumber').val(num - 1); 

      // if only one element remains, disable the "remove" button 
      if (num - 1 == 1) 
       $('#btnDel').attr('disabled', 'disabled'); 
     }); 

     $('#btnDel').attr('disabled', 'disabled'); 
    }); 
</script> 

答えて

1

ヨあなたの$_POST変数に新しいフィールドがあり、$_POST['child4']でそれぞれのフィールドにアクセスすることができます(あなたの入力名の数字をあなたのようにしないでください)。あなたは今、あなたはjQueryのAJAXでそれを行うことができますので、

foreach($_POST as $key => $value) { 
    if (strpos($key, 'child') === 0) { 
     // value starts with book_ 
    } 
} 
+0

おかげVelimirを介してデータベースにデータを挿入持っていますか?それは悪い習慣か? –

+0

のような場合は、入力の値を区別するために前の名前( "子")が必要です。また、 'parent1'、' parent2'などの他のグループを持つことも可能になります。 –

0

のようなループを思い付くことが、アイデアはこれです:jqueryの中

  1. は、各添加後0
  2. に変数を初期化しますTextareaインクリメント変数の値。最後に
  3. あなたはフィールドの数がちょうどテキストエリアを参照して、なぜ私は私の入力名に数字を使用すべきではありませんアヤックスRequette
関連する問題