2017-06-15 198 views
1

这里是我的情况,我有两个fieldset人会被用户编辑,另一个是隐藏保留fieldset的原始状态,然后在JavaScript onchange将检测的用户改变fieldset中的内容,然后将其与隐藏的fieldset进行比较。 但是,如何检测用户是否更改了fieldset在我目前的代码,我遵循这个指南 How to compare two HTML elements比较两个HTML块,如果它具有相同的内容

但问题是,当与隐藏fieldset

Javascript代码相比,条件返回,改还是不改:

$('#fieldset').on("change", function() { 
     console.log($('#fieldset').html() == $('#fieldsethidden').html()); 
      //fieldset_state = 1; 
    }); 

HTML代码:

显示给用户的字段集:

<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

尝试'的.html()修剪()' –

+0

这是同样的结果。 – user827391012

回答

0

敢肯定,因为他们是你应该用===比较字符串。

像这样:$('#fieldset').html() === $('#fieldsethidden').html()

相关问题