Javascript - Difference between two dates - javascript

I want calculate the difference between two dates write in two filed of form page. Below the html code:
<!-- CALENDARIO -->
<script src="js/datetimepicker_css.js"></script>
<!-- CALENDARIO -->
Altro codice html
<tr>
<td width="306" valign="top">
<div class="col-xs-8">
Data inizio<br>
<div class="input-group">
<input type="text" class="form-control" name="data_inizio" id="date_validation1" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation1','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Data fine<br>
<div class="input-group">
<input type="text" class="form-control" name="data_fine" id="date_validation2" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation2','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Numro giorni<br>
<input type="text" class="form-control" name="numero_giorni"></div>
</td>
</tr>
How to calculate the difference between two dates and write the difference in the filed name="days"?
Thanks

to calculate difference between 2 dates and assign the value to another textbox
<input type="text" id="val1"/>
<input type="text" id="val2"/>
<input type="text" id="val3" />
<script>
function myFun() {
var x2=document.getElementById("val1").value;
var x3=document.getElementById("val2").value;
var msPerDay = 1000*60*60*24;
d1=new Date(x2);
d2=new Date(x3);
var x4=document.getElementById("val3");
var dd=( ((d1 - d2) / msPerDay).toFixed(0)+"days" );
x4.value=dd;
}
</script>
<input type="submit" id="myid" onclick="myFun()" value="get difference"/>

Related

Enter multiple data from MySQL into multiple inputs with select option

I hope you can help me, I have a button which adds a new row with a select option for each row, the idea is to select the invoices of each row in the different inputs, the problem is that only the first row works, in the others rows no longer allows me to insert different records
<tbody>
<tr id="venta0">
<td>
<select name="products[]" class="form-control" id="opciones"
onchange='cambioOpciones();'>
#foreach ($ventas1 as $ventas)
<option
value="{{$ventas->FECHA}}_{{$ventas->MONEDA}}_{{$ventas->NUMCTA}}_{{$ventas->FAMILIA}}_{{$ventas->CONCEPTO}}_{{$ventas->FACTURA}}_{{$ventas->DENOMINACION_SOCIAL}}_{{$ventas->VENDEDOR}}">
{{ $ventas->FACTURA }}---{{$ventas->CONCEPTO }}
</option>
#endforeach
</select>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="fecha" placeholder="fecha" readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="moneda" placeholder="fecha"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="numcta" placeholder="numcta"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-7">
<input type="text" class="form-control" id="familia" placeholder="familia"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="Concepto" placeholder="concepto"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="showId" placeholder="factura"
readonly>
</div>
</td>
<td>
<div class="form-group col-xs-2">
<input type="text" class="form-control" id="denominacion"
placeholder="denominacion" readonly>
</div>
</td>
<td>
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="vendedor" placeholder="vendedor"
readonly>
</div>
</td>
</tr>
<tr id="venta1">
</tbody>
My code in JavaScript
<script>
function cambioOpciones(e) {
const combo = document.getElementById('opciones'),
[FECHA,MONEDA,NUMCTA,FAMILIA,CONCEPTO,FACTURA,DENOMINACION_SOCIAL,VENDEDOR] = document.getElementById('opciones').value.split('_');
document.getElementById('fecha').value = FECHA;
document.getElementById('moneda').value = MONEDA;
document.getElementById('numcta').value = NUMCTA;
document.getElementById('familia').value = FAMILIA;
document.getElementById('Concepto').value = CONCEPTO;
document.getElementById('showId').value = FACTURA;
document.getElementById('denominacion').value = DENOMINACION_SOCIAL;
document.getElementById('vendedor').value = VENDEDOR;
}
</script>
<script>
$(document).ready(function() {
let row_number = 1;
$("#add_row").click(function(e) {
e.preventDefault();
let new_row_number = row_number - 1;
$('#venta' + row_number).html($('#venta' + new_row_number).html()).find('td:first-child');
$('#ventas_table').append('<tr id="venta' + (row_number + 1) + '"></tr>');
row_number++;
});
$("#delete_row").click(function(e) {
e.preventDefault();
if (row_number > 1) {
$("#venta" + (row_number - 1)).html('');
row_number--;
}
});
});
</script>
enter image description here

Sending an empty line to the php page

