如何克隆的輸入行，驗證必須爲原始行是相同

形式如何克隆的輸入行，驗證必須爲原始行是相同

<form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > 

<table id='menuAssign'> 

<tbody> 

     <tr class="clone_row"> 

    <td> <input type="text" name="menuname[]" id="menuname1" onblur="menuname_validation();"/></td> 
    <td> <input type="text" name="formname[]" id="formname1" onblur="formname_validation();"/> </td> 
    <td> <input type="text" name="menulevel[]" id="menulevel1" onblur="menulevel_validation();"/> </td> 
    <td> <input type="text" name="parentnode[]" id="parentnode1" onblur="parentnode_validation();"/> </td> 
    <td> <input type="text" name="menuorder[]" id="menuorder1" onblur="menuorder_validation();"/> </td> 
<!-- Build multiselect: --> 

<?php 
$connect = oci_connect('cfs', 'cfs', 'fal'); 

$web_user="select * from MENU_USER "; 

$array_web_user=oci_parse($connect,$web_user); 

//oci_define_by_name($array_tonnage2 ,TONNAGE,$tonnage); 
//echo $row_web_user['mu_user_id']; 
oci_execute($array_web_user); 

?> 
<td> 
<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1"> 
<?php 
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS)) 
{?> 
    <option value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option> 
    <?php 
}?> 

</select> 
</td> 
    <td> <button type="button" name="addRow" id="addRow" >AddRow</button></td> 

    </tr> 

</tbody> 
</table> 
<input type="submit" class="submit" value="submit" name="submit" > 
<input type="reset" class="reset" name="reset" onclick="firstfocus();"> 


</form>

我想克隆與添加按鈕，整行。驗證必須是相同的原始行，我用身份證驗證，我想這些鏈接，但還不足以爲我解決這個 jquery clone combo box not able to function 和 How to clone a row of inputs with the parent element's function together?

，因爲它具有多選

我用這個插件 http://js-tutorial.com/bootstrap-multiselect-1012

多選擇填充這樣

<?php 
$connect = oci_connect('cfs', 'cfs', 'fal'); 

$web_user="select * from MENU_USER "; 

$array_web_user=oci_parse($connect,$web_user); 

oci_execute($array_web_user); 

?> 

<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1"> 
<?php 
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS)) 
{?> 
    <option value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option> 
    <?php 
}?> 

</select>

JS驗證

<script>

//驗證*********************************** ************************************************** ***********************************

// After form loads focus will go to First field. 

    function firstfocus() 
    { 
    var uid = document.getElementById('menuname1').focus(); 
    return true; 
    } 


// This function will validate first input field. 

    function menuname_validation() 
    { 
    var uid = document.form1.menuname1;  
    var uid_len = uid.value.length; 
    if (uid_len == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid.focus(); 
    }, 0); 

    return false; 
    } 
    // Focus goes to next field i.e. . 
window.setTimeout(function() 
    { 
    document.form1.formname1.focus(); 
}, 0); 

    return true; 
    } 




// This function will validate second input field. 

    function formname_validation() 
    { 
    var uid1 = document.form1.formname1;  
    var uid_len1 = uid1.value.length; 
    if (uid_len1 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid1.focus(); 
    }, 0); 

    return false; 
    } 
    // Focus goes to next field i.e. . 
window.setTimeout(function() 
    { 
    document.form1.menulevel1.focus(); 
    }, 0); 

    return true; 
    } 




// This function will validate third input field. 

    function menulevel_validation() 

    { 

    var uid2 = document.form1.menulevel1; 
    var numbers = /^[0-9]+$/;  
    var uid_len2 = uid2.value.length; 
    if (uid_len2 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid2.focus(); 
    }, 0); 

    return false; 
    } 


    else{ 

    if(uid2 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    window.setTimeout(function() 
    { 
    document.form1.parentnode1.focus(); 
    }, 0); 

    return true; 

    } 
    } 
alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    uid2 .focus(); 
    return false; 
    }, 0); 



    } 




