JavaScript — как клонировать строку входных данных, проверка должна быть такой же, как исходная строка
форма
<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>
я хочу клонировать всю строку с помощью кнопки добавления.
валидация должна совпадать с исходной строкой, я использовал id для валидации,
Я попробовал эти ссылки, но не достаточно для меня, чтобы решить это
Поле со списком JQuery Clone не работает
а также
Как клонировать строку входов вместе с функцией родительского элемента?
потому что он имеет мультиселект
я использовал этот плагин
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>
Решение
Наиболее подходящим и новейшим методом является использование templates
<table>
<thead>
</thead>
<tbody id="menuContainer">
</tbody>
</table>
<script type="text/template" id="tplMenu">
<tr class="clone_row">
<td>...</td>
</tr>
</script>
Вы можете получить доступ к шаблону по $("#tplMenu") и установить value HTML controls внутри тр.
то есть.
$("#tplMenu").find("#menuname1").val('XYZ');
$("#menuContainer").append($("#tplMenu").html());
templates используется для повторного использования кода, размещенного в общедоступном расположении, поэтому используется и в других формах. Вам просто нужно включить этот конкретный шаблон.
Другие решения
Других решений пока нет …