Pregunta

I guess that this is a very easy question but I've not found any resources for that. Maybe it's the wrong terms I'm searching for... ;(

I'm building a learning scenario for kids. Here they have to read a text and anser a question before they continue to the next text and question. So what I don't get is the code where the kids have to write the text to get redirected.

Maybe there is a jQuery solution: A textfield with a button next to it ("go ahead") which is just clickable after a specific word is written into the textfield.

Seriously that can't be so complicated... ;)

I would be so happy if someone has an idear or a script that I can use!

Thanks and cheers!

Philipp

¿Fue útil?

Solución

making it as simple as i can....using keyup() and prop().

try this

$(function(){  //<--make sure document is ready
  var $btn =  $('#buttonID'); 
  $btn.prop('disabled',true);   //<---disable the button on default
  $('#inputID').keyup(function(){ //<---check if something is typed in input 
    if($(this).val() != ""){
      $btn.prop('disabled',false);  
    }else{
      $btn.prop('disabled',true);
    }
  });
});

here buttonID and inputID is id of button and input respectively..

make sure your are loading the jquery,js script inside <head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Otros consejos

If you wish to go with the solution you proposed, you could code like this:

var textbox = $("#idOfTextbox");
textbox.change(function () {
    $("idOfButton").prop("disabled", !textbox.val());
});

This should disable the button when the textbox is empty, and enable it again when there is text.

Try this

$(function() {
    $('#input').on('keyup', function() {
      var $btn = $('#button')
      this.value === 'hello' ? $btn.prop('disabled', false) 
                            : $btn.prop('disabled', true) ;
    });
});

Check Fiddle

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top