Disabling & activating keypress if value false or true

I have a keypress on an input looking like this:

$('.input-name').keypress(function(e){

    var keycode = (e.keyCode ? e.keyCode : e.which);

    if(keycode == '13'){

        e.preventDefault();

        myFunction();

    }

});

If I hit enter myFunction() gets called.

Now I want to check if another value is false or true ... and then deactivate and activate the keypress. How do I do that? The below checks if var is_name is true or false:

var is_name;



$('.input-name').on('input', function () {      

    is_name = $('#abcName').val();

    if ( is_name == false ) {

        $('button.filter').attr('disabled','disabled');



        // Deactivate keypress



    } else {

        $('button.filter').removeAttr('disabled');



        // Activate keypress        



    }

});

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

Stop using outdated stuff like .keypress, use .on - that has a counterpart .off, if you want to remove an event handler again. Or leave the event handler in place, and simply toggle a boolean flag, that the keypress handler then can check when it gets called, to determine whether it should do anything or not.

– misorude
Nov 14 '18 at 15:15

Thanks ... can you also provide a working example?

– Philipp M
Nov 14 '18 at 15:16

add a comment |

I have a keypress on an input looking like this:

$('.input-name').keypress(function(e){

    var keycode = (e.keyCode ? e.keyCode : e.which);

    if(keycode == '13'){

        e.preventDefault();

        myFunction();

    }

});

If I hit enter myFunction() gets called.

Now I want to check if another value is false or true ... and then deactivate and activate the keypress. How do I do that? The below checks if var is_name is true or false:

var is_name;



$('.input-name').on('input', function () {      

    is_name = $('#abcName').val();

    if ( is_name == false ) {

        $('button.filter').attr('disabled','disabled');



        // Deactivate keypress



    } else {

        $('button.filter').removeAttr('disabled');



        // Activate keypress        



    }

});

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

Stop using outdated stuff like .keypress, use .on - that has a counterpart .off, if you want to remove an event handler again. Or leave the event handler in place, and simply toggle a boolean flag, that the keypress handler then can check when it gets called, to determine whether it should do anything or not.

– misorude
Nov 14 '18 at 15:15

Thanks ... can you also provide a working example?

– Philipp M
Nov 14 '18 at 15:16

add a comment |

I have a keypress on an input looking like this:

$('.input-name').keypress(function(e){

    var keycode = (e.keyCode ? e.keyCode : e.which);

    if(keycode == '13'){

        e.preventDefault();

        myFunction();

    }

});

If I hit enter myFunction() gets called.

Now I want to check if another value is false or true ... and then deactivate and activate the keypress. How do I do that? The below checks if var is_name is true or false:

var is_name;



$('.input-name').on('input', function () {      

    is_name = $('#abcName').val();

    if ( is_name == false ) {

        $('button.filter').attr('disabled','disabled');



        // Deactivate keypress



    } else {

        $('button.filter').removeAttr('disabled');



        // Activate keypress        



    }

});

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

I have a keypress on an input looking like this:

$('.input-name').keypress(function(e){

    var keycode = (e.keyCode ? e.keyCode : e.which);

    if(keycode == '13'){

        e.preventDefault();

        myFunction();

    }

});

If I hit enter myFunction() gets called.

Now I want to check if another value is false or true ... and then deactivate and activate the keypress. How do I do that? The below checks if var is_name is true or false:

var is_name;



$('.input-name').on('input', function () {      

    is_name = $('#abcName').val();

    if ( is_name == false ) {

        $('button.filter').attr('disabled','disabled');



        // Deactivate keypress



    } else {

        $('button.filter').removeAttr('disabled');



        // Activate keypress        



    }

});

javascript keypress

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

edited Nov 14 '18 at 15:23

chazsolo

5,2701233

asked Nov 14 '18 at 15:11

Philipp M

825828

asked Nov 14 '18 at 15:11

Philipp M

825828

asked Nov 14 '18 at 15:11

Philipp M

825828

Stop using outdated stuff like .keypress, use .on - that has a counterpart .off, if you want to remove an event handler again. Or leave the event handler in place, and simply toggle a boolean flag, that the keypress handler then can check when it gets called, to determine whether it should do anything or not.

