CODEWITHSUNDEEP
javascriptcss
dotcom22
dotcom22

Reputation: 259

Hide conditionally button with CSS or Javascript

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.

Upvotes: 2

Views: 5424

Answers (2)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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);

Upvotes: 2

Sampson
Sampson

Reputation: 268374

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/

Upvotes: 1

Related Questions