// This function will validate fourth input field. 

    function parentnode_validation() 
    { 
    var numbers = /^[0-9]+$/; 
    var uid3 = document.form1.parentnode1;  
    var uid_len3 = uid3.value.length; 
    if (uid_len3 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid3.focus(); 
    }, 0); 

    return false; 
    } 


    else{ 

    if(uid3 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    window.setTimeout(function() 
    { 
    document.form1.menuorder1.focus(); 
    }, 0); 

    return true; 

    } 
} 

alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    uid3 .focus(); 
    return false; 
    }, 0); 

    } 


// This function will validate fifth input field. 



    function menuorder_validation() 
    { 
var numbers = /^[0-9]+$/; 
var uid4 = document.form1.menuorder1; 
var uid_len4 = uid4.value.length; 


    if (uid_len4 == 0) 
    { 
    //alert("should not be empty "); 

window.setTimeout(function() 
    { 
    document.form1.multiselect1.focus(); 
    }, 0); 

    return true; 
    } 


    else{ 


if(uid_len4 != 0 && uid4 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    // window.setTimeout(function() 
    // { 
// document.form1.menuname2.focus(); 
    // }, 0); 

    return true; 

    } 
} 

alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    document.form1.menuorder1.focus(); 
    return false; 
    }, 0); 

    } 



</script>

用於克隆代碼

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#addRow").click(function(){ 
      var row = "<tr>"+ 
        "<td> <input type='text' name='menuname[]' id='menuname' onblur='menuname_validation();'/></td>"+ 

        "<td> <input type='text' name='formname[]' id='formname' onblur='formname_validation();'/></td>"+ 
        "<td> <input type='text' name='menulevel[]' id='menulevel' onblur='menulevel_validation();'/></td>"+ 
         "<td> <input type='text' name='parentnode[]' id='parentnode' onblur='parentnode_validation();'/></td>"+ 
         "<td> <input type='text' name='menuorder[]' id='menuorder' onblur='menuorder_validation();'/></td>"+ 

        "<td><select class='multiselect' multiple='multiple' name='multiselect[]' id='multiselect2'><option></option></select></td>"+ 

        " <td> <button type='button' name='addRow' id='addRow' >AddRow</button></td> "+ 

        "</tr>"; 

      $("#menuAssign tbody").append(row); 
      $('.multiselect').multiselect({ maxHeight: 80,refresh:true}); 


     }); 
    }); 
</script>

全碼.............

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<meta name="keywords" content="isc" /> 
<meta name="description" content="cfs" /> 
<title>Menu Generation</title> 


<!-- Include Twitter Bootstrap and jQuery: --> 
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 

<!-- Include the plugin's CSS and JS: --> 
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> 
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> 
<script> 
$(document).ready(function() { 
    $('.multiselect').multiselect({ 
      maxHeight: 80,refresh:true 
     }); 
}); 
</script> 
</head> 

<style> 
    body{ 
/*width:1400px; 
margin:45px auto; 
background-color:#f9ebe8 
*/ 
} 
    .webmenu li{ 
     list-style:none!important; 
     float:left; 
     width: 160px; 
     text-align:center; 
     border: 1px solid red; 
    } 
    .webmenu{ 
     margin-left:-40px!important; 
    } 

    .webmenu1{ 
     margin-left:-40px!important; 
    } 

    .webmenu1 li{ 
     list-style:none!important; 
     float:left; 
     width: 150px; 
     text-align:center; 
     border: 1px solid red; 
     margin-bottom: 17px!important; 
    } 
    .btn{ 
     padding: 2px 12px!important; 
     width:165px; 
    } 
    .two{ 
     padding-bottom: 20px; 
    } 
    .webmenuheading{ 
     color: #FF0000; 
     text-align: center; 
    } 
    .webmenucontainer{ 
     border: 1px solid red; 
     background: #c0c0c0; 
     width: 75%; 
     padding-left: 30px; 
     /* float: left;*/ 
     margin:0 auto; 
    } 
    .two{ 
     border: 1px solid red; 
     background: #c0c0c0; 
     width: 12%; 
     padding-left: 30px; 
     float: left; 
     margin-left: 10px; 
     padding-right:10px; 
    } 
    .submit{ 
     margin-top: 20px; 
     margin-bottom: 18px; 
    } 
    .menuorder{ 
     width: 150px; 
    } 