– misorude
Nov 14 '18 at 15:15

Thanks ... can you also provide a working example?

– Philipp M
Nov 14 '18 at 15:16

add a comment |

Stop using outdated stuff like .keypress, use .on - that has a counterpart .off, if you want to remove an event handler again. Or leave the event handler in place, and simply toggle a boolean flag, that the keypress handler then can check when it gets called, to determine whether it should do anything or not.

– misorude
Nov 14 '18 at 15:15

Thanks ... can you also provide a working example?

– Philipp M
Nov 14 '18 at 15:16

Stop using outdated stuff like .keypress, use .on - that has a counterpart .off, if you want to remove an event handler again. Or leave the event handler in place, and simply toggle a boolean flag, that the keypress handler then can check when it gets called, to determine whether it should do anything or not.

– misorude
Nov 14 '18 at 15:15

Thanks ... can you also provide a working example?

– Philipp M
Nov 14 '18 at 15:16

add a comment |

2 Answers
2

active

oldest

votes

You can toggle it with On and Off

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

add a comment |

You need some kind of state. In your case it is set by is_name. If is_name is falsy, pressing enter won’t work and myFunction won’t be executed.

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53303312%2fdisabling-activating-keypress-if-value-false-or-true%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You can toggle it with On and Off

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

add a comment |

You can toggle it with On and Off

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

add a comment |

You can toggle it with On and Off

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

You can toggle it with On and Off

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

$(function(){



$("#change_event").change(function(){



  var is_name = $(this).val();



  if (is_name == "true")

  {

    console.log(is_name + " Keypress event Added");

    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })

  }

  else

  {

    console.log(is_name + " Keypress event Removed");

    $('.input-name').off('keypress')

  }



  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select id="change_event">

<option value="">Choose</option>

<option value="true">Add Event</option>

<option value="false">Remove Event</option>

</select>



<input class="input-name" />

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

answered Nov 14 '18 at 15:22

mbharanidharan88

4,04942455

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

add a comment |

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

Thanks! How can I prevent page from reloading if '$('.input-name').off('keypress')' is called? Right now the page reloads which I don't want ...

– Philipp M
Nov 14 '18 at 16:10

Page won't reload because of that?! It will just remove the event.

– mbharanidharan88
Nov 14 '18 at 16:12

Isn’t toggling event listener attachments on every change a little overkill?

– Matthi
Nov 14 '18 at 16:44

@PhilippM I can imagine your code is wrapped by form elements, isn’t it? This could make the page reload. Then please provide more code to receive help 👍

– Matthi
Nov 14 '18 at 16:48

add a comment |

You need some kind of state. In your case it is set by is_name. If is_name is falsy, pressing enter won’t work and myFunction won’t be executed.

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

add a comment |

You need some kind of state. In your case it is set by is_name. If is_name is falsy, pressing enter won’t work and myFunction won’t be executed.

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

add a comment |

You need some kind of state. In your case it is set by is_name. If is_name is falsy, pressing enter won’t work and myFunction won’t be executed.

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

You need some kind of state. In your case it is set by is_name. If is_name is falsy, pressing enter won’t work and myFunction won’t be executed.

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

var is_name = "";

var

    $nameInput = $('.input-name'),

    $filterButton = $('button.filter');



function myFunction() {

    console.log('Meow');

}



$nameInput.on('keyup', function (e) {      

    is_name = $(this).val();

    // toggles the disabled property

    $filterButton.prop( "disabled", !is_name );

    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');

    var keycode = (e.keyCode ? e.keyCode : e.which);

    // if block won’t be executed if is_name is falsy

    if(keycode == '13' && !!is_name){

        e.preventDefault();

        myFunction();

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input class="input-name" /><button class="filter" disabled>Do something</button>

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

edited Nov 14 '18 at 15:35

answered Nov 14 '18 at 15:19

Matthi

582212

answered Nov 14 '18 at 15:19

Matthi

582212

answered Nov 14 '18 at 15:19

Matthi

582212

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky