Who search a variable name with DOM? - javascript
I have this code and I need know how to use "nombre" variable to find data with DOM, this aplication works without Jquery.
window.onload = function(e){
<%if(!faltanCampos.equals("")){%>alert("<%=faltanCampos%>")<%}%>
//Ocultamos los vacios'
var j, nombre
i=<%=totalSig%>
for (j=i-1;j > 0;j--){
//nombre="txtsssiidenti" & j'
nombre="txtissicodtui" + j
if (document.frmDatos.nombre.value==""){
menos();
}
}
actualizaNivel();
}
Im translating the aplication from vb to js, the vb code:
Sub window_onload
<%if(!faltanCampos.equals("")){%>msgbox("<%=faltanCampos%>")<%}%>
'Ocultamos los vacios'
Dim j, nombre
i=<%=totalSig%>
for j=i-1 to 0 step -1
'nombre="txtsssiidenti" & j'
nombre="txtissicodtui" & j
if (document.all(nombre).value="") then
menos()
end if
next
actualizaNivel
End sub
FireBug error:
TypeError: document.frmDatos.nombre is undefined
HTML:
<title><%=GestorIdioma.getCadena("ARGES")%> - <%=GestorIdioma.getCadena("DESCRIARCHIVO")%></title>
</head>
<body onmouseover="defaultStatus='<%=GestorIdioma.getCadena("PIEPAGINA")%>'; return true;" >
<iframe name="frameResultado" id="frameResultado" width="0" height="0" src=""></iframe>
<!-- Menu -->
<%# include file="../includeJSP/body_sitemap.inc" %>
<%# include file="../includeJSP/camino.inc" %>
<%if(!Utilidades.dameElemHashtable(h,"EXPURGO").equals("S") && !Utilidades.dameElemHashtable(h,"TRANSFERENCIA").equals("S")){%>
<!-- Opciones auxiliares -->
<%# include file="../includeJSP/OpcionesMant.inc" %>
<%}%>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="175" valign="top">
<form name="frmDatos" method="post" action="">
<!-- Los siguientes campos, aunque no aparecen en esta pestaña, los almacenamos aquí (ya que se heredan) -->
<input type="hidden" name="apartado" value="<%=apartado%>"/>
<input type="hidden" name="hacer" value="<%=hacer%>"/>
<input type="hidden" name="acceso" value="<%=acceso%>"/>
<input type="hidden" name="totalSig" value="<%=totalSig%>"/>
<input type="hidden" name="destino" value="signatura"/>
<input type="hidden" name="txtpsarcodarc" value="<%=Utilidades.dameElemHashtable(hotros,"txtpsarcodarc")%>"/>
<input type="hidden" name="txtpsarcodarcold" value="<%=Utilidades.dameElemHashtable(hotros,"txtpsarcodarcold")%>"/>
<input type="hidden" name="txtisarcodpro" value="<%=Utilidades.dameElemHashtable(hotros,"txtisarcodpro")%>"/>
<input type="hidden" name="masCodNivelA" value="<%=Utilidades.dameElemHashtable(h,"masCodNivelA")%>"/>
<input type="hidden" name="nivelArchivoAnterior" value="<%=Utilidades.dameElemHashtable(h,"masCodNivelA")%>"/>
<!-- Navegación Lateral -->
<%# include file="../includeJSP/NavegaArea.inc" %>
</td>
<td valign="top">
<p class="filareas">
<span class="cmpeti"><%=GestorIdioma.getCadena("SIGNATURA")%></span>
</p>
<div class="grisclaro">
<p class="filacmp">
<span class="inpuazul"><%= GestorIdioma.getCadena("TITULO")%>: </span>
<span class="cmpeti"><%=Utilidades.dameElemHashtable(hotros,"txtssartitulo",session.getAttribute("s54b.varidioma").toString())%></span>
</p>
<%if(Utilidades.dameElemHashtable(h,"TRANSFERENCIA").equals("S")){%>
<div class="grisclaro">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("ENTRANSFERENCIA")%></span>
</p>
</div>
<%}
if(Utilidades.dameElemHashtable(h,"EXPURGO").equals("S")){%>
<div class="grisclaro">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("ENEXPURGO")%></span>
</p>
</div>
<%}%>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr id="trnivelArchivo">
<td valign="top" colspan="2">
<p class="filacmp">
<span class="inpuazul"><%=GestorIdioma.getCadena("NIVELARCHIVO")%>:</span>
<select name="cboNivelA" class="inpuedi" onchange="javascrip:actualizaNivel()" <%=habilitado%> >
<% boolean carga=false;
anterior=(!Utilidades.dameElemHashtable(h,"masCodNivelA").equals("")?Utilidades.dameElemHashtable(h,"masCodNivelA").toString():"");
if(lnivelAr!=null){
for(i=0;i<lnivelAr.size();i++){
carga=false;
hvalores = (Hashtable)lnivelAr.get(i);
//Comprobamos permisos
if(hvalores.get("RECODRAR").equals("10") && per.damePermiso("MARO",request,response)){
carga=true;
}else if(hvalores.get("RECODRAR").equals("20") && per.damePermiso("MARD",request,response)){
carga=true;
}else if(hvalores.get("RECODRAR").equals("30") && per.damePermiso("MARG",request,response)){
carga=true;
}else if(hvalores.get("RECODRAR").equals("40") && per.damePermiso("MARH",request,response)){
carga=true;
}else if(hvalores.get("RECODRAR").equals("25") && per.damePermiso("MARC",request,response)){
carga=true;
}
if(carga){
if(hvalores.get("RECODRAR").equals(anterior)){
%>
<option class="inpuedi" value="<%=hvalores.get("RECODRAR")%>" selected="selected"><%=hvalores.get("REDESCRI")%></option>
<% }else{%>
<option class="inpuedi" value="<%=hvalores.get("RECODRAR")%>"><%=hvalores.get("REDESCRI")%></option>
<% }
}
}
}else{%>
<option class="inpuedi" value="" selected> </option>
<% }%>
</select>
</p>
</td></tr>
<%
String letras = "";
int numero = 0;
if(lclavesUI!=null){
for(i=0;i<lclavesUI.size();i++){
hvalores= new Hashtable();
hvalores = (Hashtable)lclavesUI.get(i);
letras = Utilidades.dameElemHashtable(hvalores,"letras");
numero = Utilidades.esNumero(Utilidades.dameElemHashtable(hvalores,"numero"))?Integer.parseInt(Utilidades.dameElemHashtable(hvalores,"numero")):0;
}
}
for(j=0;j<Integer.parseInt(totalSig);j++){
//Si no hay SIIDENTI, ponemos una por defecto
if(Utilidades.dameElemHashtable(h,"txtsssiidenti" + j).equals("")) {
numero++;
h.put("txtsssiidenti" + j,Utilidades.formateaNumCaja(letras,numero,true));
}
%>
<tr id="tipoUI<%=j%>"><td valign="top">
<hr/>
<input type="hidden" name="masUIvalida<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"masUIvalida" + j).equals("")?"S":Utilidades.dameElemHashtable(h,"masUIvalida" + j)%>"/>
<input type="hidden" name="masUIdeposito<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"masUIdeposito" + j)%>"/>
<input type="hidden" name="txtissicodtui<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"txtissicodtui" + j)%>"/>
<input type="hidden" name="masUnDescri<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"masUnDescri" + j)%>"/>
<input type="hidden" name="masUnMetros<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"masUnMetros" + j)%>"/>
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("TIPOUI")%>:</span>
<select name="cboTipoUI<%=j%>" class="inpuedi" onchange="javascript:actualizaTipo('<%=j%>')" <%=habilitado%> >
<option class="inpuedi" value="" selected="selected"> </option>
<%anterior=Utilidades.dameElemHashtable(h,"txtissicodtui" + j);
if(ltipoui!=null){
for(i=0;i<ltipoui.size();i++){
hvalores = (Hashtable)ltipoui.get(i);
if(hvalores.get("UNCODTUI").equals(anterior)){
%>
<option class="inpuedi" value="<%=hvalores.get("UNCODTUI")%>~<%=Utilidades.dameElemHashtable(hvalores,"UNMETROS")%>" selected="selected"><%=hvalores.get("UNDESCRI")%> - <%if ((Utilidades.dameElemHashtable(hvalores,"UNMETROS").substring(0,1)).equals(".")) {%>0<%=Utilidades.dameElemHashtable(hvalores,"UNMETROS").replace('.',',')%><%}else{%><%=Utilidades.dameElemHashtable(hvalores,"UNMETROS").replace('.',',')%><%}%> m.</option>
<% }else{%>
<option class="inpuedi" value="<%=hvalores.get("UNCODTUI")%>~<%=Utilidades.dameElemHashtable(hvalores,"UNMETROS")%>"><%=hvalores.get("UNDESCRI")%> - <%if ((Utilidades.dameElemHashtable(hvalores,"UNMETROS").substring(0,1)).equals(".")) {%>0<%=Utilidades.dameElemHashtable(hvalores,"UNMETROS").replace('.',',')%><%}else{%><%=Utilidades.dameElemHashtable(hvalores,"UNMETROS").replace('.',',')%><%}%> m.</option>
<% }
}
}else{%>
<option class="inpuedi" value="" selected="selected"> </option>
<% }%>
</select>
- <span class="cmpeti"><%=GestorIdioma.getCadena("IDENCAJA")%>:</span>
<input type="text" class="inpuedi" name="txtsssiidenti<%=j%>" size="30" value="<%=Utilidades.formateaNumCaja(Utilidades.dameElemHashtable(h,"txtsssiidenti" + j),0,true, "mostrar")%>" maxlength="15" onblur="javascript:formateaUI(this,'<%=GestorIdioma.getCadena("FORMATOUI")%>');" <%=soloLectura%>/>
</p>
</td>
<td valign="top" align="right">
<hr/>
<p class="filacmp">
<%if(!Utilidades.dameElemHashtable(h,"EXPURGO").equals("S") && !Utilidades.dameElemHashtable(h,"TRANSFERENCIA").equals("S")){%>
<input type="button" name="btnBorrar" class="boton" value="<%=GestorIdioma.getCadena("BORRAR")%>" onclick="javascript:BorraDatos('<%=j%>');"/>
<%}%>
</p>
</td>
</tr>
<tr id="iden<%=j%>"><td valign="top" colspan="2">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("IDENEXPUI")%>:</span>
<input type="text" class="inpuedi" name="txtsssiexpide<%=j%>" size="10" value="<%=Utilidades.dameElemHashtable(h,"txtsssiexpide" + j)%>" maxlength="3" onKeyPress="javascript:funValidarNumero();" onblur="javascript:formateaNumero(this);" <%=soloLectura%> />
</p>
</td></tr>
<tr id="deposito<%=j%>"><td valign="top" colspan="2">
<input type="hidden" name="txtissicodrsg<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"txtissicodrsg" + j)%>"/>
<input type="hidden" name="mastamdep<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"mastamdep" + j)%>"/>
<input type="hidden" name="masgesaut<%=j%>" value="<%=Utilidades.dameElemHashtable(h,"masgesaut" + j)%>"/>
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("DEPOSITO")%>:</span>
<input type="text" class="inpuedi" name="masDBreve<%=j%>" size="30" value="<%=encodeHTML(Utilidades.dameElemHashtable(h,"masDBreve" + j))%>" readonly="readonly"/>
<input type="text" class="inpuedi" name="masDDescri<%=j%>" size="40" value="<%=encodeHTML(Utilidades.dameElemHashtable(h,"masDDescri" + j))%>" readonly="readonly"/>
<%if(!Utilidades.dameElemHashtable(h,"EXPURGO").equals("S") && !Utilidades.dameElemHashtable(h,"TRANSFERENCIA").equals("S")){%>
<input type="button" name="btnCodClas" class="boton" value="..." onclick="javascript:SelDepconEspacio('DISPONIBILIDAD',document.frmDatos.txtissicodrsg<%=j%>.value,'<%=j%>')" />
<input type="button" name="btnCodClasT" class="boton" value="<%=GestorIdioma.getCadena("TODOS")%>" onclick="javascript:SeleccionarComponente('DISPONIBILIDAD',document.frmDatos.txtissicodrsg<%=j%>.value,'<%=j%>')"/>
<%}%>
</p>
</td>
</tr>
<tr id="idendeposito<%=j%>"><td valign="top" colspan="2">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("CODUBICACION")%>:</span>
<input type="text" class="inpuedi" name="txtsnsirsgide<%=j%>" size="30" value="<%=Utilidades.dameElemHashtable(h,"txtsnsirsgide" + j)%>" <%=soloLectura%>/>
</p>
</td></tr>
<tr id="obser<%=j%>"><td valign="top" colspan="2">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("OBSERVACIONES")%>:</span><br />
<textarea name="txtsnsiobserv<%=j%>" rows="4" cols="65" <%=soloLectura%> ><%=Utilidades.dameElemHashtable(h,"txtsnsiobserv" + j)%></textarea>
</p>
<div class="grisclaro bordeuskera" >
<p class="filareas">
<span class="cmpeti"><%=GestorIdioma.getCadena("SIGNATURA")%></span> <span class="cmpetirojo">*<%=GestorIdioma.getCadena("DATOSEUSKERA")%></span>
</p>
<div class="grisclaro">
<p class="filacmp">
<span class="cmpeti"><%=GestorIdioma.getCadena("OBSERVACIONES")%>:</span><br />
<textarea name="txtsnsiobserv<%=j%>_e" rows="4" cols="65" <%=soloLectura%> ><%=Utilidades.dameElemHashtable(h,"txtsnsiobserv" + j+"_e")%></textarea>
</p>
</div>
</div>
</td></tr>
<%}%>
</table>
</div>
</td></tr>
</table>
<%if(!Utilidades.dameElemHashtable(h,"EXPURGO").equals("S") && !Utilidades.dameElemHashtable(h,"TRANSFERENCIA").equals("S")){%>
<!-- Opciones auxiliares -->
<%# include file="../includeJSP/OpcionesMant.inc" %>
<%}%>
</form>
</body>
</html>
Finally i found a solution
window.onload = function(e){
<%if(!faltanCampos.equals("")){%>alert("<%=faltanCampos%>")<%}%>
//Ocultamos los vacios'
var j, nombre
i=<%=totalSig%>
for (j=i-1;j > 0;j--){
nombre="txtissicodtui" + j
if ( document.getElementsByName(nombre)[0].value == ""){
menos();
}
}
actualizaNivel();
}
Related
JavaScript: drop down on select "other" the input field next to it will enable
My dropdown works when I only have 1 row of input fields, but when I click "add" to append new row of input fields it does not work now.
I want the new row that I append to enable "Please specify" whenever I choose "other"
note: that "Sick leave" is a drop down.
<table id="main_table" class="table">
<thead>
<tr>
<td class="border">No.</td>
<td class="border">Name</td>
<td class="border">Request Type</td>
<td class="border">Add. Information / Comment</td>
<td class="border">action</td>
</tr>
</thead>
<tbody>
<tr>
<td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td>
<td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher's name" id="floatingTextarea1"></td>
<td>
<div class="row">
<div class="col">
<select name="requestType" onclick="checkRequestType()" id="requestType" class="form-control" required>
<option value="Sick leave">Sick leave</option>
<option >Other</option>
</select>
</div>
<div class="col">
<input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify">
</div>
</div>
</td>
<td>
<input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2">
</td>
<td>
<button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="button" name="add" id="add">ADD</button>
here is the javascript i used to append or add new row to the table.
<script type="text/javascript">
//---------------------------------//
//script to add new input fields---//
//---------------------------------//
$(document).ready(function(){
var html = '<tr><td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td><td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher\'s name" id="floatingTextarea1"></td><td><div class="row"><div class="col"><select name="requestType" onclick="checkRequestType()" id="requestType" class="form-control" required><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option >Other</option></select></div><div class="col"><input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify"></div></div></td><td><input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2"></td><td><button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button></td></tr>';
var x = 1;
var num = 1;
$('#add').click(function(){
if(true) {
$("#main_table").append(html);
x++;
}
});
$('#main_table').on('click','#remove',function(){
$(this).closest('tr').remove();
x--;
});
});
</script>
here is the javascript I used to check If the tropdown contains "other" to enable the input field next to it.
<script type="text/javascript">
function checkRequestType(){
if(document.getElementById("requestType").value == "Other"){
document.getElementById("OtherType").disabled = false;
console.log("true");
}else{
document.getElementById("OtherType").disabled = true;
console.log("false");
}
}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>
you can use this code i have test this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<table id="main_table" class="table">
<thead>
<tr>
<td class="border">No.</td>
<td class="border">Name</td>
<td class="border">Request Type</td>
<td class="border">Add. Information / Comment</td>
<td class="border">action</td>
</tr>
</thead>
<tbody>
<tr>
<td class="border">
<center><span id="itemNum" style="font-size: 23px;">0</span></center>
</td>
<td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher's name"
id="floatingTextarea1"></td>
<td>
<div class="row">
<div class="col">
<select name="requestType" id="requestType" class="form-control request_type" required>
<option value="Sick leave">Sick leave</option>
<option>Other</option>
</select>
</div>
<div class="col">
<input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled="disabled"
placeholder="Please Specify">
</div>
</div>
</td>
<td>
<input type="text" name="" class="form-control" name="description"
placeholder="Leave additional information/comment here" id="floatingTextarea2">
</td>
<td>
<button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="button" name="add" id="add">ADD</button>
<script type="text/javascript">
//---------------------------------//
//script to add new input fields---//
//---------------------------------//
$(document).ready(function () {
var html = '<tr><td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td><td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher\'s name" id="floatingTextarea1"></td><td><div class="row"><div class="col"><select name="requestType" id="requestType" class="form-control request_type" required><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option >Other</option></select></div><div class="col"><input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify"></div></div></td><td><input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2"></td><td><button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button></td></tr>';
var x = 1;
var num = 1;
$('#add').click(function () {
if (true) {
$("#main_table").append(html);
x++;
}
});
$('#main_table').on('click', '#remove', function () {
$(this).closest('tr').remove();
x--;
});
$('body').on('change', '.request_type',function() {
var element = $(this);
var target = element.parent().parent().next().children();
console.log(target)
if (element.val() == "Other") {
console.log(element.parent().parent().find('#OtherType'))
// target.prop("disabled", false);
element.parent().parent().find('#OtherType').removeAttr("disabled")
} else {
target.attr('disabled', true);
}
})
});
</script>
</body>
</html>
your function will not work because you have tried to get elements by id that will pick only the first occurrence of element.
so you can use "this" and "closest" like this
function checkRequestType(e){
var element = e;
var target = element.parentElement.nextSibling.firstChild;
if(element.value == "Other"){
target.disabled = true;
}else{
target.disabled = false;
}
}
add this function like this
<select onchange="checkRequestType(this)">
Enable Edit button if new record exists
I created a modal where I can insert new client record and edit the same record. But in relation to the edit button, I wanted it to be active only when there was a new record in the database and until the end of the day it was registered.
<a type="button" name="editar" id="'.$row["IdCliente"].'" data-toggle="modal" href="#add_data_Modal" class="btn btn-primary edit_data">Update</a>
I'm trying this way:
if(isset($_POST["employee_id3"]))
{
$output = '';
$query = "SELECT * FROM centrodb.PsicUtentes LEFT OUTER JOIN centrodb.PsicUtentesConsulta ON centrodb.PsicUtentesConsulta.CodigoUtente2 = centrodb.PsicUtentes.CodigoUtente WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id3"]."' ORDER BY IdConsulta DESC ";
$result = mysqli_query($conn, $query);
$output;
while($row = mysqli_fetch_array($result))
{
$dataAtual = DATE('Y-m-d');
$disabled = "";
if(DATE($row['Data2'])!=$dataAtual){
$disabled = "disabled";
}
$output .= '
<h4 class="modal-title">Histórico de Consultas</h4>
<div>
<button type="button" class="exibir botao" href="#" aria-hidden="true">+</button>
<button type="button" href="#" class="ocultar botao" aria-hidden="true">-</button>
</div>
<div class="conteudo">
<form method="post" id="insert_form6">
<div style="float:right">
<a type="button" name="edit3" id="'.$row["Id"].','.$row["IdConsulta"].'" data-toggle="modal" href="#add_data_Modal3" class="btn btn-primary edit_data3" "$disabled">Editar</a>
</div>
<br/>
<br/>
<br/>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<input type="Hidden" id="IdConsulta1" name="IdConsulta" class="form-control" value="'.$row["IdConsulta"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Data Consulta</label>
<input type="text" id="Data23" name="Data2" class="form-control" value="'.$row["Data2"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Código Utente</label>
<input type="number" id="CodigoUtente5" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;" readonly="true"/>
</td>
<td>
<label>Nome Utente</label>
<input type="text" id="Nome5" name="Nome" value="'.$row["Nome"].'" class="form-control" style="width:400px;" readonly="true"/>
</td>
<td>
<label>Data Nascimento</label>
<input type="date" id="DataNasc5" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Data Admissao</label>
<input type="date" id="DataAdmissao5" name="DataAdmissao" value="'.$row["DataAdmissao"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
<td>
<label>Valência</label>
<input type="text" id="ValenciasDescricao5" name="ValenciasDescricao" value="'.$row["ValenciasDescricao"].'" class="form-control" style="width:200px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Observação</label>
</p><textarea rows="6" cols="130" readonly="true">'.$row["Descricao"].'</textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>O Psicologo/a</label>
<input type="text" id="Colaborador2" name="Colaborador2" class="form-control" style="width:150px;" value="'.$row["Colaborador2"].'" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
';
}
$output;
echo $output;
}
<script>
$(document).ready(function(){
$(document).on('click', '.edit_data3', function(){
var employee_id3 = $(this).attr("Id");
$.ajax({
url:"./fetch2",
method:"POST",
data:{employee_id3:employee_id3},
dataType:"json",
success:function(data){
$('#IdConsulta').val(data.IdConsulta);
$('#Data22').val(data.Data2);
$('#CodigoUtente6').val(data.CodigoUtente2);
$('#Descricao1').val(data.Descricao);
$('#Colaborador2').val(data.Colaborador2);
$('#employee_id3').val(data.Id);
$('#insert3').val("Gravar");
$('#add_data_Modal3').modal('show');
}
});
});
$('#insert_form7').on("submit", function(event){
event.preventDefault();
if($('#CodigoUtente6').val() == "")
{
alert("Código Utente é necessário");
}
else if($('#Descricao1').val() == "")
{
alert("Observação é necessária");
}
else
{
$.ajax({
url:".conexao9",
method:"POST",
data:$('#insert_form7').serialize()
,
beforeSend:function(){
$('#insert3').val("Inserting");
},
success:function(data){
$('#insert_form7')[0].reset();
$('#add_data_Modal3').modal('hide');
$('#employee_table').html(data);
location.reload("add_data_Modal3");
}
});
}
});
});
</script>
I created a variable with the current date that compares with the date of the record. I created an empty disabled variable. There I put this disabled variable in the link. If the date is different than the current date you put the disabled variable filled.The problem is that the button stays in the same asset.
Firstly your code is vulnerable to sql injection attacks and you should use prepared statements. Then you have some syntax errors on your code. The lines $output; are useless, delete them. Change "$disabled" to '.$disabled'. and put ?> before your <script> tag.
I want to validate value given by user in the text box using jsp
How can I validate Textbox? code given below.
I created one table and Text box generated in row. I want to validate that text box. User can not enter data less than {name="min[<%=i%>]"} in {name="max[<%=i%>]"} Text box. And Data Betwwen min and max to {name="normal[<%=i%>]"} Textbox
<%
Connection con = null;
con = connection.createConnection();
System.out.println("Printing connection object "+con);
Statement statement=con.createStatement();
String sql ="SELECT *
FROM `itemfile`
WHERE IT_ITEMGRP IN ('A', 'K', 'T','M')";
rs = statement.executeQuery(sql);
%>
<form class="form-horizontal" action="dailyEntryServ" name="registration" id="registration" method="get">
<h4><u>દૈનિક એન્ટ્રી</u></h4>
<h4 align="right">
<span style="color:red">
<b>
<%=(request.getAttribute("errMessage") == null) ? "": request.getAttribute("errMessage")%>
</b>
</span>
<br/>
<span style="color:green">
<b>
<%=(request.getAttribute("successMessage") == null) ? "": request.getAttribute("successMessage")%>
</b>
</span>
</h4>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-sm-4" for="date">Select Date:</label>
<div class="col-sm-3">
<input class="datepicker" data-date-format="yyyy-mm-dd" placeholder="yyyy-mm-dd" id="date" name="date" value="<%=strDate%>">
</div>
</div>
<table align="center" cellpadding="" cellspacing="" border="1" id="oTable" width="100%">
<thead>
<tr>
<th>ક્રમ નં</th>
<th>જણસી નું નામ</th>
<th>ઓછામાં ઓછો ભાવ(કવી.)</th>
<th>વધુમાં વધુ ભાવ(કવી.)</th>
<th>મોડલ ભાવ(કવી.)</th>
<th>આવક</th>
</tr>
</thead><%
int i=0;
while(rs.next()) {
String code=rs.getString("IT_ITEMCOD");
String id=rs.getString("IT_ITEMSUB");
//String grp=rs.getString("IT_ITEMGRP");
String good=code+"."+id;
%><tr>
<td><%=++i%></td>
<td>
<label style="font-family: gujratilys;font-weight: normal;font-size: 14px;">
<%=rs.getString("IT_ITMSNMG") %>
</label>
</td>
<td>
<input type="hidden" width="100%" id="cols[<%=i%>]" name="cols[<%=i%>]" value="<%=good %>" />
<input type="text" width="100%" id="max[<%=i%>]" name="max[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="min[<%=i%>]" name="min[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="normal[<%=i%>]" name="normal[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="aavak[<%=i%>]" name="aavak[<%=i%>]" value="0"/>
</td>
</tr><%
}
rs.close();
%><tr>
<input type="hidden" id="size" value=" <%=i%>" name="size" />
<td colspan="6" align="center">
<button type="submit" class="btn btn-success">Submit</button>
</td>
</tr>
<tbody>
</tbody>
</table>
</div>
</form>
How to add dynamically a row to a table in the ejs using jquery?
I have a table that i am rendering in the ejs template. Now in the template, i have a bootstrap nav tabs. In each tab there is a table which is being rendered in the ejs. Now there is Add button in the table head and if i click it, it will simply add a new row to the table. My template code for the tab content is:
<div class="tab-content tab-content-bordered">
<%for(var i=0; i<entityName.length;i++){%>
<% if(entityName[i].entityType === "clientUpload"){ %>
<div class="tab-pane attr-detail-<%= entityName[i].displayName%> fade <% if (i === 0) { %>in active<% } %>" id="<%=entityName[i].displayName%>">
<table class="table">
<thead>
<tr>
<th>Attribute Name</th>
<th>Display Name</th>
<th>Description</th>
<th>Is Required?</th>
<th>Allow Nulls?</th>
<th>Data Type</th>
<th>Length</th>
<th>Precision</th>
<th>Scale</th>
<th><Button class="bt-add-row btn btn-primary">Add</Button></th>
</tr>
</thead>
<tbody>
<% for(var j=0; j<entityName[i].attributes.length;j++){%>
<tr class="attr-row">
<td>
<div class="form-group no-margin">
<input class="form-control input-attr-name" type="text" name="attrName" size="8" placeholder="Attribute Name" value="<%= entityName[i].attributes[j].name %>" />
</div>
</td>
<td>
<div class="form-group no-margin">
<input class="form-control input-disp-name" type="text" name="dispName" size="8" placeholder="Display Name" value="<%= entityName[i].attributes[j].displayName %>" />
</div>
</td>
<td>
<div class="form-group no-margin">
<textarea class="form-control input-description expand" rows="1" cols="15" name="description" placeholder="Description" style="resize:none;overflow:hidden" onfocus="this.rows=3;this.style.overflow='auto'" onfocusout="this.rows=1;this.style.overflow='hidden';"><%= entityName[i].attributes[j].description %></textarea>
</div>
</td>
<td>
<div class="form-group no-margin">
<div class="form-control checkbox valign-middle no-border" style="display:table-cell">
<label class="px-single">
<input type="checkbox" class="input-is-required px" <% if(entityName[i].attributes[j].isRequired){%> checked <%}%>/>
<span class="lbl"></span>
</label>
</div>
</div>
</td>
<td>
<div class="form-group no-margin">
<div class="form-control checkbox valign-middle no-border" style="display:table-cell">
<label class="px-single">
<input type="checkbox" class="input-allow-null px"<% if (entityName[i].attributes[j].isRequired) { %>disabled<% } %> <% if (entityName[i].attributes[j].isNullable) { %>checked<% } %> />
<span class="lbl"></span>
</label>
</div>
</div>
</td>
<td>
<div class="form-group no-margin">
<select class="selectpicker form-control select-attr-type" data-width="auto" data-container="#main-content">
<% dataTypeList.each(function(dataType, index) { %>
<option value="<%= dataType.name %>" <% if (dataType.name.toLowerCase() === entityName[i].attributes[j].attributeType) { %>selected="selected"<% } %>><%= dataType.name %></option>
<% }); %>
</select>
</div>
</td>
<td>
<div class="form-group no-margin" style="display: <% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "text") {%>none<%}%> ">
<input type="text" name="length" size="5" placeholder="Length" value="<%=entityName[i].attributes.length === undefined ? settings.DEFAULT_TEXT_LENGTH : entityName[i].attributes.length %>" class="form-control input-length" />
</div>
</td>
<td>
<div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
<input type="text" name="precision" size="1" placeholder="Precision" value="<%= entityName[i].attributes[j].precision === undefined ? settings.DEFAULT_DECIMAL_PRECISION : entityName[i].attributes[j].precision %>" class="form-control input-precision"/>
</div>
</td>
<td>
<div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
<input type="text" name="scale" size="1" placeholder="Scale" value="<%= entityName[i].attributes[j].scale === undefined ? settings.DEFAULT_DECIMAL_SCALE : entityName[i].attributes[j].scale %>" class="form-control input-scale" />
</div>
</td>
<td>
<div class="form-group no-margin">
<Button class="bt-remove-row btn">Remove</Button>
</div>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
<%}%>
<%}%>
</div>
Here i just want to add a row to the table. But this time the default values will be there in the row and user will edit it. How can i add a row using jquery without writing the all <td>s in the <tr> in the append method?? Is there any simple way to just copy a row and use default value and add after the last row in the table??
Using EJS and jQuery the most practical way is to store a local variable called default_row. which will contains all td inside of this default row (tr). Like. var default_row = "<tr> <td> ... <\td> <\tr>" Finally you can use any append function from jQuery. I suggest you last(). Ps. You should use angular framework. This simple task become easy in angularjs.
I have used canJs. It's very much easy using canJs. At first i seperated out the row part in another ejs and then store it in a variable by below code:
var rowItem = can.view.render("templates/attr-tab-row.ejs",{});
And then added with the table body.
var table_body = $(el).closest('div').find('tbody');
table_body.append(rowItem);
Insert after for dynamic row
I have a dynamic adding row button. I can add more Ids and more clients but when I click on the plus it adds them in the top of my page and not after my row. How do I do that? Here is my code :
<b>Dimanche</b> </br><?php echo $date1 ?>
</td>
<!-- numéro de projet du dimanche -->
<td>
<span id="numpro" >
<form method="post" action="" onsubmit="return false;">
<input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/></br>
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</span>
<input onclick="addRow(this.form);" type="button" value="+" />
</td>
</form>
<html>
<div >
<form method="post" >
<div id="itemRows">
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</div>
<p><input type="submit" name="ok" value="Ajouter à la B.D"></p>
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="text" name="client1[]" size="12" class = "client1" id ="client1" disabled value="'+frm.client1.value+'"><input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_client1.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</span>
</td>
</td>
<!-- client du dimanche -->
<td>
<span id="proclient">
<input type="text" name="client1" size="12" class = "client1" id ="client1" disabled />
</span>
</td>
<!-- description du projet de dimanche -->
<td>
<span id="prodesc">
<input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
</span>
</td>
<!-- ddescription de la tache du dimanche -->
<td>
<span id="protache">
<textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
</span>
</td>
<!-- lieu pour dimanche -->
<td>
<span id="prolieu">
<input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
</span>
</td>
<!-- tache -->
<td>
<span id="tache">
<!-- <input type="text" name="tache" size="30" id="tache"class= "tache" /> -->
<!-- début section cobobox tache avec tool tip -->
<label title="Select your state"> <select title="Select your state" id="state" name="state">
<?php
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo ' <option title="';
echo $row['tacName'];
echo '">';
echo $row['tacId'];
echo '</option>'."\n";
$task = array();
//echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
}
?>
</select>
</label>
<!-- Fin section cobobox tache avec tool tip -->
</span>
</td>
<!-- calculter le temps pour le diamnche -->
<td>
<span id="calculTemps">
<input type="number" name="tempsd" size="30" id="temps1"class= "temps" min= "0" max="24" value="0" />
</span>
</td>
EDIT Here a demo of my problem
EDIT Here a demo of my goal I want
Try to use JQuery functions insertAfter and appendTo together with selectors :last or :first.
Common examples: jQuery('<p>').html('Some content').insertAfter('#id_here:last'); jQuery('<p>').html('Some content').appendTo('#itemRows');