CODEWITHSUNDEEP
jqueryforms
Joe Nobody
Joe Nobody

Reputation: 119

How to disable file input if text field is used

I need to disable a file input if a certain text input is used. Or, disable the text input if the file input is used. However, if the end user changes their mind, then I want to be able to enable the file input if the text input is empty, and vice versa.

This works well to disable the file input if the text input is used. However, if I clear the text input, the file input remains disabled:

    $("#linkurl").on('keyup blur', function(){
        $('#link').attr('disabled', this.value.trim().length);
    });

I tried this, but it obviously didn't work:

    $("#linkurl").on('keyup blur', function(){
        if($.trim($("#linkurl").val()) === ''){
            $('#link').attr('disabled');
        }else{
            $('#link').removeAttr('disabled');
        }
    });

Here's my HTML:

<form action="default.cfm" method="post" enctype="multipart/form-data" id="linkform">
<div id="formdiv">

    <strong style="color: #ff0000;">Linked Text</strong>: Enter the text you wish to display for the link.<br/>
    <strong style="color: #ff0000;">URL</strong>: Enter a URL if you wish to link to another website (include: http://).<br/>
    <strong style="color: #ff0000;">PDF:</strong> The PDF file you wish to upload.<br/><br/>

    <strong style="color: #ff0000;">Linked Text:</strong><br/>
    <input type="text" name="linktext" id="linktext" required><br/><br/>
    <strong style="color: #ff0000;">URL:</strong><br/>
    <input type="text" name="linkurl" id="linkurl" value="If link, enter here..." required><br/><br/>
    <strong style="color: #ff0000;">PDF:</strong><br/>
    <input type="file" name="link" id="link" required>

</div>

<div id="submitbox"><input type="submit" value="Click to Create Link" id="updatebutton"></div>

One side of my head is completely bald from pulling my hair out over this. I'm open to suggestions if there's a better way...

Thanks...

Upvotes: 2

Views: 3521

Answers (6)

Chinmay235
Chinmay235

Reputation: 3414

Please change the following code as:

From

$("#linkurl").on('keyup blur', function(){
          if($.trim($("#linkurl").val())){
            $('#link').attr("disabled", "disabled");
        }else{$('#link').removeAttr('disabled');}
    });

To

$("#link").on("change", function(){
          if($.trim($("#link").val())){
            $('#linkurl').attr("disabled", "disabled");
        }else{$('#linkurl').removeAttr('disabled');}
    });

jsfiddle

Upvotes: 3

Tayyab Hayat
Tayyab Hayat

Reputation: 923

HTML

<!--html part -->
<input type="text" id="vurl" />
<input type="text" id="yurl" />
<input type="file" id="video" />

JS

$("#vurl").on('keyup blur', function(){
  if($.trim($("#vurl").val())){
    $('#video').attr("disabled", "disabled");
}else{$('#video').removeAttr('disabled');}
});
$("#yurl").on('keyup blur', function(){
  if($.trim($("#yurl").val())){
    $('#video').attr("disabled", "disabled");
  }else{$('#video').removeAttr('disabled');}
});

$("#video").on("change", function(){
  if($.trim($("#video").val())){
    $('#vurl').attr("disabled", "disabled");
    $('#yurl').attr("disabled", "disabled");
  }else{
    $('#vurl').removeAttr('disabled');
    $('#yurl').removeAttr('disabled');
  }
});

Upvotes: 1

Farhan
Farhan

Reputation: 752

Try This,I think your if condition is also wrong if there is some value in #linkurl then you want to disable #link else enable it right

$("#linkurl").on('keyup', function(){
        if($.trim($(this).val()).length == 0){
            $('#link').removeAttr('disabled');
         }else{
          $('#link').attr('disabled','disabled');   
        }
    });

http://jsfiddle.net/pfALM/1/

Upvotes: 0

Shemeer M Ali
Shemeer M Ali

Reputation: 1041

$("#linkurl").on('keyup blur', function(e){
    if(trim($(this).val())==''){
        $('#link').attr('disabled');
    }else{
        $('#link').removeAttr('disabled');
    }
 });

Upvotes: 0

federicot
federicot

Reputation: 12341

This should work for you:

$('#linkurl').on('keyup blur', function () {
    'use strict';
    if ($.trim($('#linkurl').val())) {
        // The field is not empty

        $('#link').prop('disabled', true);
    } else {
        $('#link').prop('disabled', false);
    }
});

Here's a JSFiddle.

Upvotes: 0

soyuka
soyuka

Reputation: 9105

Why don't you use the length proprety to see if the input is empty ?

For example :

 $("#linkurl").on('keyup blur', function(e){
    if($(this).val().length == 0){
        $('#link').attr('disabled');
    }else{
        $('#link').removeAttr('disabled');
    }
 });

Upvotes: 0

Related Questions