How to clear my input if button is clicked and at the same time make button unclickable if input is empty?
1
I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>javascript jquery html css
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
add a comment |
1
I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>javascript jquery html css
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
add a comment |
1
1
1
I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>javascript jquery html css
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>javascript jquery html css
javascript jquery html css
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
edited Nov 14 '18 at 11:03
Rory McCrossan
244k29211247
244k29211247
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
asked Nov 14 '18 at 10:59
Sasha BorysenkoSasha Borysenko
524
524
add a comment |
add a comment |
6 Answers
6
active
oldest
votes
2
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
add a comment |
2
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
add a comment |
2
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
add a comment |
0
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298633%2fhow-to-clear-my-input-if-button-is-clicked-and-at-the-same-time-make-button-uncl%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
add a comment |
2
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
add a comment |
2
2
2
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
edited Nov 14 '18 at 11:13
answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
answered Nov 14 '18 at 11:06
Just codeJust code
10.4k53066
10.4k53066
add a comment |
add a comment |
2
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
add a comment |
2
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
add a comment |
2
2
2
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
answered Nov 14 '18 at 11:07
Rory McCrossanRory McCrossan
244k29211247
244k29211247
add a comment |
add a comment |
2
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
add a comment |
2
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
add a comment |
2
2
2
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
answered Nov 14 '18 at 11:18
Matt.SMatt.S
179116
179116
add a comment |
add a comment |
0
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
add a comment |
0
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
add a comment |
0
0
0
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
answered Nov 14 '18 at 11:09
Mohan RajputMohan Rajput
271312
271312
add a comment |
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
add a comment |
0
0
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
answered Nov 14 '18 at 11:19
Sk EklasSk Eklas
1
1
add a comment |
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
add a comment |
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
add a comment |
0
0
0
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
answered Nov 14 '18 at 11:49
Viddesh MandpeViddesh Mandpe
1
1
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
add a comment |
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
you just need to add $('#btn').attr('disabled',true); below $('#text').val("");
– Viddesh Mandpe
Nov 14 '18 at 11:52
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298633%2fhow-to-clear-my-input-if-button-is-clicked-and-at-the-same-time-make-button-uncl%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