</style> 


<body onload="firstfocus();"> 

<h3 class=webmenuheading>Menu Manager</h3> 

<div class=webmenucontainer> 
<ul class="webmenu"> 
    <li>Menu Name</li> 
    <li>Form Name</li> 
    <li>Level</li> 
    <li>Parent Node</li> 
    <li>Order</li> 
    <li>user</li> 
</ul> 

<br/> 
<div style="height:140px;overflow: scroll;"> 
<form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > 

<table id='menuAssign'> 

<tbody> 

     <tr class="clone_row"> 

    <td> <input type="text" name="menuname[]" id="menuname1" onblur="menuname_validation();"/></td> 
    <td> <input type="text" name="formname[]" id="formname1" onblur="formname_validation();"/> </td> 
    <td> <input type="text" name="menulevel[]" id="menulevel1" onblur="menulevel_validation();"/> </td> 
    <td> <input type="text" name="parentnode[]" id="parentnode1" onblur="parentnode_validation();"/> </td> 
    <td> <input type="text" name="menuorder[]" id="menuorder1" onblur="menuorder_validation();"/> </td> 
<!-- Build multiselect: --> 

<?php 
$connect = oci_connect('cfs', 'cfs', 'fal'); 

$web_user="select * from MENU_USER "; 

$array_web_user=oci_parse($connect,$web_user); 

//oci_define_by_name($array_tonnage2 ,TONNAGE,$tonnage); 
//echo $row_web_user['mu_user_id']; 
oci_execute($array_web_user); 

?> 
<td> 
<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1"> 
<?php 
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS)) 
{?> 
    <option value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option> 
    <?php 
}?> 

</select> 
</td> 
    <td> <button type="button" name="addRow" id="addRow" >AddRow</button></td> 

    </tr> 

</tbody> 
</table> 
<input type="submit" class="submit" value="submit" name="submit" > 
<input type="reset" class="reset" name="reset" onclick="firstfocus();"> 


</form> 
</div> 

</div> 

</body> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#addRow").click(function(){ 
      var row = "<tr>"+ 
        "<td> <input type='text' name='menuname[]' id='menuname' onblur='menuname_validation();'/></td>"+ 

        "<td> <input type='text' name='formname[]' id='formname' onblur='formname_validation();'/></td>"+ 
        "<td> <input type='text' name='menulevel[]' id='menulevel' onblur='menulevel_validation();'/></td>"+ 
         "<td> <input type='text' name='parentnode[]' id='parentnode' onblur='parentnode_validation();'/></td>"+ 
         "<td> <input type='text' name='menuorder[]' id='menuorder' onblur='menuorder_validation();'/></td>"+ 

        "<td><select class='multiselect' multiple='multiple' name='multiselect[]' id='multiselect2'><option>2</option><option>1</option></select></td>"+ 

        " <td> <button type='button' name='addRow' id='addRow' >AddRow</button></td> "+ 

        "</tr>"; 

      $("#menuAssign tbody").append(row); 
      $('.multiselect').multiselect({ maxHeight: 80,refresh:true}); 


     }); 
    }); 
</script> 

<script> 
    var expanded = false; 
    function showCheckboxes() { 
     var checkboxes = document.getElementById("checkboxes"); 
     if (!expanded) { 
      checkboxes.style.display = "block"; 
      expanded = true; 
     } else { 
      checkboxes.style.display = "none"; 
      expanded = false; 
     } 
    } 

//var elmnt = document.getElementsById("DIV")[0]; 
//var cln = elmnt.cloneNode(true); 
//document.body.appendChild(cln);  
//validation************************************************************************************************************************ 

// After form loads focus will go to First field. 

    function firstfocus() 
    { 
    var uid = document.getElementById('menuname1').focus(); 
    return true; 
    } 


