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>

What is `.changed`? Please also show your html markup for the two fields. — Bergi, Mar 31 '14 at 11:38
I'm not sure I understand what you need, if you have onchange-event, why do you still try to see if the textbox-value is changed? Should you instead check if there actually is a value in the field? Btw I think there is no such thing as "changed". — Esko, Mar 31 '14 at 11:39
And you should [remove those `javascript:` things](http://stackoverflow.com/questions/372159/do-you-ever-need-to-specify-javascript-in-an-onclick) — Bergi, Mar 31 '14 at 12:11
@Bergi: Allright, thank you. I canged it. But unfortunately this wasn't it. Still not working the way it should. — Felix, Mar 31 '14 at 12:45
I didn't say it was the error, it just was *an* error :-) I still don't understand how the code and especially `.changed == true` is *supposed* to work, there is no `.changed` property on DOM elements? — Bergi, Mar 31 '14 at 12:49
Well, I don't know either. What I know is, that it was working, as long as the only condition was if the user changed "ordernumber". Am I connecting the conditions the right way? With '&&'? And is the second condition written correctly? — Felix, Mar 31 '14 at 12:59

friedi · Accepted Answer · 2014-03-31T14:02:25.527

0

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

edited Mar 31 '14 at 14:02

answered Mar 31 '14 at 11:46

friedi

4,350
1
13
19

Looks good, but this does display and undisplay "Memo" everytime I pick another option and everytime i change "ordernumber". What I want is that "Memo" stays hidden when "ordernumber" was changed and when "sys1" is selected from the dropdown. – Felix Mar 31 '14 at 12:24
Do you mean simple the other way around? Or should "Memo" be hidden if "sys1" is selected **or** "ordernumber" was changed? – friedi Mar 31 '14 at 13:53
No, "Memo" should be hidden in the moment "sys1" is selected AND "ordernumber" is changed. – Felix Mar 31 '14 at 14:08
ok alright, then you can checkout my version. I've updated it. – friedi Mar 31 '14 at 14:10
This works perfectly! It will take me some time to understand the syntax on this one, but anyway... Thanks a lot! – Felix Mar 31 '14 at 14:19

system7 · Answer 2 · 2014-03-31T12:33:32.270

0

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

The select for example:

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

Your code


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

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;

edited Mar 31 '14 at 12:33

answered Mar 31 '14 at 11:57

system7

130
1
8

That's what I thought, too. I think the problem is to connect the two conditions (Is "sys1" chosen AND was "ordernumber" changed?) – Felix Mar 31 '14 at 12:19
Oooh, I understand. This line is not continues after the if document.getElementById("ordernumber").changed is false. It not checks the select/option value. So maybe you can try it with "or" condition. – system7 Mar 31 '14 at 12:28
No, unfortunatelythis isn't solving the problem. I thought the operator '&&' means, that all the conditions connected with it must be true, what's actually what I need. – Felix Mar 31 '14 at 12:54
I refreshed my solution. Did you try this? if (document.getElementById("ordernumber").changed == true) dok=1; else dok=0; if (document.getElementById("system").value == "sys1") dok=1 else dok=0; – system7 Mar 31 '14 at 12:57

score 0 · Answer 3 · answered Mar 31 '14 at 12:01

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/

Hide Element with JS due to two conditions

3 Answers3