I have the following form where we have the possibility to add the necessary lines as follows:
function addAgregado(){
$("#riscos").append("<div>"+$("#riscoform").html()+"</div>");
}
function inserir_agregado()
{
var IdAgreg = [];
$("input[name='IdAgreg[]']").each(function() {IdAgreg.push(this.value)});
var Parent = [];
$("input[name='Parent[]']").each(function() {Parent.push(this.value)});
var ParentNome = [];
$("input[name='ParentNome[]']").each(function() {ParentNome.push(this.value)});
var ParentIdade = [];
$("input[name='ParentIdade[]']").each(function() {ParentIdade.push(this.value)});
var dadosajax = {
'contribuinte' : $("#contribuinte").val(),
'IdAgreg[]' : IdAgreg,
'Parent[]' : Parent,
'ParentNome[]' : ParentNome,
'ParentIdade[]' : ParentIdade
};
$.ajax({
url: 'regagregado.php',
type: 'POST',
cache: false,
data: dadosajax,
error: function(){
Swal.fire("Erro!", "Tente novamente. Caso persista o erro, contatar Administrador!", "error");
},
success: function(result)
{
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs_firstname field hs-form-field">
<label for="educacao">Composição do Agregado Familiar (Parentesco, Nome e Idade) <span style="color: red;">*</span></label>
<button type="button" class="hs-button primary large" onclick="addAgregado()" >Adicionar Familiar</button>
</div>
<div class="hs_firstname field hs-form-field" id="riscos">
</div>
<div id="riscoform" hidden>
<table class="campo" cellspacing="10">
<tr>
<td style="display: none;">
<div class="hs_firstname field hs-form-field">
<label for="IdAgreg">Id </label>
<input name="IdAgreg[]" type="text" >
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="Parent">Parentesco </label>
<input name="Parent[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentNome">Nome </label>
<input name="ParentNome[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentIdade">Idade </label>
<input name="ParentIdade[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
</tr>
</table>
</div>
<input class="hs-button primary large action-button visivel" type="button" onclick="inserir_agregado();" value="Submeter">
All the code is working and being inserted in the database.
But I have a problem, whenever I insert it into the database, always insert a blank line. Example when filling two lines:
contribuinte: xxxxxxxxx IdAgreg[]: IdAgreg[]: IdAgreg[]: Parent[]:
Pai Parent[]: Mae Parent[]: ParentNome[]: Bruno ParentNome[]: Monica
ParentNome[]: ParentIdade[]: 37 ParentIdade[]: 33 ParentIdade[]:
In this example I only filled in two lines, but when sending to the page regagregado.php sends an empty line. What is the reason?
I change your .each() function and pass $(this).val() instead.
and Console.log the result.
Example below.
function addAgregado() {
$("#riscos").append("<div>" + $("#riscoform").html() + "</div>");
}
function inserir_agregado() {
var IdAgreg = [];
$("input[name='IdAgreg[]']").each(function () {
IdAgreg.push($(this).val());
});
var Parent = [];
$("input[name='Parent[]']").each(function () {
Parent.push($(this).val());
});
var ParentNome = [];
$("input[name='ParentNome[]']").each(function () {
ParentNome.push($(this).val());
});
var ParentIdade = [];
$("input[name='ParentIdade[]']").each(function () {
ParentIdade.push($(this).val());
});
var dadosajax = {
contribuinte: $("#contribuinte").val(),
"IdAgreg[]": IdAgreg,
"Parent[]": Parent,
"ParentNome[]": ParentNome,
"ParentIdade[]": ParentIdade,
};
console.log(dadosajax);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs_firstname field hs-form-field">
<label for="educacao"
>Composição do Agregado Familiar (Parentesco, Nome e Idade)
<span style="color: red">*</span></label
>
<button type="button" class="hs-button primary large" onclick="addAgregado()">
Adicionar Familiar
</button>
</div>
<div class="hs_firstname field hs-form-field" id="riscos"></div>
<div id="riscoform">
<table class="campo" cellspacing="10">
<tr>
<td>
<div class="hs_firstname field hs-form-field">
<label for="IdAgreg">Id </label>
<input name="IdAgreg[]" type="text" />
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="Parent">Parentesco </label>
<input
name="Parent[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentNome">Nome </label>
<input
name="ParentNome[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentIdade">Idade </label>
<input
name="ParentIdade[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
</tr>
</table>
</div>
<input
class="hs-button primary large action-button visivel"
type="button"
onclick="inserir_agregado();"
value="Submeter"
/>

Problem loading JS when creating and modifying an element

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.
In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

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>

jquery how to detect current input id

i have a table that generated from yii2, i want to make a tabular input but before sending submit, there are a client validation to the input field. Consider i dont know the input id, because it is generated by yii2. Here's the code snippet of first row
<tr class="kv-tabform-row" data-key="4">
<td class="kv-align-center kv-align-middle">1</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id">
<input type="hidden" id="kegbulan-4-id" class="form-control" name="KegBulan[4][id]" value="4">
<div class="help-block"></div>
</div>
</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id_keg_ta_uk required">
<input type="hidden" id="kegbulan-4-id_keg_ta_uk" class="form-control" name="KegBulan[4][id_keg_ta_uk]" value="6">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-middle" style="width:300px;">Pengadaan Barang Kuasi, Buku Uji, Plat Uji dan Stiker Uji</td>
<td class="kv-align-middle">
<input type="text" id="kegbulan-4-anggaran" class="anggaran" name="KegBulan-[4][anggaran]" value="300,000,000" disabled="disabled" style="width:100px;"></td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-sp2d required">
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos()">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_sp2d required">
<input type="text" id="kegbulan-4-persen_sp2d" class="form-control" name="KegBulan[4][persen_sp2d]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-spj required">
<input type="text" id="kegbulan-4-spj" class="form-control" name="KegBulan[4][spj]" value="680000">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_spj required">
<input type="text" id="kegbulan-4-persen_spj" class="form-control" name="KegBulan[4][persen_spj]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-target required">
<input type="text" id="kegbulan-4-target" class="form-control" name="KegBulan[4][target]" value="0">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-pfisik required">
<input type="text" id="kegbulan-4-pfisik" class="form-control" name="KegBulan[4][pfisik]" value="10">
<div class="help-block"></div>
</div>
</td>
<td class="skip-export kv-align-center kv-align-middle" style="width:60px;"><a href="/yii2/yii-application/frontend/web/keg-bulan/view?id=4" title="View" data-pjax="0">
<span class="glyphicon glyphicon-eye-open"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/update?id=4" title="Update" data-pjax="0" style="display:none;">
<span class="glyphicon glyphicon-pencil"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/delete?id=4" title="Delete" data-confirm="Are you sure to delete this item?" data-method="post" data-pjax="0">
<span class="glyphicon glyphicon-trash"></span></a></td>
<td class="skip-export kv-align-center kv-align-middle kv-row-select" style="width:50px;">
<input type="checkbox" name="selection[]" value="4"></td>
</tr>
screenshoot : http://www.imagebam.com/image/569de2398154258
the input sp2d will check input anggaran and do some validation if (sp2d > anggaran) then "sp2d exceed anggaran limit"
Here the initial javascript function to check that function is triggered via onchange
function tesbos(){
var sp2d = $(".sp2d").attr("id");
console.log(sp2d);
}
when i go to row no 2 in sp2d input, still when i check my console log, it still print the sp2d input id of row #1, how to get my input id automatically/dynamically when i go to any row? any help would be appreciated
Assuming you can change the markup, you need to pass the element refernce to the click handler
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos(this)">
then
function tesbos(el) {
alert(el.id)
}
But I would recommend using jQuery event handlers instead of inlined one, so remove onchange="" from the markup
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000">
then
jQuery(function($){
$(".sp2d").change(function(){
alert(this.id)
})
})
If I understand correctly, each row of your table includes :
an anggaran (budget) field [fixed value]
a sp2d (spend to date) field [user entered].
And you want to perform a check, on change of every sp2d (spend to date) value against its corresponding anggaran (budget) value.
For this, you do not need to know either of the the fields' IDs. Simply find the anggaran field relative to whichever sp2d field triggers the change event.
First, delete onchange="tesbos()" from the HTML.
Then paste this code between <script></script> tags in your document's HEAD (or in a .js file if your code is organised that way).
jQuery(function($) {
$("#containerID").on('change', ".sp2d", tesbos); // where containerID is the ID of eg. a DIV in which the YII table sits
function tesbos() {
var sp2d_value = $(this).val();
var anggaran_value = $(this).closest("tr").find(".anggaran").val();//find the anggaran field in the same row, and grab its value.
console.log(anggaran_value, sp2d_value);
if(sp2d_value > anggaran_value) {
//anggaran is exceeded
...
} else {
//anggaran is not exceeded
...
}
}
});

Categories