Here is my situation I have two fieldset one will be edited by the user and the other one is hidden to preserve the original state of the fieldset then in javascript onchange will detect if the user change something in the fieldset which will then be compared to the hidden fieldset. But how do I detect if the user changed the fieldset? In my current code I followed this guide
How to compare two HTML elements
But the problem is the condition is returning false, changed or not changed when compared with the hidden fieldset
Javascript code:
$('#fieldset').on("change", function() {
console.log( $('#fieldset').html() == $('#fieldsethidden').html() );
//fieldset_state = 1;
});
HTML code:
fieldset displayed to the user:
<fieldset class="col-lg-12" style="border: 2px groove; padding:1%; margin-bottom:2%;" id="fieldset">
<!-- heading -->
<table class="table">
<colgroup>
<col span="1" style="width: 40%;">
<col span="1" style="width: 35%;">
<col span="1" style="width: 25%;">
</colgroup>
<thead>
<tr>
<th>Parameters</th>
<th>Specifications</th>
<th>Analyst</th>
</tr>
</thead>
</table>
<!-- physical test -->
<table class="table" id="physical_table">
<colgroup>
<col span="1" style="width: 40%;">
<col span="1" style="width: 35%;">
<col span="1" style="width: 25%;">
</colgroup>
</colgroup>
<h5 style="padding-left:8px;font-weight: bold;">A. Physical Test</h5>
<hr style="margin-bottom:0px;margin-top:0px;">
<tbody>
<?php
foreach($physical_tests as $physical_test){
if($fg_status == 9 || $fg_status == 8)
$phy_id = $physical_test->physical_test_id;
else
$phy_id = $physical_test->id;
$operation = $physical_test->operation;
$range1 = $physical_test->first_range;
$range2 = $physical_test->second_range;
$unit = $physical_test->selected_unit;
$specification = '';
if ($unit == 'None') {
$unit = '';
}
if($physical_test->type == 'Text'){
$specification = $physical_test->specifications;
}else{
// located at helpers.php
$specification = generate_specs($operation, $range1, $range2, $unit);
}
?>
<tr id = "physical{{$physical_test->id}}">
<td ><p class="quality-font">{{$physical_test->name}}</p></td>
<td><p class="quality-font">{{$specification}}</p></td>
<td>
<input placeholder="{{$physical_test->analyst_name}}" value="{{$physical_test->analyst_name}}" list="phy_analyst" type="text" name="physical_analyst[]" id="physical_analyst_{{$phy_id}}" class="form-control physical_analyst" placeholder = "Enter name to find Analyst">
<div id="phy_analyst_message_{{$phy_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
<datalist id="phy_analyst">
@if(count($analysts))
@foreach($analysts as $analyst)
<option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}"></option>
@endforeach
@endif
</datalist>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<!-- chemical test -->
<table class="table" id="chemical_table">
<colgroup>
<col span="1" style="width: 40%;">
<col span="1" style="width: 35%;">
<col span="1" style="width: 25%;">
</colgroup>
<h5 style="padding-left:8px;font-weight: bold;">B. Chemical Test</h5>
<hr style="margin-bottom:0px;margin-top:0px;">
<tbody>
<?php
foreach($chemical_tests as $chemical_test){
if($fg_status == 9 || $fg_status == 8)
$chem_id = $chemical_test->chemical_test_id;
else
$chem_id = $chemical_test->id;
$operation = $chemical_test->operation;
$range1 = $chemical_test->first_range;
$range2 = $chemical_test->second_range;
$unit = $chemical_test->selected_unit;
$c1 = $chemical_test->claim1;
$cu1 = $chemical_test->claim_unit1;
$c2 = $chemical_test->claim2;
$cu2 = $chemical_test->claim_unit2;
$specification = '';
if ($unit == 'None') {
$unit = '';
}
if($chemical_test->type == 'Text'){
$specification = $chemical_test->specifications;
}else{
// located at helpers.php
$specification = generate_specs($operation, $range1, $range2, $unit);
$label_claim = generate_label_claim($c1,$cu1,$c2,$cu2);
$specification = $specification . $label_claim;
}
?>
<tr id = "chemical{{$chemical_test->id}}">
<td ><p class="quality-font">{{$chemical_test->name}}</p></td>
<td><p class="quality-font"><?= $specification ?></p></td>
<td>
<input placeholder="{{$chemical_test->analyst_name}}" value="{{$chemical_test->analyst_name}}" list="chem_analyst" type="text" name="chemical_analyst[]" id="chemical_analyst_{{$chem_id}}" class="form-control chemical_analyst" placeholder = "Enter name to find Analyst">
<div id="chem_analyst_message_{{$chem_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
<datalist id="chem_analyst">
@if(count($analysts))
@foreach($analysts as $analyst)
<option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}">
@endforeach
@endif
</datalist>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<!-- microbiological test -->
<table class="table" id="micro_table">
<colgroup>
<col span="1" style="width: 40%;">
<col span="1" style="width: 35%;">
<col span="1" style="width: 25%;">
</colgroup>
<h5 style="padding-left:8px;font-weight: bold;">C. Microbiological Test</h5>
<hr style="margin-bottom:0px;margin-top:0px;">
<tbody>
<?php
foreach($micro_tests as $micro_test){
if($fg_status == 9 || $fg_status == 8)
$micro_id = $micro_test->micro_test_id;
else
$micro_id = $micro_test->id;
$operation = $micro_test->operation;
$range1 = $micro_test->first_range;
$range2 = $micro_test->second_range;
$unit = $micro_test->selected_unit;
$specification = '';
if ($unit == 'None') {
$unit = '';
}
if($micro_test->type == 'Text'){
$specification = $micro_test->specifications;
}else{
// located at helpers.php
$specification = generate_specs($operation, $range1, $range2, $unit);
}
?>
<tr id = "micro{{$micro_test->id}}">
<td ><p class="quality-font">{{$micro_test->name}}</p></td>
<td><p class="quality-font">{{$specification}}</p></td>
<td>
<input placeholder="{{$micro_test->analyst_name}}" value="{{$micro_test->analyst_name}}" list="micro_analyst" type="text" name="physical_analyst[]" id="micro_analyst_{{$micro_id}}" class="form-control micro_analyst" placeholder = "Enter name to find Analyst">
<div id="micro_analyst_message_{{$micro_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
<datalist id="micro_analyst">
@if(count($analysts))
@foreach($analysts as $analyst)
<option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}">
@endforeach
@endif
</datalist>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="form-group col-lg-12">
<label for="packagingSpecification" class="control-label col-lg-3">Packaging Specification</label>
<div class="col-lg-5">
<input type="text"
name="packagingSpecification"
id="packagingSpecification"
class="form-control"
placeholder="Packaging Specification"
value="{{$fg_packaging_spec}}"
disabled="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group col-lg-12">
<label for="claimedShelfLife" class="control-label col-lg-3">Claimed Shelf Life</label>
<div class="col-lg-2" style="padding-right:5px;">
<input type="number"
name="claimedShelfLife"
id="claimedShelfLife"
class="form-control"
placeholder="Ex. 24"
value="{{$fg_shelf_life}}"
disabled>
<div class="help-block with-errors"></div>
</div>
<div class="col-lg-1" style="margin-top:6px;padding-left:0px;" class="pull-left">months</div>
</div>
<div class="form-group col-lg-12">
<label for="storageInformation" class="control-label col-lg-3">Storage Information</label>
<div class="col-lg-5">
<input type="text"
name="storageInformation"
id="storageInformation"
class="form-control"
placeholder="Storage Information"
value="{{$fg_storage_info}}"
disabled>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group col-lg-12">
<label for="remarks" class="control-label col-lg-3">Remarks / Special Instructions</label>
<div class="col-lg-5">
<textarea rows="4" cols="53" id="remarks" name="remarks" placeholder="Enter remarks or special instructions ...">{{$fg_remarks}}</textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</fieldset>
fieldset hidden (the same but display:none;)
<fieldset class="col-lg-12" style="border: 2px groove; padding:1%; margin-bottom:2%;display:none;" id="fieldsethidden">
</fieldset>
