Develop Reference

Filtered HTML list: making li elements initially invisible

This is the HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="orasul tau..">
<ul id="myUL">
<li>Bucuresti</li>
<li>Cluj</li>
<li>Timisoara</li>
</ul>
And this is my scipt:
var value = $('#myInput').val();
if(value.length == 0) {
$("#myUL li").style.display = "none";
}
$('#myInput').bind('keyup', function() {
var searchString = $(this).val();
$("ul li").each(function(index, value) {
currentName = $(value).text()
if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
$(value).show();
} else {
$(value).hide();
}
});
});
I want to filter the elements of the ul based on the text in the input.
Everything is working perfectly without that initial if statement, but I want all the li elements to initially have diplay:none. Adding that if deactivates the whole filtering. Any possible solution for how I could do that?
Any help would be appreciated.

The problem is that $("#myUL li").style.display = "none" doesn't make sense. $("#myUL li") is jQuery instance object, not HTMLElement. So it doesn't have property style.
Use $("#myUL li").hide() to hide all elements.
However, the better approach is to use CSS to hide LI initially and trigger one search on page load if myInput has value:
var $input = $('#myInput').on('input', function() {
var searchString = $(this).val();
$("ul li").each(function(index, value) {
var currentName = $(value).text()
var shouldShow = searchString.length && currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1;
if (shouldShow) {
$(value).show();
} else {
$(value).hide();
}
});
});
var value = $input.val();
if (value.length !== 0) {
$input.trigger('keyup');
}
#myUL li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="orasul tau..">
<ul id="myUL">
<li>Bucuresti</li>
<li>Cluj</li>
<li>Timisoara</li>
</ul>

Try $('#myUL li').hide() like the following:
var value = $('#myInput').val();
if(value.length == 0) {
$('#myUL li').hide();
}
$('#myInput').bind('keyup', function() {
var searchString = $(this).val();
$("ul li").each(function(index, value) {
currentName = $(value).text()
if(searchString == ''){$('#myUL li').hide(); }
else if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
$(value).show();
} else {
$(value).hide();
}
});
});
function myFunction(){}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="orasul tau..">
<ul id="myUL">
<li>Bucuresti</li>
<li>Cluj</li>
<li>Timisoara</li>
</ul>

https://jsfiddle.net/Lmhw3u5n/1/
js
var value = $('#myInput').val();
//if(value.length == 0) {
//$("#myUL li").style.display = "none";
//}
$('#myInput').bind('keyup', function() {
var searchString = $(this).val();
if(searchString == '') {
document.getElementById('myUL').style.display = 'none';
}
else {
document.getElementById('myUL').style.display = 'block';
}
$("ul li").each(function(index, value) {
currentName = $(value).text()
if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
$(value).show();
} else {
$(value).hide();
}
});
});

on.change() event doesn't run when manually setting value of <select>

