Hide Element with JS due to two conditions

Question

I'm not that familiar with JavaScript. What I was doing so far was to hide a part of my form (see below: "Memo"), when someone changed an input-text-field via onchange (field-name: "ordernumber").

Therefore I'm using this funktion:

<script language="JavaScript" type="text/javascript">
function takeawayfield()
{   dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>

This works pretty fine, but now I'd like to add another condition from a dropdown (select option). In other words: When you change ordernumber AND select a certain option, "Memo" should disappear. I tried a lot, but I can't get it to work properly. This was my latest try:

function takeawayfield()
{   dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}

Two things are not working right with this one: It performs when only one of the conditions is true (although I used &&) and it seems to be unrelevant which option from the dropdown ist selected. Right now it performs with every option, but it should only perform with "sys1".

BTW: I added onchange="javascript:takeawayfield()" to both of the affected form-elements (input text and select option). I guess that's right?

What am I doing wrong?

Thanks in advance!

EDIT:

Here are the html-tags:

<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">

<select name="system" id="system" onchange="javascript:takeawayfield()"> <option value="sys1">System 1</option> <option value="sys2">System 2</option> <option value="sys3">System 3</option> </select>

Answer 1

Try this:

var dok = 0,
    initialValue = "",
    ordernumber = null,
    system = null,
    memo = null;

window.onload = function() {
    // get dom objects
    ordernumber = document.getElementById("ordernumber");
    system = document.getElementById("system");
    memo = document.getElementById("Memo");

    // set initial value
    initialValue = ordernumber.value;
};

function takeawayfield() {
    if (ordernumber.value != initialValue && system.value == "sys1") {
        dok = 0;
        memo.style.display = "none";
    } else {
        dok = 1;
        memo.style.display = "inline";
    }
};

jsFiddle

Answer 2

If you want to react to changes by the user after the page has loaded you could listen to the keyup event of the input box and the dropdown.

Here's an example:

window.onload = function() {
    document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
    document.getElementById("system").addEventListener('change', takeawayfield, false);

    function takeawayfield()
    {   
        if (document.getElementById("system").value == "sys1") {
            toggleMemo(false);
        }
        else {
            toggleMemo(true);
        }
    }

    function toggleMemo(show) {
        var memo = document.getElementById("Memo");
        if (show) {
            memo.style.display = "inline";
        }
        else {
            memo.style.display = "none";
        }
    }
};

http://jsfiddle.net/je5a7/

Answer 3

If your dropdown (select/option) have values in the option tag then the code below should be work fine. (after the user selects)

1. The select for example:

     <select id="system">
        <option value="sys1">system 1</option>
     </select>
   

2. Your code

   
       document.getElementById("system").value == "sys1"
   

3. OR you change your code:

   
       if (document.getElementById("ordernumber").changed == true) dok=1;
       else dok=0;
       if (document.getElementById("system").value == "sys1") dok=1
       else dok=0;