J'essaie de masquer une table en fonction de la valeur de deux champs, de sorte que si field2 est égal à field1 la table est masquée.

JSfiddle

HTML:

<form>
    Expected Number of Items: <input type="text" value="14" name="totalItems" id="totalItems">
    <p>
    Number of Items Entered: <input type="text" value="14" name="enteredItems" id="enteredItems">
</form> 
<p>
<table border="1" style="width:100%" id="hideThis">
  <tr>
    <td>This should be hidden when "totalItems" equals "enteredItems"</td>
  </tr>
</table>

JS:

function toggleClass(eid, myclass){
    var theEle = document.getElementById(eid);
    var eClass = theEle.className;

    if(eClass.indexOf(myclass) >= 0){
        theEle.className = eClass.replace(myclass, "");
    }else{
        theEle.className  += "" +myclass;
    }
}
2
James Flattery 14 juil. 2015 à 16:25

4 réponses

Meilleure réponse
$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        if( $('#totalItems').val() == $('#enteredItems').val() ){
            $('#hideThis').hide();
        }else{
            $('#hideThis').show();
        }
    });    
});

Si vous devez également vérifier au chargement de la page:

function checkFields(){
    if( $('#totalItems').val() == $('#enteredItems').val() ){
        $('#hideThis').hide();
    }else{
        $('#hideThis').show();
    }
}

$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        checkFields();
    });   
    checkFields();
});

Implémentation JavaScript simple:

function checkFields(){
    if(  document.getElementById('totalItems').value == document.getElementById('enteredItems').value ){
        document.getElementById('hideThis').style.display = 'none';
    }else{
        document.getElementById('hideThis').style.display = 'inline-block';
    }
}

document.getElementById('totalItems').addEventListener('keyup', function (){
   checkFields();
}, false);

document.getElementById('enteredItems').addEventListener('keyup', function (){
   checkFields();
}, false);

checkFields();
1
MazzCris 14 juil. 2015 à 14:45

Vous pouvez lier un événement de frappe pour les deux zones de texte, d'où vous pouvez appeler une fonction pour vérifier si les deux valeurs sont identiques.

compare();
$("#totalItems,#enteredItems").keyup(function() {
    compare();
});
function compare() {
    if ($("#totalItems").val() == $("#enteredItems").val()) {
        $("#hideThis").hide();
    } else {
        $("#hideThis").show();
    }
}

Violon

0
Anoop Joshi 14 juil. 2015 à 13:30

Voici le nouveau JSFiddle

$(document).ready(function () {
    var webpart_ID = 'hideThis';
    var FieldA_id = 'totalItems';
    var FieldB_id = 'enteredItems';
    if ($('#' + FieldA_id).val() === $('#' + FieldB_id).val()) 
        $('#' + webpart_ID).hide();
    else 
        $('#' + webpart_ID).show();
});

Cela marche.

0
shammelburg 14 juil. 2015 à 13:29

Voir les commentaires dans le code.

// Function to hide/show the table based on the values of inputs
function toggleTable() {

  // Hides the table if the values of both input are same
  $('#hideThis').toggle($('#totalItems').val() !== $('#enteredItems').val());
}

$(document).ready(function() {
  // Bind the keyup event on both the inputs, call the function on event
  $('#totalItems, #enteredItems').on('keyup', toggleTable).trigger('keyup');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>Expected Number of Items:
  <input type="text" value="14" name="totalItems" id="totalItems">
  <p>Number of Items Entered:
    <input type="text" value="14" name="enteredItems" id="enteredItems">
</form>
<p>
  <table border="1" style="width:100%" id="hideThis">
    <tr>
      <td>This should be hidden when "totalItems" equals "enteredItems"</td>
    </tr>
  </table>

jsfiddle Demo

3
Tushar 14 juil. 2015 à 13:29