2017-07-03 4 views
0

異なる候補者の資格情報を追加するためのHTML formがあります。このデータは後でデータベースに格納されます。各候補について、それぞれName,SSNinput[type=text]フィールドと、Mobileの1つ以上のinput[type=text]フィールドがあります。候補者は一度に複数の携帯電話番号を持つことができます。すべての候補者の外側の配列があり

  • :このフォームが送信されたとき

    は今、私は、データがあるよう掲示することにしたかったです。それを$allCandidatesArrayとしましょう。

  • 外部配列$allCandidatesArrayには、各候補の配列が含まれています。

  • これらの内側アレイのそれぞれの内側で、最初の2つの要素、 $nameInput$ssnInputは単純な文字列値で、3番目の要素は配列で、その要素は候補の携帯番号です。候補者は複数の携帯電話番号を持つことができます。したがって、配列!

したがって、このような何かが** $_GET["allCandidatesArray"]に送られるべきである

$allCandidatesArray = { 
    { 
     "name"=> "Amy", 
     "ssn" => 123, 
     "mobile" => { 
      22, 
      33 
     } 
    }, 

    { 
     "name"=> "Bob", 
     "ssn" => 333, 
     "mobile" => { 
      11 
     } 
    } 
} 

は、だから私はあなたが私のSSCCEの例では以下を参照することができます何かを試してみましたが、何$_GET["allCandidatesArray]に送られる際に奇妙です画面に印刷されます:

Array ([0] => Array ([ssnValueInput] =>) [1] => Array ([0] => Array ([0] =>)) [2] => Array ([ssnValueInput] =>) [3] => Array ([0] => Array ([0] =>))) 

問題を解決するにはどうすればよいですか?

enter image description here

のindex.php:

<?php 

print_r($_GET["allCandidatesArray"]); 

?> 


<html> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <link type="text/css" rel="stylesheet" href="styles/materialize.min.css" /> 
    <link type="text/css" rel="stylesheet" href="styles/material-icons.css" /> 
    <!--<link type="text/css" rel="stylesheet" href="styles/styles.css" />--> 

    <script src="scripts/jquery-3.2.1.min.js"></script> 
    <script src="scripts/materialize.min.js"></script> 
    <script src="scripts/scripts.js"></script> 

    <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> 
</head> 

<body> 

<form id="credentialsForm" action="" method="get"> 

    <fieldset id="wrapper" class="container"> 
     <div class="row valign-wrapper"> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="nameInput" class="validate" name="allCandidatesArray[][nameInput]"/> 
       <label class="blue-text" for="nameInput">Name</label> 
      </div> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="ssnValueInput" class="validate" name="allCandidatesArray[][ssnValueInput]"/> 
       <label class="blue-text" for="ssnValueInput">SSN</label> 
      </div> 

     </div><!--.row--> 



     <div class="row valign-wrapper"> 

      <div class="input-field col l3"> 
       <input type="text" id="mobileInput" class="validate" name="allCandidatesArray[][][]"/> 
       <label class="blue-text" for="mobileInput">Mobile</label> 
      </div> 

      <div class="col l1 offset-l1" id="addMobileButtonWrapper"> 
       <a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a> 
      </div> 

     </div><!--.row--> 



     <!--<div class="container"><div class="divider"></div></div>--> 

     </fieldset><!--#wrapper--> 
















     <fieldset id="wrapper" class="container"> 
     <div class="row valign-wrapper"> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="nameInput" class="validate" name="allCandidatesArray[][nameInput]"/> 
       <label class="blue-text" for="nameInput">Name</label> 
      </div> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="ssnValueInput" class="validate" name="allCandidatesArray[][ssnValueInput]"/> 
       <label class="blue-text" for="ssnValueInput">SSN</label> 
      </div> 

     </div><!--.row--> 



     <div class="row valign-wrapper"> 

      <div class="input-field col l3"> 
       <input type="text" id="mobileInput" class="validate" name="allCandidatesArray[][][]"/> 
       <label class="blue-text" for="mobileInput">Mobile</label> 
      </div> 

      <div class="col l1 offset-l1" id="addMobileButtonWrapper"> 
       <a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a> 
      </div> 

     </div><!--.row--> 



     <!--<div class="container"><div class="divider"></div></div>--> 

     </fieldset><!--#wrapper--> 























     <div class="row" id="submitFormRow"> 
      <div class="col l4 offset-l4"> 
       <button type="submit" class="btn waves-light waves-effect">Add Candidates</button> 
      </div> 
     </div><!--.row #s --> 

</form> 

</body> 

</html> 

scripts.js:

$(document).on("click", "#addMobileButton", function() { 

    //alert("#addMobileButton clicked.");//check 

    var parentRow = $(this).closest(".row"); 

    parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput" class="validate"/><label for="mobileInput">Mobile</label></div><div class="col l1" id="addMobileButtonWrapper"><a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a></div></div>'); 


}); 

答えて

0

私はあなたがSOMETをやろうとしていると思いますこのようなヒンジ。

まず第一に、すべてのIDはユニークなので、重複するIDはすべて飛ばされません。 E.G <fieldset id="wrapper"

第2に、PHPは名前に配列インデックス([])を表示して空にすると、新しいインデックス番号を割り当てます。これを覚えておけば、空の配列インデックスの数を制限し、代わりに明示的にインデックスを割り当てることで、必要な配列構造を簡単に作成できます。

また、クラス名が一意ではないため、後で検証する要素を取得するためにクラス名に重複IDを変更しました。

以下のコードでは、各フィールドセットには動的に作成されたモバイル入力を配列に結びつけるために使用できる一意のIDがあります。 E.フィールドセットid="CandidateWrapper2"のGモバイル入力はallCandidatesArray[2][mobile][]という名前にする必要があります。モバイル番号の順序は気にしませんが、入力候補の候補には注意が必要です。

JavaScriptにはコメントと説明変数名がありますが、それが何をしているのかわからない場合は教えてください。

<?php 

    print_r($_GET["allCandidatesArray"]); 

?> 


<html> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <link type="text/css" rel="stylesheet" href="styles/materialize.min.css" /> 
    <link type="text/css" rel="stylesheet" href="styles/material-icons.css" /> 
    <!--<link type="text/css" rel="stylesheet" href="styles/styles.css" />--> 

    <script src="scripts/jquery-3.2.1.min.js"></script> 
    <script src="scripts/materialize.min.js"></script> 
    <script src="scripts/scripts.js"></script> 

    <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> 
</head> 

<body> 

<form id="credentialsForm" action="" method="get"> 

    <fieldset id="CandidateWrapper1" class="container candidate-wrapper" > 
     <div class="row valign-wrapper"> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="nameInput1" class="validate" name="allCandidatesArray[1][name]"/> 
       <label class="blue-text" for="nameInput">Name</label> 
      </div> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="ssnValueInput1" class="validate" name="allCandidatesArray[1][ssn]"/> 
       <label class="blue-text" for="ssnValueInput">SSN</label> 
      </div> 

     </div><!--.row--> 



     <div class="row valign-wrapper mobile-holder"> 

      <div class="input-field col l3"> 
       <input type="text" class="validate mobile-input" name="allCandidatesArray[1][mobile][]"/> 
       <label class="blue-text" for="mobileInput">Mobile</label> 
      </div> 

      <div class="col l1 offset-l1 add-mobile-button-wrapper" > 
       <a class="add-mobile-button btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a> 
      </div> 

     </div><!--.row--> 



     <!--<div class="container"><div class="divider"></div></div>--> 

    </fieldset><!--#wrapper--> 






    <fieldset id="CandidateWrapper2" class="container candidate-wrapper" > 
     <div class="row valign-wrapper"> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="nameInput2" class="validate" name="allCandidatesArray[2][name]"/> 
       <label class="blue-text" for="nameInput">Name</label> 
      </div> 

      <div class="input-field col l3 offset-l1"> 
       <input type="text" id="ssnValueInput2" class="validate" name="allCandidatesArray[2][ssn]"/> 
       <label class="blue-text" for="ssnValueInput">SSN</label> 
      </div> 

     </div><!--.row--> 



     <div class="row valign-wrapper mobile-holder"> 

      <div class="input-field col l3"> 
       <input type="text" id="mobileInput2" class="validate mobile-input" name="allCandidatesArray[2][mobile][]"/> 
       <label class="blue-text" for="mobileInput">Mobile</label> 
      </div> 

      <div class="col l1 offset-l1 add-mobile-button-wrapper" > 
       <a class="add-mobile-button btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a> 
      </div> 

     </div><!--.row--> 



     <!--<div class="container"><div class="divider"></div></div>--> 

    </fieldset><!--#wrapper--> 


    <div class="row" id="submitFormRow"> 
     <div class="col l4 offset-l4"> 
      <button type="submit" class="btn waves-light waves-effect">Add Candidates</button> 
     </div> 
    </div><!--.row #s --> 

</form> 

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 

<script type="text/javascript"> 
    $(document).on("click", ".add-mobile-button", function() { 
     var $this = $(this); 
     var $container = $this.closest('.candidate-wrapper'); 
     var _regex =/CandidateWrapper(\d+)/; 
     var _found = $container.attr('id').match(_regex); 
     var _candidateNumber = _found[1]; 

     // get and update our HTML template 
     var $newRow = $($('#TemplateHTML').html()); 
     var _newName = 'allCandidatesArray['.concat(_candidateNumber,'][mobile][]'); 
     $newRow.find('.mobile-input').attr("name",_newName); 

     // add new row to the DOM 
     $this.closest('.add-mobile-button-wrapper').before($newRow); 
    }); 
</script> 

<!-- The browser will ignore scripts with types it doesn't understand. So it doesn't run this --> 
<script type="text/html" id="TemplateHTML"> 
    <div class="input-field col l3"> 
     <input type="text" class="validate mobile-input" name="allCandidatesArray[WE_ARE_REPLACING_THIS][mobile][]"/> 
     <label class="blue-text" for="mobileInput">Mobile</label> 
    </div> 
</script> 

</body> 

</html> 
関連する問題