jquery validate and multiple selectbox

問題は私がカスタムチェックボックスを追加したときに有効な関数がうまくいかず、私のカスタムチェックボックスにclass = 'require'が含まれていて、フィールドIDが正しいことです。カスタム選択ボックスまたは新しい追加選択ボックスのいずれかが機能しません。カスタム選択ボックスを削除し、新しいボックスを追加している場合でも、すべてが正常にjquery validate and multiple selectbox

JSの作品：

<script> 
$(document).ready(function() { 
    $('.remove').click(function(){ 
     $(this).parent().remove(); 
    }); 

    $("#add").click(function() { 
     var intId = $("#configField div").length + 1; 
     var label = $("<label>Field Name:</label>"); 
     var labelType = $("<label>Field Type:</label>"); 
     var labelReq = $("<label>Require:</label>"); 
     var labelTag = $("<label>Tag:</label>"); 
     var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
     var fName = $("<input type=\"text\" name=\"RName[]\" class=\"required\" />"); 
     var fTag = $("<input type=\"text\" name=\"Tag[]\" class=\"required\" />"); 
     **This is the require second select box** var **fReq** = $("<select class=\"required\" name=\"Req[]\" ><option value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>"); 
     var fType = $("<select class=\"required\" name=\"RType[]\" ><option value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>"); 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />"); 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 

     fieldWrapper.append('<br>');   
     fieldWrapper.append(label); 
     fieldWrapper.append(fName); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelType); 
     fieldWrapper.append(fType); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelReq); 
     fieldWrapper.append(fReq); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(labelTag); 
     fieldWrapper.append(fTag); 
     fieldWrapper.append('<br>'); 
     fieldWrapper.append(removeButton); 
     $("#configField").append(fieldWrapper); 
    }); 
}); 

</script>

HTML

<? 

if (isset ($_GET['id'])) 
{$list=$_GET['id']; 
$_SESSION['editID']=$list;} 
else 
{$list=$_SESSION['editID'];} 

    try{ 
$sql = ' 
    SELECT * 
    FROM  require_attributes 
    WHERE ListID=? 
'; 
$stmt = $conn->prepare($sql); 
$stmt->execute(array($list)); 
$result= $stmt->fetchAll(); 
} 
catch(PDOException $e) 
    { 
    die ($e->getMessage().'<a href="view.php"> Back</a>'); 
    } 

    $counter=1; 

    foreach ($result as $set) 
{ 
?> 

<div class='fieldwrapper' id=<? echo "field".$counter ?>><br> 
<label>Field Name:</label><input type='text' name='RSSName[]' class='required' value=<? echo $set['Attribute']?>><br> 
<label>Field Type:</label><select class='required' name='RType[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option value=''>Please Select</option><option value='txt' <? if ($set['Type']=='txt') echo "SELECTED";?>>Text</option><option value='int' <? if ($set['Type']=='int') echo "SELECTED";?>>Numbers</option><option value=='bool' <? if ($set['Type']=='bool') echo "SELECTED";?>>Boolean</option></select><br> 
     **This is the custom select box** 
<label>Require:</label><select class='required' name='Req[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option value=''>Please Select</option><option value='1' <? if ($set['Req']=='1') echo "SELECTED";?>>Yes</option><option value='0' <? if ($set['Req']=='0') echo "SELECTED";?>>No</option></select><br> 
<label>Tag:</label><input type='text' name='Tag[]' class='required' value=<? echo $set['Tag']?>> 
<?if ($set['Attribute']!='Email') echo "<br><input type='button' class='remove' value='Remove'>";?></div> 

<? 
$counter++; 
}?> 


</fieldset> 
<input type="button" value="Add a field" class="add" id="add" /> 
<input type="submit" value="Submit"> 


</form> 

</html>

全ページ

<? 
include("../connection/conn.php"); 
session_start(); 


if($_SERVER['REQUEST_METHOD'] == "POST"){ 

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 


if (isset ($_GET['id'])) 
{$list=$_GET['id']; 
$_SESSION['editID']=$list;} 
else 
{$list=$_SESSION['editID'];} 

//For case only have email field. 
if (!isset ($_POST['RType']) && !isset($_POST['Req'])) 
{ 
      try{ 

$sql = 'DELETE ra.* FROM require_attributes ra WHERE ListID = ?'; 

$stmt = $conn->prepare($sql); 
$stmt->execute(array($list)); 
} 
catch(PDOException $e) 
    { 
    die ($e->getMessage()."<a href='view.php' onClick='window.location.reload()'> Back</a>"); 
    } 


    foreach ($_POST['Tag'] as $set) { 
    $tag=$set;} 

    try { 
    $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Type,Req,Tag) VALUES ('',$list,'Email','txt',1,?)"; 
    $stmt = $conn->prepare($query); 
    $stmt->execute(array($tag)); 

} 
catch(PDOException $e) 
    { 
    die ($e->getMessage()."<a href='view.php' onClick='window.location.reload()'> Back</a>"); 
    } 
} 

//For case have more than one field. 
else 
{ 
foreach ($_POST['RName'] as $input) { 
    echo $input . PHP_EOL; 
} 
foreach ($_POST['Tag'] as $input) { 
    echo $input . PHP_EOL; 
} 
foreach ($_POST['Req'] as $input) { 
    echo $input . PHP_EOL; 
} 
foreach ($_POST['RType'] as $input) { 
    echo $input . PHP_EOL; 
} 
} 