// This function will validate first input field. 

    function menuname_validation() 
    { 
    var uid = document.form1.menuname1;  
    var uid_len = uid.value.length; 
    if (uid_len == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid.focus(); 
    }, 0); 

    return false; 
    } 
    // Focus goes to next field i.e. . 
window.setTimeout(function() 
    { 
    document.form1.formname1.focus(); 
}, 0); 

    return true; 
    } 




// This function will validate second input field. 

    function formname_validation() 
    { 
    var uid1 = document.form1.formname1;  
    var uid_len1 = uid1.value.length; 
    if (uid_len1 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid1.focus(); 
    }, 0); 

    return false; 
    } 
    // Focus goes to next field i.e. . 
window.setTimeout(function() 
    { 
    document.form1.menulevel1.focus(); 
    }, 0); 

    return true; 
    } 




// This function will validate third input field. 

    function menulevel_validation() 

    { 

    var uid2 = document.form1.menulevel1; 
    var numbers = /^[0-9]+$/;  
    var uid_len2 = uid2.value.length; 
    if (uid_len2 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid2.focus(); 
    }, 0); 

    return false; 
    } 


    else{ 

    if(uid2 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    window.setTimeout(function() 
    { 
    document.form1.parentnode1.focus(); 
    }, 0); 

    return true; 

    } 
    } 
alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    uid2 .focus(); 
    return false; 
    }, 0); 



    } 




// This function will validate fourth input field. 

    function parentnode_validation() 
    { 
    var numbers = /^[0-9]+$/; 
    var uid3 = document.form1.parentnode1;  
    var uid_len3 = uid3.value.length; 
    if (uid_len3 == 0) 
    { 
    alert("should not be empty "); 

window.setTimeout(function() 
    { 
    uid3.focus(); 
    }, 0); 

    return false; 
    } 


    else{ 

    if(uid3 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    window.setTimeout(function() 
    { 
    document.form1.menuorder1.focus(); 
    }, 0); 

    return true; 

    } 
} 

alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    uid3 .focus(); 
    return false; 
    }, 0); 

    } 


// This function will validate fifth input field. 



    function menuorder_validation() 
    { 
var numbers = /^[0-9]+$/; 
var uid4 = document.form1.menuorder1; 
var uid_len4 = uid4.value.length; 


    if (uid_len4 == 0) 
    { 
    //alert("should not be empty "); 

window.setTimeout(function() 
    { 
    document.form1.multiselect1.focus(); 
    }, 0); 

    return true; 
    } 


    else{ 


if(uid_len4 != 0 && uid4 .value.match(numbers)) 
    { 
    // Focus goes to next field i.e. 
    // window.setTimeout(function() 
    // { 
// document.form1.menuname2.focus(); 
    // }, 0); 

    return true; 

    } 
} 

alert('numeric characters only'); 

window.setTimeout(function() 
    { 
    document.form1.menuorder1.focus(); 
    return false; 
    }, 0); 

    } 







</script>

來源

2015-12-22 san

你的js代碼在哪裏？ –

Tareq Mahmood ..已粘貼驗證和克隆代碼 – san

您的驗證工作沒有克隆？看起來你根本就沒有調用驗證：/ –

最合適和最新的技術是使用templates

<table> 
    <thead> 
    </thead> 
    <tbody id="menuContainer"> 
    </tbody> 
</table> 

<script type="text/template" id="tplMenu"> 
    <tr class="clone_row"> 
     <td>...</td> 
    </tr> 
</script>

您可以通過訪問$("#tplMenu")模板和設置HTML controls的value內TR。

即。 $("#tplMenu").find("#menuname1").val('XYZ'); $("#menuContainer").append($("#tplMenu").html());

templates用於放置在共享位置的代碼可重用性，因此它也用於其他形式。你只需要包含特定的模板。

來源

2015-12-22 05:58:56

可以請你解釋一下...我沒有太多的經驗.. – san

請檢查。答案已更新。 –

讓我試試這個... – san

如何克隆的輸入行，驗證必須爲原始行是相同

回答

相關問題