jquery validate and multiple selectbox

Question

The problem is when i add custom checkbox , the valid function do not work, but i include the class= 'require' in my custom checkbox and the field id is correct. Either the custom selectbox or new add selectbox does not work. But when the custom selectbox are remove, and add new box , everything works fine

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>

Full page

<?
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>

    <?
    }
    ?>

I am using jquery validate, that is a plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/ — Leo Chan, Mar 22 '12 at 06:59
Yes, but where are you using it, since it's missing in the code you submitted.. Might be the problem is in that function. — Marco Johannesen, Mar 22 '12 at 07:06
I think you are quite close to the answer , the validate works for the new added box if there is no preset box, and the preset one is not work as well , it may be the reason, i put the full page with the notice of where the validate locate, please have a look — Leo Chan, Mar 22 '12 at 07:30
Yep, seems thats the problem. Seems dynamicly added elements is a problem for the validation plugin. Try looking at this post: [link](http://stackoverflow.com/questions/5965470/client-side-validation-with-dynamically-added-field) — Marco Johannesen, Mar 22 '12 at 07:40
A simpler soloution might be to just call the validate() after the append function in the $("#add").click function. — Marco Johannesen, Mar 22 '12 at 07:45
Also, when the selectbox is disable , it return no value, can i force it return a defined value? — Leo Chan, Mar 22 '12 at 07:51
It still not working, it is werid , the first text box is work but another text box is not work, the second select box is work but not the last one — Leo Chan, Mar 22 '12 at 07:58

score 1 · Accepted Answer · edited May 23 '17 at 10:08

1

Basicly its because Validator dosen't support input array names it seems.

Creataed a working example here: http://jsfiddle.net/hawat/2/

You fix this with some editing of the validator plugin, see: JQuery Validation for Array of Input Elements

edited May 23 '17 at 10:08

Community

1
1

answered Mar 22 '12 at 08:51

Marco Johannesen

13,084
6
31
36

Thank you very much !but will it affect the normal input ? eg. non-dynamic input box?? – Leo Chan Mar 22 '12 at 09:22
No it only changes the way it will search through the fields, it shouldn't change anything if you add the modification. I guess it is a requirement they are stored as an array, instead of seperated with different names right? – Marco Johannesen Mar 22 '12 at 09:28
Also, when the selectbox is disable , it return no value, can i force it return a defined value? – Leo Chan Mar 22 '12 at 09:37
Just set a value on the "Please Select", then it will set that as an default ;) – Marco Johannesen Mar 22 '12 at 11:37

jquery validate and multiple selectbox

1 Answers1