?> 
<div id="stylized" class="myform"> 
<div style="text-align:center;font-weight:bold;">You have successfully config the list. <a href='config.php'>Back</a></div> 
<div class="spacer"></div> 
</div> 
<? 
}else{?> 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<script src="../plugin/jquery-1.6.1.min.js"></script> 
<script src="../plugin/jquery.validate.min.js"></script> 
<script src="../plugin/jquery.form.js"></script> 
<link rel="stylesheet" type="text/css" href="../style/form.css" /> 





<!-- **********************This is validation function call**********************--> 

    <script> 
    $(document).ready(function(){ 
    $("#config").validate(); 
    }); 
    </script> 



    <script> 
    $(document).ready(function() { 
     $('.remove').click(function(){ 
      $(this).parent().remove(); 
     }); 

     $("#add").click(function() { 
      var intId = $("#configField div").length + 1; 
      var label = $("<label>Field Name:</label>"); 
      var labelType = $("<label>Field Type:</label>"); 
      var labelReq = $("<label>Require:</label>"); 
      var labelTag = $("<label>Tag:</label>"); 
      var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
      var fName = $("<input type=\"text\" name=\"RName[]\" class=\"required\" />"); 
      var fTag = $("<input type=\"text\" name=\"Tag[]\" class=\"required\" />"); 
      var fReq = $("<select class=\"required\" name=\"Req[]\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>"); 
      var fType = $("<select class=\"required\" name=\"RType[]\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>"); 
      var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />"); 
      removeButton.click(function() { 
       $(this).parent().remove(); 
      }); 

      fieldWrapper.append('<br>');   
      fieldWrapper.append(label); 
      fieldWrapper.append(fName); 
      fieldWrapper.append('<br>'); 
      fieldWrapper.append(labelType); 
      fieldWrapper.append(fType); 
      fieldWrapper.append('<br>'); 
      fieldWrapper.append(labelReq); 
      fieldWrapper.append(fReq); 
      fieldWrapper.append('<br>'); 
      fieldWrapper.append(labelTag); 
      fieldWrapper.append(fTag); 
      fieldWrapper.append('<br>'); 
      fieldWrapper.append(removeButton); 
      $("#configField").append(fieldWrapper); 
     }); 
    }); 

    </script> 



    </head> 
    <body> 

    <form id="config" method="post" action="config.php" > 
    <fieldset id="configField"> 

     <? 

    if (isset ($_GET['id'])) 
    {$list=$_GET['id']; 
    $_SESSION['editID']=$list;} 
    else 
    {$list=$_SESSION['editID'];} 

     try{ 
    $sql = ' 
     SELECT * 
     FROM  require_attributes 
     WHERE ListID=? 
    '; 
    $stmt = $conn->prepare($sql); 
    $stmt->execute(array($list)); 
    $result= $stmt->fetchAll(); 
    } 
    catch(PDOException $e) 
     { 
     die ($e->getMessage().'<a href="view.php"> Back</a>'); 
     } 

     $counter=1; 

     foreach ($result as $set) 
    { 
    ?> 
    <div class='fieldwrapper' id=<? echo "field".$counter ?>><br> 
    <label>Field Name:</label><input type='text' name='RName[]' class='required' value=<? echo $set['Attribute']?>><br> 
    <label>Field Type:</label><select class='required' name='RType[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option selected="" value="">Please Select</option><option value='txt' <? if ($set['Type']=='txt') echo "SELECTED";?>>Text</option><option value='int' <? if ($set['Type']=='int') echo "SELECTED";?>>Numbers</option><option value=='bool' <? if ($set['Type']=='bool') echo "SELECTED";?>>Boolean</option></select><br> 
    <label>Require:</label><select class='required' name='Req[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option selected="" value="">Please Select</option><option value='1' <? if ($set['Req']=='1') echo "SELECTED";?>>Yes</option><option value='0' <? if ($set['Req']=='0') echo "SELECTED";?>>No</option></select><br> 
    <label>Tag:</label><input type='text' name='Tag[]' class='required' value=<? echo $set['Tag']?>> 
    <?if ($set['Attribute']!='Email') echo "<br><input type='button' class='remove' value='Remove'>";?></div> 


    <? 
    $counter++; 
    }?> 


    </fieldset> 
    <input type="button" value="Add a field" class="add" id="add" /> 
    <input type="submit" value="Submit"> 


    </form> 

    </html> 

    <? 
    } 
    ?>

出典

2012-03-22 Leo Chan

検証コードがありますか？ :) –

jquery validateを使用しています。これはプラグインです http://bassistance.de/jquery-plugins/jquery-plugin-validation/ –

はい、ただし、使用しているのは、送信したコードにないためです..問題はその機能にあるかもしれない。 –

BasiclyそのValidatorは入力配列の名前をサポートしていないので思われる。

ここで働く例をCreataed：http://jsfiddle.net/hawat/2/

あなたが見る、バリデータのプラグインの一部編集してこの問題を解決： JQuery Validation for Array of Input Elements

出典

2012-03-22 08:51:08

本当にありがとう！例えば。非動的入力ボックス？ –

いいえ、フィールドを検索する方法だけを変更します。変更を追加しても何も変更してはいけません。私はそれが別の名前ではなく、配列として格納されている必要があると思いますか？ –

私に試してみましょう。 –

jquery validate and multiple selectbox

答えて

関連する問題