We Keep Coding

javascript - hide results when input is empty

I have Live Search JSON Data Using Ajax jQuery, and I would like to call more than one JSON file for the search.
At the start of the page, with the input empty, the results are not shown.
However, if you write and delete text again in the input, all results are displayed.
I would like to hide all the results again when the input is empty again.
Thank you in advance.
HTML Input:
<div class="container" style="width:900px;">
<div align="center">
<input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
</div>
<ul class="list-group" id="result"></ul>
</div>
JavaScript:
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$('#search').keyup(function(){
$('#result').html('');
$('#state').val('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('1.json', function(data) {
$.each(data.entries, function(key, value){
if (value.title.search(expression) != -1 || value.author.search(expression) != -1)
{
$('#result').append('<li class="list-group-item link-class">'+value.title+' <span class="text-muted">'+value.author+'</span></li>');
}
});
});
});
$('#result').on('click', 'li', function() {
var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');
});
});
</script>

$('#search').keypress(function() {
if($(this).val().length > 1) {
// Continue work
} else {
$('#result').html('')
}

Using keypress and keydown check the length before the text change. You can use keyup and change.
It is better to use it with keyup:
$('#txt1').keyup(function() {
if (!$(this).val().length) $('#result').html('');
});
You can also use change:
$('#txt1').change(function() {
if (!$(this).val().length) $('#result').html('');
});
The change will be executed when you click somewhere else on the page.

jQuery - hide / show divs when checkboxes are checked

I have a jquery function to show or hide divs when certain checkboxes are checked or unchecked and work fine using the "change" function. Therefore, if the checkbox has already been previously checked the corresponding div is not shown. How can I change this code to work?
My code is here:
<script>
jQuery(document).ready(function($) {
$('.my_features').change(function() {
var checkbox = $(this);
if( checkbox.is(':checked') ) {
$( '#' + checkbox.attr('data-name') ).show();
} else {
$( '#' + checkbox.attr('data-name') ).hide();
}
});
});
</script>

This is pretty canonical.
I would use data-id instead of data-name though:
$(function() {
$('.my_features').on("change",function() {
$(`#${this.dataset.id}`).toggle(this.checked);
}).change(); // trigger the change
});
.toggleDiv { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="my_features" data-id="div1">Div 1</label>
<label><input type="checkbox" checked class="my_features" data-id="div2">Div 2</label>
<div id="div1" class="toggleDiv">Div1 div</div>
<div id="div2" class="toggleDiv">Div2 div</div>
If you do not like mixing DOM and jQuery access then
$(`#${$(this).data('id')}`).toggle($(this).is(':checked'));

I am assuming your question was how to show/hide the divs for checkboxes that are already checked/unchecked upon loading the page.
You can do this by passing in the same function you are using for change() into the each() method, which will iterate over each checkbox and run the function.
jQuery(document).ready(function($) {
$('.my_features').each(function(){
var checkbox = $(this);
//you can use data() method to get data-* attributes
var name = checkbox.data('name');
if( checkbox.is(':checked') ) {
$( '#' + name ).show();
} else {
$( '#' + name ).hide();
}
});
});
Demo
function update(){
var checkbox = $(this);
var name = checkbox.data('name');
if( checkbox.is(':checked') ) {
$( '#' + name ).show();
} else {
$( '#' + name ).hide();
}
}
//just setup change and each to use the same function
$('.my_features').change(update).each(update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="my_features" type="checkbox" data-name="first" />
<input class="my_features" type="checkbox" data-name="second" checked />
<input class="my_features" type="checkbox" data-name="third" checked />
<input class="my_features" type="checkbox" data-name="fourth" />
</div>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>

You can use the following to get the data and then show or hide the div based on the checkbox value
$(document).ready(function() {
$('.my_features').on('click', function() {
var checkbox = $(this);
var div = checkbox.data('name');
if (checkbox.is(':checked')) {
$('#' + div).show();
} else {
$('#' + div).hide();
}
});
})
You can see a working fiddle

$(document).ready(function(){
$('.my_features').change(function(){
if(this.checked)
$('#data-name').hide();
else
$('#data-name').show();
});
});

Try this way.
<script>
jQuery(document).ready(function($) {
$('.my_features').each(function() {
$(this).change(function() {
var checkbox = $(this);
if( checkbox.is(':checked') ) {
$( '#' + checkbox.attr('data-name') ).show();
} else {
$( '#' + checkbox.attr('data-name') ).hide();
}
});
});
});

How to automatically submit form if input field value exists?

I have the following form on my site. It's simple, one search input field and one submit button:
<form id="search-form" name="search-form" onsubmit="return search()">
<input type="search" id="query" class="search-field" value="<?php echo $searchQuery;?>">
<input type="submit" name="search-btn" id="search-btn" value="">
</form>
As you can see, in the search field (id=query) I have a php which sometimes inserts value into his field.
What I want to do is following:
If $searchQuery doesn't exist (or in other words, if value of search
field id=query is empty, allow user to click on the search button
manually.
If $searchQuery exist, auto submit the the form (simulate click on
the search button.
Any solution will help, JavaScript, jQuery or in PHP. I just need to figure out how to auto submit this form when PHP variable $searchQuery exists.

I believe you are asking specifically on initial page load. Use jQuery:
$(document).ready(function() {
if ($('#query').val() !== '') {
$('#search-form').submit();
}
});

You would need to just look to see if the value is populated and submit the form if it is.
jQuery Version:
$( function() {
if ( $( '#query' ).val() !== '' ) {
$( '#search-form' ).submit();
}
});
Fiddle: https://jsfiddle.net/fe9m8pk3/
Javascript Version:
function ready( fn ) {
if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
fn();
} else {
document.addEventListener( 'DOMContentLoaded', fn );
}
}
ready( function() {
if ( document.getElementById( 'query' ).value != '' ) {
document.getElementById( 'search-form' ).submit();
}
});
Fiddle: https://jsfiddle.net/qeo25yu1/

<script type="javascript/text">
var query = document.getElementById('query');
if(query.value != ''){
//do your submit
}
function yoursubmitfunctionname(){
//do your submit
}
query.addEventListener('change',yoursubmitfunctionname);
</script>

This code will submit form if character length minimum fullfiled using Jquery:
$(document).ready(function ()
{
var minimum_character = 7;
$('#query').on('propertychange input', function (e)
{
var valueChanged = false;
if(e.type=='propertychange')
{
valueChanged = e.originalEvent.propertyName=='value';
}
else
{
valueChanged = true;
}
if(valueChanged)
{
str_length = $('#query').val().length;
if(str_length == minimum_character)
{
$("#search-form").submit();
}
}
});
});

Disable submit button until all hidden inputs have a value

I have a simple form with hidden inputs and I'm trying to check whether each hidden input has a value. If all hidden inputs have a value than disable or enable the submit button. The inputs are being filled once the user clicks on an image via jquery. Ive tried multiple ways and it seems like I'm missing something....
<form method="post" action="test.php">
<div class="selections" id="accordion">
<h3>title<div class='status'>Pending</div></h3>
<div class='select-form'>
<div class='images'>
<img src='images/vote.jpg' data-value='data-value'>
<br/><span>title</span><br/>description
</div>
<input type='hidden' class='image-value' name='1' value=''>
</div>
<div class='select-form'>
<div class='images'>
<img src='images/vote.jpg' data-value='data-value2'>
<br/><span>title</span><br/>description
</div>
<input type='hidden' class='image-value2' name='2' value=''>
</div>
</div>
<input id="submit_button" type="submit" class="submit" value="SUBMIT">
</form>
the javascript goes as follows:
$( document ).ready(function() {
var $submit = $("input[type=submit]"),
$inputs = $('input[type=hidden]');
function checkEmpty() {
// filter over the empty inputs
return $inputs.filter(function() {
return !$.trim(this.value);
}).length === 0;
}
$inputs.on('blur', function() {
$submit.prop("disabled", !checkEmpty());
}).blur(); // trigger an initial blur
});
any ideas?

You could just call the checkEmpty() on img.click(), and from that function handle the disabled state.
Try it out here: JSFiddle (click the images)
$( document ).ready(function() {
var $submit = $("input[type=submit]"),
$inputs = $('input[type=hidden]');
function checkEmpty() {
var res = true;
$inputs.each( function(i,v){
if(v.value == ""){
res = false;
return false;
}
});
$submit.prop("disabled", !res);
}
$("img").click( function(){
$(this).parent().parent().find("input[type=hidden]").val("sdf");
checkEmpty();
});
checkEmpty(); //set disabled onload
});

Your trim function isn't behaving as you accept, remove it like here :
function checkEmpty() {
// filter over the empty inputs
return inputs.filter(function() {
return !(this.value);
}).length === 0;
}

Put this inside of the blur function to find out if all hidden inputs have a non empty value.
var empty=false;
$('input[type=hidden]').each(function(){
if($(this).val()==""){
empty=true;
}
});
if(empty){
//DISABLE SUBMIT
}

You're using $ in your JavaScript variables when you shouldn't be. Working fiddle: http://jsfiddle.net/keliix06/2f3cv2pk/
$( document ).ready(function() {
var submit = $("input[type=submit]"),
inputs = $('input[type=hidden]');
function checkEmpty() {
// filter over the empty inputs
return inputs.filter(function() {
return !$.trim(this.value);
}).length === 0;
}
inputs.on('blur', function() {
submit.prop("disabled", !checkEmpty());
}).blur(); // trigger an initial blur
});

Cannot get jQuery to get 2 values of input boxes

I am developing a little script on jsfiddle.com
I can get it to work with one element like in this jsfiddle: http://jsfiddle.net/8hXGq/3/
Here's the jQuery code:
jQuery(function() {
$("input[name=action]").click(function() {
value = $(':Password').val();
alert(value);
});
})
but then when I try to get 2 input values like in this jsfiddle it does not work
Visit http://jsfiddle.net/8hXGq/2/
Here's the jQuery code
jQuery(function(){
$("input[name=action]").click(function(){
newas = $(':Login').val();
value = $(':Password').val();
alert(value);
alert(newas);
});
})
How do I fix this problem?

':Password' is shorthand for input[type="password] thus works. Your problem is $(':Login') here you are looking for element input[type="Login] which doesn't exists
Use
jQuery(function () {
$("input[name=action]").click(function () {
newas = $("input[name=Login]").val();
alert(newas);
value = $(':Password').val();
alert(value);
});
})
DEMO

Try this:
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('input[name=Login]').val();
value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
DEMO

Please try this:
if get value on the basis of name property then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
If get value on the basis of id then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $("input[id$='Login']").val();
var value = $("input[id$='Password']").val()
alert(value);
alert(newas);
});
});

Change your jquery to look like this
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('[name=Login]').val();
value = $('[name=Password]').val();
alert(value);
alert(newas);
});
});

:Password is pseudo for type password, not for name. To access by name use [name=Login].
Also use var keyword as without var you initialized two global variable which is not allowed in ecmascript 5 strict mode and cause confusion sometime:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $(':Password').val();
alert(value);
alert(newas);
});
})
Here is Demo

:password is the Password selector of jQuery, thats why its not working with other pseudos.
https://api.jquery.com/password-selector/
i recommend NOT to do it how you did. instead it'll be better to acces by IDs.
this is working:
http://jsfiddle.net/Vy23k/1/
<input type="text" size="20" maxlength="15" name="login" id="login" />
<input type="password" size="32" maxlength="64" name="password" autocomplete="off" id="password" />
<input type="submit" name="action" class="button" value="Preview">
jQuery(function(){
$("input[name=action]").click(function(){
login = $("#login").val();
//pw = $(':Password').val(); //pseudo selector
pw = $("#password").val(); //better way
alert(login + " - " + pw);
});
})