my disable submit button if input is empty is not working. When i put an input, the submit button still not able to click, it is still disabled.
what is wrong here? btw, Im still learning..
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>
$(function () {
$('.button[type="submit"]').keyup(function () {
var empty = false;
$('.input[type="search"]').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.button[type="submit"]').attr("disabled", "disabled");
} else {
$('.input[type="search"]').removeAttr("disabled");
}
});
});
Try it.
$(function() {
var btnSubmit = $('button[type="submit"]');
btnSubmit.attr('disabled', 'disabled');
$('input[name="valueToSearch"]').on('keyup', function() {
if ($(this).val() !== '') {
btnSubmit.removeAttr('disabled');
} else {
btnSubmit.attr('disabled', 'disabled');
}
})
});
.button or .input class doesn't exist in your context.
Attach a handler to all your search inputs; and inside check if any of them are empty.
$(function() {
$('input[type="search"]').keyup(function() {
var empty = false;
$('input[type="search"]').each(function() {
if($(this).val().length === 0) {
empty = true;
}
});
if (empty) {
$('button[type="submit"]').attr('disabled', 'disabled');
} else {
$('button[type="submit"]').removeAttr('disabled');
}
});
});
.mdi-magnify::before {content: "magnify-icon";display:inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>
Related
how to create a search feature without clicking the search button? so when entering a value then enter can immediately bring up the search results.
index.blade.php
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
index_script.blade.php
$(".btn-search").click(function() {
$(".see-more").click();
$(".see-more").remove();
var value = $(".search-bar").val().toLowerCase();
$(".course-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$(".owl-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$.each($("#ajar-catalog-container .owl-stage"), function() {
var count = 0;
$.each($(this).children('.owl-item'), function() {
display = $(this).children().css('display');
if (display == 'block') {
count++;
}
});
if(count == 0) {
$(this).closest('.card').css('display', 'none');
}
else {
$(this).closest('.card').css('display', 'block');
}
});
});
please help, thank you
just manually trigger the click event of the button element.
$("#search-bar").keydown(function(e){
if (e.keyCode == 13) {
$(".btn-search").click();
}
});
Method #1
You can use the oninput event in JavaScript to get the results when entering a value to the input field.
var searchInput = document.getElementById("search-bar")
searchInput.oninput = function(){
// put your logic for search filter here
}
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
Method #2 -
You can use jQuery's keydown() event
$("#search-bar").keydown(function(){
// your logic here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
I've managed to disable the submit button but it is not re-enabling after there is text in the input field. How can I fix this?
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />
</div>
</div>
</div>
</form>
High Scores
Jquery:
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
You have multiple id's attributes in your submit button hence why you are having trouble with your code. One id is inputGroupPrepend2 and other is register - you can not have both in input
To disable the button use .prop() method and set to true if you want to disable and false when you want to enable it.
$('#register').prop('disabled', true); //disable
I have simplified your code and is working as expected.
$(function() {
$('input[type=text]').each(function(index, element) {
$(element).keyup(function() {
if ($(this).val() == '') {
$('#register').prop('disabled', true); //disable
} else {
$('#register').prop('disabled', false); //enable
}
});
})
});
Live Working Demo:
$(function() {
$('input[type=text]').each(function(index, element) {
$(element).keyup(function() {
if ($(this).val() == '') {
$('#register').prop('disabled', true); //disable
} else {
$('#register').prop('disabled', false); //enable
}
});
})
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="register" required>
<div class="input-group-prepend">
<input type="submit" value="Submit" disabled="disabled" class="btn btn-secondary btn-smrounded-0" id="register" />
</div>
</div>
</div>
</form>
High Scores
The > combinator selects nodes that are direct children of the first element.
Child combinator
Your keyup wasn't firing at all as well as $('form > input').each(function() { as that did not select input at al...
(function() {
$('form * input').keyup(function() {
console.log(true);
var empty = false;
$('form * input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="col-lg-10 mb-3">
<div class="input-group mycustom">
<input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>
<div class="input-group-prepend">
<input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />
</div>
</div>
</div>
</form>
High Scores
(function() {
$(document).on('keyup', 'input[type=text]', function(){
var empty = false;
$('input[type=text]').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
})
})()
You could update the bottom bit of code to this.
if (empty) {
if ($('#register').is(':disabled')) {
$('#register').removeAttr('disabled');
}
else {
$('#register').attr('disabled', 'disabled');
}
};
Ive got HTML code with a button group and a submit button. The script code checks if it is selected or not and submits based on that selection. If none of the buttons are selected, then display the alert.
$("#Save").on("click", Save);
function Save(e) {
if (GeneralStatusAlert(e) == false) {
return;
} else {
$('#frmSubmit').submit();
}
}
function GetGeneralStatus() {
var value = "";
var row = $("#btnGeneral").closest(".row")
var object = $(this).find(".btn-group");
value = $(object).find(".selected");
return value;
}
function GeneralStatusAlert(e) {
var value = GetGeneralStatus();
if (value.length < 1) {
alert("Please set Status.");
return false;
}
return true;
}
$('.testRow button').click(function () {
$(this).addClass("selected");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row testRow">
<div class="btn-group btnGeneral">
<button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
<button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
</div>
</div>
<br/>
<br/>
<div class="row">
<button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button>
</div>
It does not work. What am I missing?
EDIT : Added the select button class on button click.
I've updated your JS a little:
$("#Save").on("click", Save);
$(".btnStatus").on("click", function(){
$(".btnStatus").removeClass("selected");
$(this).addClass("selected");
});
function Save(e)
{
if (GeneralStatusAlert(e) == false) {
return;
}
else{
$('#frmSubmit').submit();
}
}
function GetGeneralStatus() {
var value = "";
value = $("div.btn-group").find(".selected");
return value;
}
function GeneralStatusAlert(e) {
var value = GetGeneralStatus();
if (value.length < 1) {
alert("Please set Status.");
return false;
}
return true;
}
Basically you weren't adding the selected class when clicking your status buttons. Also your code var object = $(this).find(".btn-group"); wasn't finding anything. (Due to using this)
There are few issues in your sample code
1: bootstrap.js is dependent on JQuery, so need to add that first.
2: Missing code to add selected class on status button
3: There is no element with id btnGeneral, you are using wrong selector. btnGeneral is a class and should be accessed by .
4: You may meant $(row) instead of $(this)
var row = $("#btnGeneral").closest(".row")
var object = $(this).find(".btn-group");
Updated sample code.
$("#Save").on("click", Save);
$(".btn").on("click", function(){
$(this).addClass("selected");
$(this).siblings().removeClass("selected");
});
function Save(e) {
if (GeneralStatusAlert(e) == false) {
return;
} else {
alert("Submitting");
$('#frmSubmit').submit();
}
}
function GetGeneralStatus() {
var value = "";
var row = $(".btnGeneral").closest(".row")
var object = $(row).find(".btn-group");
value = $(object).find(".selected");
return value;
}
function GeneralStatusAlert(e) {
var value = GetGeneralStatus();
if (value.length < 1) {
alert("Please set Status.");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="btn-group btnGeneral">
<button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
<button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
</div>
</div>
<br/>
<br/>
<div class="row">
<button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button>
</div>
I need to remove "disabled" class from button when there is at least one char in the input. This is jQuery code:
$('.reply').on('change', function() {
if ($(this).val().length > 0) {
$(".replyBtn").removeClass('disabled');
}
});
This is HTML:
<input type="text" name="reply" class="reply form-control" placeholder="Rašykite atsakymą...">
<br>
<button type="submit" class="replyBtn btn btn-success disabled">Atsakyti</button>
But it's not working and I don't get errors in console
$('.reply').on('input', function() {
if ($(this).val().length > 0) {
$(".replyBtn").removeClass('disabled');
} else {
$(".replyBtn").addClass('disabled');
}
});
.disabled {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="reply" class="reply form-control" placeholder="Rašykite atsakymą...">
<br>
<button type="submit" class="replyBtn btn btn-success disabled">Atsakyti</button>
Use input
Can you please take a look at This Demo and let me know why I am not able to target the first .fa class before the text box #name ?
I am trying this:
$(this).prev().closest(".fa").addClass("err");
at this code
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user err-test">Name</i>
</div>
<input type="text" class="form-control form-input-gray" id="name" placeholder="Enter Your Name" />
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-block" id="btn-contact-rquest">Contact</button>
<br />
<div id="result"></div>
<script>
$(function () {
function txtInput(elem) {
var inputData = $.trim(elem.val());
if (inputData == "") {
$(this).prev().closest(".fa").addClass("err");
}
else{
return inputData;
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});
</script>
but cant target the .fa can you please let me know how to fix this?
Thanks,
From .closest() docs,For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree but in your case .fa is not ancestors of $('#name').
Instead of
$(this).prev().closest(".fa").addClass("err");
Try
elem.prev().children(".fa").addClass("err");
Working Demo
Try this: FIDDLE
$(elem).parent().find(".fa:eq(0)").addClass("err");
I think you miss reading the html.
Because before the input field, that is a div with class of input-group-addon.
Hence, your selector is incorrect.
I changed your JS to :
$(function () {
function txtInput(elem) {
var inputData = $(elem).val();
if (inputData != "") {
return inputData;
}
else{
$(".input-group").addClass("err");
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});
http://jsfiddle.net/fjm63j56/3/