以下是我的情况我有两个fieldset
一个将由用户编辑,另一个隐藏以保留fieldset
的原始状态然后在javascript onchange
将检测到如果用户更改fieldset
中的内容,则会将其与隐藏的fieldset
进行比较。 但是如何检测用户是否更改了fieldset
?在我当前的代码中我遵循了本指南
How to compare two HTML elements
但问题是,与隐藏fieldset
相比,条件正在返回 false ,更改或未更改
Javascript代码:
$('#fieldset').on("change", function() {
console.log( $('#fieldset').html() == $('#fieldsethidden').html() );
//fieldset_state = 1;
});
HTML code:
显示给用户的字段集:
<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 class="col-lg-12" style="border: 2px groove; padding:1%; margin-bottom:2%;display:none;" id="fieldsethidden">
</fieldset>
答案 0 :(得分:0)
非常确定,因为它们是字符串,所以您应该使用===
进行比较。
像这样:$('#fieldset').html() === $('#fieldsethidden').html()