How to disable hide element?

Question

I am currently working on a simple javascript function with show and hide functions. At the same time, I want to validate null value for the hide element which is file type. Unfortunately, in html I used required to validate null function for the hidden element. Therefore, I am looking for how to disable hidden element.

This is javascript function code :

<script>    
    function database_csv(){    
        document.getElementById('send_type').style.display = "none";
        $("#send_type :input").prop("disabled", true);
    }
    function csv_database(){
        document.getElementById('send_type').style.display = "block";
        $("#send_type :input").prop("disabled", false);
    }
</script>

And this is html code :

<form action="confirm_sendemail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" > 
  Subject : <br/>
  <input type="text" name="subject" id="subject" required/> <br/>
  Choose your upload type: <br /> 
  <input type="radio" name="email" id="database" onclick="database_csv()" checked value="databse"/>Database
  <input type="radio" name="email" id="csv" onclick="csv_database()" value="csv"/>CSV<br/>
  <div id="send_type" style="display:none">
    <input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
  </div>
  Content : <br/>
  <textarea name="message" cols="50" rows="10" required></textarea><br/>
  <input type="submit" name="submit" value="Submit"/> 
</form>

Seems to work just fine, what exactly is the issue, and why do you think the input is not disabled ? — adeneo, Mar 31 '14 at 06:23
its cant work when I add "required" to validate file type inside "send_type" div. I cannot proceed to next page. And what I try to work is when click on "database csv()" radio button, "
" tag element should be disable to validate "required". — user3454436, Mar 31 '14 at 06:40
yap. This is what I am using inside my project and I am trying to solve this problem now. — user3454436, Mar 31 '14 at 06:41
A required input that is disabled will not halt the form submit, so that's not the issue, must be something else. — adeneo, Mar 31 '14 at 06:47
Also, do you realize that `document.getElementById('send_type').style.display = "none";` can be replaced with `$('send_type').hide()` and that whole function can be replaced with `$('send_type').hide().find("input").prop("disabled", true);` — jfriend00, Mar 31 '14 at 06:47
but when I remove "required" inside the div and its work fine. So that must be "required" problem i think. — user3454436, Mar 31 '14 at 06:48
i am not using any validation plugin. What i am using is only simple null validation. — user3454436, Mar 31 '14 at 06:49
jfriend00 : what you recommend to me is not function even show/hide also getting problem. — user3454436, Mar 31 '14 at 06:52
jFriend's `send_type` is missing a hash mark `$('#send_type').hide().find("input").prop("disabled", true);` — fny, Mar 31 '14 at 07:10
its still cannot work. Even simple show hide function also cannot work well. — user3454436, Mar 31 '14 at 07:16
your problem is `required` attribute you can remove it from javascript code. I posted my answer below. — CJ Ramki, Mar 31 '14 at 12:24

score 4 · Answer 1 · edited May 23 '17 at 12:11

I think required attribute is your problem. you can remove required attribute from the from jQuery.

Try this code,

<script>
    $('#database').click(function () {
        $('#send_type').hide().children().removeAttr('required');
    });
    $('#csv').click(function () {
        $('#send_type').show().children().attr('required', true);
    });
</script>

SEE THIS WORKING DEMO

NOTE: you are using csv as id for two elements in your HTML markup. That is not good. In client side, if you access your csv file upload using id, script will consider first csv id only. I mean you already used csv id in your radio button. so, it will take that value only.

UPDATE: You are using two separate function for each radio button. To avoid this you can use this code.

$('input[type=radio]').click(function () {
    if (this.id == 'database') $('#send_type').hide().children().removeAttr('required');
    if (this.id == 'csv') $('#send_type').show().children().attr('required', true);
});

Handling event from HTML is better than using even handlers from js.. you can refer this STACKOVERFLOW post. So, I never recommend my codes in that way.

bro. Your code cannot function at all even try at your demo. Btw thanks for your reply. — user3454436, Apr 01 '14 at 01:58
i missed to load jquery lib in my fiddle.. otherwise, its working fine... Check that fiddle now. — CJ Ramki, Apr 01 '14 at 05:21

fny · Accepted Answer · 2014-04-01T03:28:54.863

1

HTML5 validations such as required do not run on disabled input elements, so that's not the cause of your issue.

If the code you've provided is precise, it looks like your jQuery selector targeting the form input is invalid:

// You have an extra colon before "input"!
$("#send_type :input").prop("disabled", true);

// This should work
$("#send_type input").prop("disabled", true);

Overall, you can clean up your code by using jQuery's native show/hide and chaining your methods as suggested in the comments by jFriend:

$('#send_type').hide().find('input').prop('disabled', true);

The full code you require is as follows:

function database_csv(){    
  $('#send_type').hide().find('input').prop('disabled', true);
}
function csv_database(){
  $('#send_type').show().find('input').prop('disabled', false);
}

Also, if you want to have database preselected, you should set the file input field as disabled by default to prevent the required validation from being triggered:

<input name="csv" type="file" id="csv" accept=".csv" required disabled />

Here's a fully working example:

http://jsbin.com/yinil/2/edit

edited Apr 01 '14 at 03:28

answered Mar 31 '14 at 07:16

fny

31,255
16
96
127

after i used this code, show hide button cannot be done. when I click on CSV, there has no response. – user3454436 Mar 31 '14 at 07:19
I think you're using the code I provided incorrectly. I've added a working example for clarity. – fny Mar 31 '14 at 14:39
your code work fine at jsbin but when i apply into my project it cannot run properly. – user3454436 Apr 01 '14 at 02:01
bro. I found the problem. In my html code, I had pre-checked database as my value. But it cannot get pre-checked radio button value. User must click on the radio button one more time then only can work. If user did not click on it, they cannot proceed. You can try on your demo as well. Btw can you help me to solve it? – user3454436 Apr 01 '14 at 02:11
You need to disable the file input field by default by adding a `disabled` attribute. See the updated example. – fny Apr 01 '14 at 03:29

How to disable hide element?

2 Answers2