Hide conditionally button with CSS or Javascript

Question

I have a page with code who look like this:

<form id="editform" class="left " method="post" action="edit-account.php" name="editform">
<ul>
<li id="row_first">
<label for="first">First name</label>
<input id="first" type="text" value="Mike" name="first">
</li>
<li id="row_last">
<label for="last">Last name</label>
<input id="last" type="text" value="" name="last">
</li>
</ul>
<label for="submit_button"> </label>
<input id="submit_button" class="button" type="submit" value="Modify user profile" name="submit_button">
<input type="hidden" name="submitted" value="true">
</form>

My goal is to hide the Submit button only IF the field "first" contain the default value "Mike".

In practice if I use this CSS:

#submit_button.button{ display: none; }

this hide well the button but in all case and not only if "Mike" is the default value for field "first".

Any chance to do that using CSS?

Please note I don't have access to HTML page.. I'm allowed only to modify the external CSS file who style the page I'm trying to change.

Alternatively, if you have a Javascript solution, I could normally use that because I have access to an external JS file planned for modify some form element.

With your current HTML structure, there's no possible way to do this with pure CSS. — animuson
– animuson ♦, Commented Apr 20, 2013 at 21:11

Gurpreet Singh · Accepted Answer · 2013-04-21 13:45:54Z

2

CSS is not functional, it is for styling therefore this is not possible in CSS. You need to use JS for this task.

Update:

This JS should work for you:

var element = document.getElementById("first");
var btn = document.getElementById("submit_button"); 

function checkIfMike() {
    if(element.value == "Mike") {
        btn.style.display = "none";
    } else {
        btn.style.display = "block";
    } 
}

checkIfMike();
element.addEventListener("keyup", checkIfMike);

edited Apr 21, 2013 at 13:45

answered Apr 20, 2013 at 21:15

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dotcom22 Over a year ago

I have the possibility to modify an external JS file who can have effect on the form. Have you a JS suggestion code please ?

dotcom22 Over a year ago

Many thank!! Your solution work well :-) I was able also to add by myself element.readOnly = true; for disable the field "first" and avoid button to returning back if user change field value. All the best. Cheers

Sampson · Accepted Answer · 2013-04-20 22:54:25Z

1

While CSS does allow you to target sibling elements based upon their attribute values, this would only get you half-way to your solution. For instance, the following will hide your submit button:

#first[value='Mike'] ~ #submit_button {
    display: none;
}

This will turn the display property to none for any #submit_button element in the same container as any #first element whose value is Mike. This works for initially hiding the button, as well as hiding it when the user types in the key name. But, lacking a not-equals operator, CSS doesn't help us restore visibility when the value is not the target name.

Our other options is to use JavaScript. We would create a function that would perform this evaluation, and show or hide the submit button based upon the value of the first name field:

(function () {

    "use strict";

    // Reference all of our key elements, and values
    var name = "Mike",
        form = document.getElementById("editform"),
        inpt = document.getElementById("first"),
        sbmt = document.getElementById("submit_button");

    // A function to toggle visibility based on field value
    function setVisibility() {
        sbmt.style.display = (inpt.value.trim() === name) ? "none" : "";
    }

    // Call this function whenever input occurs on the field
    form.addEventListener("input", setVisibility, false);

    // Fire it once upon load for initial evaluation
    setVisibility();

}());

This should get you where you're wanting to be with regards to hiding/showing the submit button based upon the user-provided data.

Fiddle: http://jsfiddle.net/jonathansampson/j2MRQ/

edited Apr 20, 2013 at 22:54

answered Apr 20, 2013 at 21:16

Sampson

269k76 gold badges546 silver badges570 bronze badges

12 Comments

animuson Over a year ago

Well, technically, if the input weren't inside a list item, he could do input#first[value="Mike"] ~ #submit_button.button { display: none } which would hide the submit button whenever the default value was "Mike" which I believe is what he wants (he does say default, not current). But alas, he's incapable of changing the HTML.

Sampson Over a year ago

@animuson Correct. Sibling elements do enjoy an advantage here. Great point

dotcom22 Over a year ago

@animuson The solution you make mention here was the one I thinking but I was unable to find the correct syntax. If this is not possible to apply due to the fact the element is inside list item, so it seem I'm stuck :-(

Sampson Over a year ago

@animuson After some testing, it seems that that solution wouldn't work either. Once the submit is hidden, values other than "Mike" wouldn't result in it being visible again. And to my knowledge, there isn't a != attribute selector.

animuson Over a year ago

@JonathanSampson: I know. It only works for the default state. It matches the value="Mike" which doesn't change dynamically.

|

Collectives™ on Stack Overflow

Hide conditionally button with CSS or Javascript

2 Answers 2

2 Comments

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related