CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ozzy
Ozzy

Reputation: 905

How can I disable the submit button until text is entered in the input field?

I have an issue try to achieve this result, pretty much what I need is to disable the submit button until text is entered in the input field. I've trying some functions but without results.

HTML Markup

<form action="" method="get" id="recipename">
<input type="text" id="name" name="name" class="recipe-name" 
    value="Have a good name for it? Enter Here" 
    onfocus="if (this.value == 'Have a good name for it? Enter Here') {this.value = '';}" 
    onblur="if (this.value == '') {this.value = 'Have a good name for it? Enter Here';}" 
/>
<input type="submit" class="submit-name" value="" />
</form>

Upvotes: 9

Views: 25057

Answers (6)

dnxit
dnxit

Reputation: 7350

    const controls = document.querySelectorAll("input, select");
    for (const c of controls){
      c.oldValue = c.value + c.checked;
    }
    var trackControls;
    (trackControls = function() {
      var disabled = true;
      for (const c of controls) {
        if (c.oldValue !== (c.value + c.checked)) {
          disabled = false;
          break;
        }
      }
        var selector = document.querySelector("[type=submit]");
        if (selector != null) { 
              selector.disabled = disabled; 
        }
    })();
    document.oninput = trackControls;
    document.onchange = trackControls;

If you're not concerned about the cross browser compatibility. const does not work in IE

Upvotes: 0

evanill80
evanill80

Reputation: 157

The only problem with the accpeted solution is that the button is enabled only after focus is removed from the text field (after entering data in it of course). Shouldnt the button be enabled as soon as any text is entered in the field? Here is a solution that implements this.

Link to other solution: Keep button disabled if text is not entered

something like this:

$('.recipe-name').on("keyup", action);
function action() {
   if($('.recipe-name').val().length > 0) {
      $('#submit-name').prop("disabled", false);
   }else {
      $('#submit-name').prop("disabled", true);
   }
}

Upvotes: 7

xil3
xil3

Reputation: 16439

You could try this:

var nameText = $("#name");

nameText.attr("disabled", "disabled");

nameText.change(function () {
  if(nameText.val().length > 0) {
    nameText.attr("disabled", "");
  } else {
    nameText.attr("disabled", "disabled");
  }

});

Upvotes: 1

Sandy
Sandy

Reputation: 862

call some javascript function like below(giving example for jquery) in onkeyup event

function handleSubmit()
{
if($.trim($('#name').val() == ''))
{
$('.submit-name').attr('disabled','disabled');
}
else
{
$('.submit-name').attr('disabled','');
}
}

Upvotes: 2

Topera
Topera

Reputation: 12389

You can use this:

var initVal = "Have a good name for it? Enter Here";
$(document).ready(function(){
    $(".submit-name").attr("disabled", "true");
    $(".recipe-name").blur(function(){
        if ($(this).val() != initVal && $(this).val() != "") {
            $(".submit-name").removeAttr("disabled");
        } else {
            $(".submit-name").attr("disabled", "true");        
        }
    });    
});

See in jsfiddle.

Upvotes: 7

Šime Vidas
Šime Vidas

Reputation: 185963

$("#textField").keyup(function() {
    var $submit = $(this).next(); // or $("#submitButton");
    if(this.value.length > 0 && this.value != "Default value") {
        $submit.attr("disabled", false);
    } else {
        $submit.attr("disabled", true);
    }
});

Upvotes: 1

Related Questions