im sorry for this question but how can i disable a textbox if another textbox have a value?? I already try this code but its not working,, sorry for the noob question T_T

function disable(downpayment,full_payment)
{

if ( downpayment.value.length >= 1 )
document.getElementById(full_payment).disabled = true;

else

document.getElementById(full_payment).disabled = false;
}



</script>
        <input name="downpayment" id="downpayment" type="text" onselect="function disable(downpayment,full_payment);" style="width:250px" />
      </p>
      <p>
        <input name="full_payment" id="full_payment" type="text" style="width:250px" />

im sorry for this question but how can i disable a textbox if another textbox have a value?? I already try this code but its not working,, sorry for the noob question T_T

function disable(downpayment,full_payment)
{

if ( downpayment.value.length >= 1 )
document.getElementById(full_payment).disabled = true;

else

document.getElementById(full_payment).disabled = false;
}



</script>
        <input name="downpayment" id="downpayment" type="text" onselect="function disable(downpayment,full_payment);" style="width:250px" />
      </p>
      <p>
        <input name="full_payment" id="full_payment" type="text" style="width:250px" />

• javascript
• jquery

3 Answers 3

If you want to stay with plain JavaScript:

// finding the relevant elements *outside* the function
var downpayment = document.getElementById('downpayment'),
    full_payment = document.getElementById('full_payment');

function enableToggle(current, other) {
    /* 'current' is the element that currently has focus
       'other' is the other input element, that does not have focus.

    1. if the 'current' value of the focused/active element, once the whitespace
       is removed, is greater than 0 (so it has something in it other than whitespace,
       the disabled property of the 'other' element is true,
    2. if the 'current' element has only whitespace, and/or a zero-length value,
       the 'other' element's disabled property is false.
    */

    other.disabled = current.value.replace(/\s+/,'').length > 0;
}

// using the onkeyup event to call a function on the elements.
downpayment.onkeyup = function () {
    enableToggle(this, full_payment);
}
full_payment.onkeyup = function () {
    enableToggle(this, downpayment);
}

This works with the following HTML:

<input name="downpayment" id="downpayment" type="text" style="width:250px" />
<input name="full_payment" id="full_payment" type="text" style="width:250px" />

JS Fiddle demo.

If you're using jQuery already, then you can either nest the above into jQuery's $(document).ready(function(){ /* the code in here */});, or switch to a jQuery-only solution, such as Alex's.

To stick with plain-JavaScript, and avoiding explaining how to set up an equivalent DOM-ready event, put the following at the end of your HTML content, just before the closing </body> tag:

<script>
    var downpayment = document.getElementById('downpayment'),
        full_payment = document.getElementById('full_payment');

    function enableToggle(current, other) {
        other.disabled = current.value.replace(/\s+/,'').length > 0;
    }

    downpayment.onkeyup = function () {
        enableToggle(this, full_payment);
    }
    full_payment.onkeyup = function () {
        enableToggle(this, downpayment);
    }
</script>

(This is exactly the same JavaScript as above, with the ments stripped out, but wrapped in <script></script> tags)

Putting this at the bottom of the HTML means that the elements exist in the DOM prior to your trying to assign event-handlers to them.

Incidentally, with adjusted HTML, to give:

<form>
<!--
     I associated the relevant elements with a class-name 'enableToggle',
     you don't have to, it just reduces the work the jQuery has to do later
     when using siblings('.enableToggle') to find the relevant elements.
-->
<div>
    <label for="downpayment">Downpayment</label>
    <input name="downpayment" class="enableToggle" id="downpayment" type="text" style="width:250px" />
    <label for="full_payment">Full payment</label>
    <input name="full_payment" class="enableToggle" id="full_payment" type="text" style="width:250px" />
</div>
</form>

The following jQuery could be used:

// binds both event-handler to both 'keyup' and 'paste' events.
$('.enableToggle').on('keyup paste', function(){
    /* 'curVal' is a Boolean (true or false) depending on whether there's
        a value other than whitespace */
    var curVal = $(this).val().replace(/\s+/g,'').length > 0;

    /* sets the 'disabled' property of the sibling elements of the current
       element, as long as those siblings have the class 'enableToggle'
       (this avoids having to explicitly identify all the elements you want
       to act on). */
    $(this).siblings('.enableToggle').prop('disabled', curVal);
});

JS Fiddle demo.

You have tagged the question jQuery, so it's as simple as...

$("#downpayment").on("change paste", function() { 
                         $("#full_payment").prop("disabled", this.value.length); 
                          });

As soon as your down payment has some content in it (even if it's a space, if that's not ideal, $.trim() the input before you check its length property) then it will enable the full payment.

$(document).ready(function()
{   
    $(".PaxHeads").on('keypress','input[name="DebitAmount"]',function()
    {
         var myLength = $('input[name="DebitAmount"]').val().length;
         if (myLength!=0)
         {
            $('input[name="CreditAmount"]').attr("disabled", "disabled");   
         }
        else 
        {
            $('input[name="CreditAmount"]').removeAttr("disabled"); 
        }
    });
    $(".PaxHeads").on('keypress', 'input[name="CreditAmount"]', function()
    {
        var myLength1 = $('input[name="CreditAmount"]').val().length;
        if (meLength1!=0)
        {
            $('input[name="DebitAmount"]').attr("disabled", "disabled");    
        }
        else
        {
            $('input[name="DebitAmount"]').removeAttr("disabled");      
        }
    });
});