As the title describes, I'm having a problem with a function running using the
$("element_name").on("change", some_function)
event on a select when manually setting the element's value like
$("element_name").val("")
I read something about a "chosen" and I don't understand what that has anything to do with the issue.
Anybody know why the on.change() handler isn't catching the manual value change?
EDIT: I am including additional information as the solutions suggested do not work.
trigger("change"), bind("change", and on("change") do not work.
This is the code for the recreated select that controls the value setting:
(function($) {
$.extend({
fancySelect: function(options) {
var defaults = {
autoClose: true
}
var options = $.extend(defaults, options);
$("select").hide();
$("select").each(function() {
var $select = $(this);
var $fancyselect = $('<div class="fancyselect"/>');
$select.after($fancyselect);
var $ul = $('<ul/>').appendTo($fancyselect);
$ul.hide();
var $options = $select.find("option");
var $span = $("<div/>").addClass("fancyselect-label").prependTo($fancyselect);
var $arrow = $("<div>▼</div>").addClass("fancyselect-arrow").appendTo($fancyselect);
var selected = $select.find("option[selected=selected]");
var toUse = 0;
if (selected.length == 0) {
toUse = $options.first();
} else {
toUse = selected.first();
}
$span.text(toUse.text());
$options.each(function() {
var $option = $(this);
var label = $option.text();
var value = $option.val();
if ($option.is(":selected")) {
$span.text(label);
}
var $li = $('<li value="' + value + '">' + label + '</li>').appendTo($ul).bind("click", function() {
$select.val(value);
if ($option.index() == $(this).index()) {
$options.removeAttr("selected");
$option.attr("selected", "selected");
}
$span.html(label);
if (options.autoClose) {
$ul.hide();
$fancyselect.removeClass("active");
}
$ul.find("li").removeAttr("class");
$(this).addClass("selected");
});
if ($option.is(":selected")) {
$li.addClass("selected");
}
});
if (!$select.attr("disabled")) {
var $j = 0;
$span.bind("click", function() {
if ($ul.is(":visible")) {
$ul.hide();
$fancyselect.removeClass("active");
$arrow.html("▼");
} else {
$(".fancyselect").each(function() {
$(this).find("ul").hide();
$(this).removeClass("active");
});
$ul.show();
$fancyselect.addClass("active");
$arrow.html("▼");
if ($j == 0) $ul.tinyScrollbar();
$j++;
}
});
} else {
$fancyselect.addClass("disabled");
}
});
$(document).bind("keyup keydown keypress", function(event) {
$(".fancyselect").each(function() {
var $ul = $(this).find("ul");
if ($ul.is(":visible")) {
var keycode = parseInt((event.keyCode ? event.keyCode : event.which));
if(keycode >= 48 && keycode <= 90){
$ul.find("li").each(function() {
if ($(this).text().substr(0, 1) == String.fromCharCode(event.keyCode)) {
$ul.find("li").removeAttr("class");
$(this).addClass("selected");
return;
}
});
} else if (keycode == 13) {
$ul.hide();
}
return;
}
});
});
}
});
})(jQuery);
$.fancySelect();
And this is the code for the binding:
$(".downloads-series-sort select").trigger("change", load_downloads);

Dynamically changing the view with Javascript

I am trying to do a simple task.
I have a button on a page
I click the button and it shows a label and an HTML select drop-down list.
Whenever I change drop-down list value, the label should change.
The code is below. Whenever I run it, it the label just changes once and the options tab never changes.
$(document).ready(function() {
showButton();
});
function showButton() {
//draw button
var $button = '<button type="button" id= "button">Button</button>';
$('.div1').after(button);
//add event listener on click
document.getElementById("thebutton").addEventListener("click",showLabel());
}
function showLabel() {
var label = "one";
var option = document.getElementById("options").value;
if(option == "one") {
label = "one";
}
if(option == "two") {
label = "two";
}
if(option == "two") {
label = "three";
}
var selectOptions = '<div align ="right"><select id="options"><option value="one">one</option><option value="two">two</option><option value="three">three</option></select></div>';
document.getElementById("container").innerHTML = selectOptions+ label;
document.getElementById("options").addEventListener("change", function(){
console.log('changed option');
showLabel();
});
}
Any ideas?

Edit:
<script>
$(document).ready(function() {
$('.div1').append('<button type="button" onclick="javascript:showLabel()" id="button">Button</button>');
$('.container').append('<div><select id="options"><option value="1">one</option><option value="2">two</option><option value="3">three</option></select></div>');
});
function showLabel() {
var option = document.getElementById("options").value;
if (option == 1) {
labelVal = 'one';
} else if (option == 2) {
labelVal = 'two';
} else if (option == 3) {
labelVal = 'three';
}
if (document.getElementById('label') != null) {
$('#label').val(labelVal);
} else {
$('.container').append('<input type="text" id="label" value="' + labelVal + '">');
}
}
</script>
<div class="div1"></div>
<div class="container"></div>

How can I customize a MadMimi embedded email form?

I'm using MadMimi to collect emails on a pre-launch website (http://www.saashopper.com), and need to change the embedded form so it doesn't open a new tab when confirming the email signup. I want it to just confirm underneath the input field that the signup was successful (or not, and why). How should I go about doing this?
Here's the embed code MadMimi provided:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="_blank">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"/>
<input name="authenticity_token" type="hidden" value="5twZyvvQepHt/3X9lhtT+Z3Zeb1OFVeAPFMLBjbukwA="/>
</div>
<div class="mimi_field required">
<label for="signup_email">Email*</label>
<br/>
<input id="signup_email" name="signup[email]" type="text" data-required-field="This field is required" placeholder="you#example.com"/>
</div>
<div>
<input type="submit" class="submit" value="Subscribe" id="webform_submit_button" data-default-text="Subscribe" data-submitting-text="Sending..." data-invalid-text="↑ You forgot some required fields" data-choose-list="↑ Choose a list">
</input>
</div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementById('mad_mimi_signup_form'),
submit = document.getElementById('webform_submit_button'),
validEmail = /.+#.+\..+/,
isValid;
form.onsubmit = function(event) {
validate();
if(!isValid) {
revalidateOnChange();
return false;
}
};
function validate() {
isValid = true;
emailValidation();
fieldAndListValidation();
updateFormAfterValidation();
}
function emailValidation() {
var email = document.getElementById('signup_email');
if(!validEmail.test(email.value)) {
textFieldError(email);
isValid = false;
} else {
removeTextFieldError(email);
}
}
function fieldAndListValidation() {
var fields = form.querySelectorAll('.mimi_field.required');
for(var i = 0; i < fields.length; ++i) {
var field = fields[i],
type = fieldType(field);
if(type == 'checkboxes' || type == 'radio_buttons') {
checkboxAndRadioValidation(field);
} else {
textAndDropdownValidation(field, type);
}
}
}
function fieldType(field) {
var type = field.querySelectorAll('.field_type');
if(type.length > 0) {
return type[0].getAttribute('data-field-type');
} else if(field.className.indexOf('checkgroup') >= 0) {
return 'checkboxes';
} else {
return 'text_field';
}
}
function checkboxAndRadioValidation(field) {
var inputs = field.getElementsByTagName('input'),
selected = false;
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
}
if(selected) {
field.className = field.className.replace(/ invalid/g, '');
} else {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
}
}
function textAndDropdownValidation(field, type) {
var inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if(input.name.indexOf('signup') >= 0) {
if(type == 'text_field') {
textValidation(input);
} else {
dropdownValidation(field, input);
}
}
}
htmlEmbedDropdownValidation(field);
}
function textValidation(input) {
if(input.id == 'signup_email') return;
var val = input.value;
if(val == '') {
textFieldError(input);
isValid = false;
return;
} else {
removeTextFieldError(input)
}
}
function dropdownValidation(field, input) {
var val = input.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
onSelectCallback(input);
isValid = false;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
function htmlEmbedDropdownValidation(field) {
var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
for(var i = 0; i < dropdowns.length; ++i) {
var dropdown = dropdowns[i],
val = dropdown.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
dropdown.onchange = validate;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
}
function textFieldError(input) {
input.className = 'required invalid';
input.placeholder = input.getAttribute('data-required-field');
}
function removeTextFieldError(input) {
input.className = 'required';
input.placeholder = '';
}
function onSelectCallback(input) {
if(typeof Widget != 'undefined' && Widget.BasicDropdown != undefined) {
var dropdownEl = input.parentNode,
instances = Widget.BasicDropdown.instances;
for(var i = 0; i < instances.length; ++i) {
var instance = instances[i];
if(instance.wrapperEl == dropdownEl) {
instance.onSelect = validate;
}
}
}
}
function updateFormAfterValidation() {
form.className = setFormClassName();
submit.value = submitButtonText();
submit.disabled = !isValid;
submit.className = isValid ? 'submit' : 'disabled';
}
function setFormClassName() {
var name = form.className;
if(isValid) {
return name.replace(/\s?mimi_invalid/, '');
} else {
if(name.indexOf('mimi_invalid') == -1) {
return name += ' mimi_invalid';
} else {
return name;
}
}
}
function submitButtonText() {
var invalidFields = document.querySelectorAll('.invalid'),
text;
if(isValid || invalidFields == undefined) {
text = submit.getAttribute('data-default-text');
} else {
if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
text = submit.getAttribute('data-invalid-text');
} else {
text = submit.getAttribute('data-choose-list');
}
}
return text;
}
function revalidateOnChange() {
var fields = form.querySelectorAll(".mimi_field.required");
for(var i = 0; i < fields.length; ++i) {
var inputs = fields[i].getElementsByTagName('input');
for(var j = 0; j < inputs.length; ++j) {
inputs[j].onchange = validate;
}
}
}
})();
</script>

