I wrote the below code for changing the text of div that called active yes, based on value of each input with type hidden.
i want to change the text of this div if input with id enable to "Enable List" and if input with classname delete has value changes the div text to "Deleted list" and if both of them was null show "list".
my code does not work correctly.
what is my problem?
here is my snippet :
$(document).ready(function() {
tmpval = $('#enable').val();
if (tmpval == '') {
$('.activeyes').text('list');
} else {
$('.activeyes').text('Enable List');
}
tmpval2 = $('#delete').val();
if (tmpval2 == '') {
$('.activeyes').text('List');
} else {
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
You are overwriting effect of the first check by the second check; you need to check the 2 inputs value together. Still, it is unclear what will happen if both are non-empty.
$(document).ready(function() {
tmpval = $('#enable').val();
tmpval2 = $('#delete').val();
if (tmpval == '' && tmpval2 == '') {
$('.activeyes').text('list');
} else if( tmpval!='' ){
$('.activeyes').text('Enable List');
} else if( tmpval2!='' ){
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
what is my problem?
You need to check the value of input when it changes its value, so capture the change event.
$(document).ready(function() {
$('#enable, #delete').change(function() {
var $this = $(this);
var id = $this.attr("id");
var value = $this.val();
if (value.length == 0)
{
$('.activeyes').text('list');
}
else
{
id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
Related
function validate(){
var cekLengthError = 0;
$(".not-empty").each(function(i, obj) {
if ($(this).children('input').val() == "") {
$(this).children('input').next().addClass("show");
$(this).children('input:first').focus();
cekLengthError = cekLengthError+1;
} else {
$(this).next().removeClass("show");
}
});
if(cekLengthError == 0){
alert("success")
}
}
When I click validate. Instead it checked the last element first. how to check the first element first? Maybe I was wrong when using this in each function.
Please Check in my fiddle: https://jsfiddle.net/dedi_wibisono17/a7be9zso/50/
Thank you
$(".add").click(function(){
$(".test").append(`
<div class="not-empty"><input type="text" placeholder="name" class="name" /><div class="error">error</div></div>
`)
})
function validate(){
var cekLengthError = 0;
$(".not-empty").each(function(i, obj) {
if ($(this).children('input').val() == "") {
$(this).children('input').next().addClass("show");
//$(this).children('input:first').focus();
if($("input.email").val() ==""){
$(".email").focus();
}else if ($("input.name").val() ==""){
$(".name").focus();
}else if ($("input.city").val() ==""){
$(".city").focus();
}else {
}
cekLengthError = cekLengthError+1;
}else{
$(this).next().removeClass("show");
}
});
if(cekLengthError == 0){
alert("success")
}
}
.error{
display:none;
}
.show{
display:block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lala not-empty">
<input type="text" class="email" placeholder="email" requird>
<div class="error">Error</div>
</div>
<div class="test not-empty">
<input type="text" class="name" placeholder="name">
<div class="error">Error</div>
</div>
<div class="test not-empty">
<input type="text" class="city" placeholder="name">
<div class="error">Error</div>
</div>
<br>
<button class="add">add</button>
<button class="validasi" onclick="validate();">validate</button>
You are always focusing to an element when iterating over the element list. So if you have 5 elements with an error, you are one by one validating then and focusing on them as well due to which last item in the list is getting focus.
Update your code to fix so that you are focusing only on first invalid field:
function validate() {
let cekLengthError = 0;
let foundElemWithError = false;
$(".not-empty").each(function(i, obj) {
if ($(this).children('input').val() == "") {
$(this).children('input').next().addClass("show");
if (!foundElemWithError) { // only focus on first invalid field
foundElemWithError = true;
$(this).children('input:first').focus();
}
cekLengthError = cekLengthError + 1;
} else {
$(this).next().removeClass("show");
}
});
if (cekLengthError == 0) {
alert("success")
}
}
I have textboxes that I want to show the error prompt beside it onkeyup event, but with no luck, it doesn't work. I have this as my reference: I want to show error message beside my textbox rather than alert in onkeyup event
$(function() {
$("#name").next('span').hide();
$("#name").keyup(function() {
var input = $(this).val();
var span = $(this).next('span');
if (name == "") {
span.text("Please enter your name").show();
return;
}
span.text('').hide();
});
$("#age").next('span').hide();
$("#age").keyup(function() {
var input = $(this).val();
var span = $(this).next('span');
if (age == "") {
span.text("Please enter your age").show();
return;
}
span.text('').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" name="name" />
<hr>
<span></span>
<input type="text" id="age" name="age" />
<span></span>
You are using wrong variable names to check the values of the name field and age field.
Also, the span for the name field is after the hr it should be right next to the input field.
Check the snippet below, see the comments added;
Notice the Regex .replace(/\s/g,'') for removing all whitespace in the if condition.
$(function() {
$("#name").next('span').hide();
$("#name").keyup(function() {
var input = $(this).val();
var span = $(this).next('span');
if (input.replace(/\s/g,'') == "") { // wrong variable, name is undefined, should be input, also the regex is for removing all whitespaces;
span.text("Please enter your name").show();
return;
}
span.text('').hide();
});
$("#age").next('span').hide();
$("#age").keyup(function() {
var input = $(this).val();
var span = $(this).next('span');
if (input.replace(/\s/g,'') == "") { // same here
span.text("Please enter your age").show();
return;
}
span.text('').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" name="name" />
<span></span> <!-- span should be here, before the hr line break -->
<hr>
<input type="text" id="age" name="age" />
<span></span>
Disabling jquery submit button until all the form inputs is filled.
Am working with Jquery and I have been trying to implement disabling form submission button until the whole form inputs are filled. i have tried most solution found here but it does not solve the issue. Thanks
$('.postbtn_video').click(function() {
var element = $(this);
var ID = element.attr('id');
var msg = $('#status').val();
var title = $('#title').val();
var video = $('#video').val();
var stat = $('#stat').val();
if (title == "") {
alert('Please Enter video Post Title?');
} else if (msg == "") {
alert('Please Enter Video Post Description');
} else if (video == "") {
alert('Enter Youtube Video Link');
} else if (stat == "") {
alert('Select Status');
} else {
var postData = "post=" + msg + "&title=" + title + "&video=" + video + "&stat=" + stat;
$("#loader").show();
$("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "posts.php",
data: postData,
cache: false,
success: function(html) {
$("ul#updatepost").prepend(html);
$("ul#updatepost li:first").slideDown("slow");
$('#status').val('');
$('#loader').hide();
}
});
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="statusform">
<label>Video Post Title </label>
<input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">
<p></p>
<label>Video Post Description</label>
<textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?">
</textarea>
<label>Youtube Video Link</label>
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">
<label>status</label>
<select style="width:100%" name="stat" class="form-control" id="stat">
<option value="ok">ok</option>
</select>
<p></p>
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />
</form>
Firstly apply disabled="disabled" to the button:
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />
Secondly, you need a function which will check each field is empty or not!
Check below code:
$(document).ready(function(){
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if(!empty){ // this will only check next inputs if empty is false, but once its set to true no further check will be made
if ($(this).val() == '') {
empty = true;
}
}
});
if (empty) {
$('.postbtn_video').attr('disabled', 'disabled');
} else {
$('.postbtn_video').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="statusform">
<label>Video Post Title </label>
<input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">
<p></p>
<label>Video Post Description</label>
<textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?"></textarea>
<label>Youtube Video Link</label>
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">
<label>status</label>
<select style="width:100%" name="stat" class="form-control" id="stat">
<option value="ok">ok</option>
</select>
<p></p>
<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />
</form>
Maybe this will help. you can manipulated the Form Disabled attribute:
var checkboxes = document.getElementsByTagName('input');
//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++) {
//If the input is a check-box run script else skip over
if (checkboxes[i].type == 'checkbox') {
//If it is a check-box ensure the box is unchecked
checkboxes[i].checked = false;
}
}
$(document).ready(function()
{
//define Element by ID and create variable
var $checked = $('#field_human');
//define default state for attribute before handler function trigger
$("#submit").attr("disabled", !$checked.checked)
//On element handler trigger define function to execute each time handler is triggered
$checked.click(function()
{
//State to define instance on method
if ($checked.prop('checked'))
{
//return true
//remove element attribute state 'disabled'
$('#submit').removeAttr('disabled');
}
if($('#contactForm input').val() != '')
{
$('#submit').removeAttr('disabled');
}
else {
//return false
//set element attribute state 'disabled'
$("#submit").attr("disabled", !$checked.checked);
}
//return to ready-state to wait for handler to trigger again
return;
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<form class="form-horizontal" role="form" method="post" action="" id="contactForm" name="contactForm">
<div class="form-group">
<label for="inputblk" class="col-sm-3 control-label">Input Block</label>
<div class="col-sm-9">
<input name="inputblk" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-3 control-label">Are You <strong><u>Human</u>?</strong></label>
<div class="col-sm-9">
<input id="field_human" class="field_human" type="checkbox" name="human" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
</div>
</div>
</form>
1st:
inputs that you think are required, make it required! like below:
<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link" required >
2nd:
Make your selection based on this attribute and check if values of these inputs are not empty. Disable the submit button if so.
3rd:
Make event listener to all inputs that have required attribute to listen user inputs.
something like this:
var l = $("[required='']");
function enableSubmit(l) {
if (l.length == 0) {
$("[name=post]").removeAttr('disabled');
} else {
for (var m = 0; m < l.length; m++) {
if (l[m].value.length == 0) {
$("[name=post]").attr("disabled", "disabled");
return;
}
}
$("[name=post]").removeAttr('disabled');
}
}
for (var m = 0; m < l.length; m++) {
l[m].addEventListener('input', function () {
enableSubmit(l);
});
}
First of all you need to add a disabled property to you input button by default like:
<input disabled name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />
then in your jquery you need fire up a validate function that will check for all the inputs and if they are not empty you can simply remove the disabled property from your input button like:
$(document).on('keyup', "input:not([type='submit']", function () {
//set it to true by default
var valid = true;
//getting all the inputs except input submit
var inputTextboxes = $("input:not([type='submit'])");
inputTextboxes.each(function(e) {
//it enters this only if the valid is true for any one value, if valid is set to false at any point it won't check it for next inputs - works for first time
if (valid != false){
if ($(this).val()) {
valid = true;
}else{
valid = false;
}
}
else{
break; //breaks the loop
}
});
if (valid) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
Hope this helps
I have about 120 inputs
<input type="text" />
I'm going to fill some of them with some text, while the others will be empty.
Is there any way to use a submit button that will make all empty inputs change in background color?.
Any help will be appreciated.
It can easily be done using jQuery if you prefer. Here's the solutions using both javaScript and jQuery.
HTML :
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" id="submitButton" value="Submit" />
//for javaScript
<!-- <input type="button" id="submitButton" value="Submit" onclick="validateField();" /> -->
javaScript :
function validateField(){
var textFields = document.getElementsByTagName("input");
for(var i=0; i < textFields.length; i++){
if(textFields[i].type == "text" && textFields[i].value == "")
{
textFields[i].style.backgroundColor = "red";
}
else {
textFields[i].style.backgroundColor = "white";
}
}
}
jQuery :
$("#submitButton").click(function(){
$("input").each(function(){
if($(this).attr("type") == "text" && $(this).val() == "")
{
$(this).css("background-color", "red");
}
else {
$(this).css("background-color", "white");
}
});
});
javaScript Demo
jQuery Demo
This should work:
function verifyInputs() {
var inputs = document.querySelectorAll('input');
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'text' && inputs[i].value == "") {
inputs[i].style.backgroundColor = 'red'
}
}
}
// This should be triggered on dom load / window load or in case when you want to check and mark the inputs with color
verifyInputs();
Click here for JSFIDLE demo
I have a simple function that I'm trying to append the results by group. I've been able to display the result for a single form but unsure where to proceed. Here is the function on Jsfiddle. http://jsfiddle.net/XBSVn/
try this. note that there is difference between your class names, and your selector only selects first input element:
$(function() {
$('.ratingroups input').each(function(i, v) {
var star = '★';
var val = parseInt(this.value, 10)
for (var i = 0; i < val; i++) {
$(this).parent().siblings('div').append($('<div>').html(star).text())
}
});
});
DEMO
The issue here is with the typos in the class names selectors(you used .ratinggroups and .ratingroups) and also the textbox selector(you were always getting the first text box to check the value).
Check this updated JsFiddle: http://jsfiddle.net/XBSVn/12/
Change your HTML to:
<form class="ratingroups">
<p><input class="asstars" value="5"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="4"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="3"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="2"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="1"/> </p>
<div class="rstars"></div>
</form>
and your Javascript to:
$(function() {
console.log($('.ratingroups input').length);
$('.ratingroups input').each(function() {
var asstars = $(this);
var stars = asstars.closest('.ratingroups').find('.rstars');
var display = true;
if (asstars.val() == '5') {
stars.append('<span>★★★★★</span>');
display = false;
}
else if (asstars.val() == '4') {
stars.append('<span>★★★★</span>');
display = false;
}
else if (asstars.val() == '3') {
stars.append('<span>★★★</span>');
display = false;
}
else if (asstars.val() == '2') {
stars.append('<span>★★</span>');
display = false;
}
else if (asstars.val() == '1') {
stars.append('<span>★</span>');
display = false;
}
if (display) {
stars.css('display', 'none');
}
else {
stars.css('display', 'block');
}
});
});