You can add and iframe under the input field like this:
<iframe name="myFrame">
<p>Your browser does not support iframes.</p>
</iframe>
And then change the target attribute of the form and give it the iframe name:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="myFrame">
Thus the result will be shown in the iframe window in the same page.

How to submit form only one check box is selected using java script

on edit button click a want to submit form only if one check box checked,don't submit when 0 or more than 2 check box checked
my below code is not working
$("#editbtn_id").click(function () {
var cnt = 0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
});
if (ischecked) {
checkbox_value += $(this).val();
cnt = cnt + 1;
if (cnt == 0 || cnt > 1) {
alert(cnt);
alert("Please select one Test case");
return false;
}
}
return false;
});
HTML
<form action="/editSingletest/{{ testcase.id }}" method="post" onsubmit="return" >
<input type="checkbox"/>
</form>

You can achieve this by following code
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_checked_count = 0;
var form_submit = false;
$(":checkbox").each(function () {
if($(this).is(":checked")) {
checkbox_checked_count++
}
});
if(checkbox_checked_count == 1) {
form_submit = true;
}
else if(checkbox_checked_count > 1) {
alert("Please select one Test case");
}
alert(form_submit)
$("form").submit();
});
Check working example here in this fiddle

Your counter is in the wrong loop, should be something like this:
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
if (ischecked){
checkbox_value += $(this).val();
cnt=cnt + 1 ;
}
});
if(cnt==0 || cnt > 1){ ... }
});

try this
$("#editbtn_id").click(function (e) {
if($('form input[type="checkbox"]:checked').length == 1){
$('form').submit();
}
else{
e.preventDefault();
}
});
for 'form' use your form selector