We Keep Coding

jquery - toggle input values with link and php sessions

I have read all sorts of similar Q/A. This may be too specific I suppose.
I would like to toggle input (text) values by "clicking" a voided hyperlink
<a id="same" href="javascript:;">link</a>
The toggle values are stored in sessions.
So click the link once and value="session". Click again value="". Back and forth. I know its probably simple. I can read jquery. Still learning to write it.
$("#same").on("click", function(){
$("[name='event_contact_name']").val($("[name='<?php echo "session 1"; ?>']").val());
$("[name='event_contact_lastname']").val($("[name='<?php echo "session 2"; ?>']").val());
$("[name='event_contact_phone']").val($("[name='<?php echo "session 3"; ?>']").val());
$("[name='event_contact_email']").val($("[name='<?php echo "session 4"; ?>']").val());
});

You could PHP echo $_SESSION["something"] inside a data-* attribute of your input elements. like:
data-sessionval="<?= $_SESSION["something"] ?>"
Example with anchor toggle
$("#same").on("click", function() {
var tog = this._sessTog = !this._sessTog;
$("[data-sessionval]").val(function() {
return tog ? $(this).data("sessionval") : "";
});
});
<a id="same" href="javascript:;">Use session values</a>
<br>
Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But using anchors for something cehckoxes were invented for - seems odd, so:
$("#same").on("change", function() {
var ckd = this.checked;
$("[data-sessionval]").val(function() {
return ckd ? $(this).data("sessionval") : "";
});
});
<label><input id="same" type="checkbox"> Use session values</label>
<br>
Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you don't like the checkbox, use CSS:
$("#same").on("change", function() {
var ckd = this.checked;
$("[data-sessionval]").val(function() {
return ckd ? $(this).data("sessionval") : "";
});
});
[type=checkbox] + span:before {
margin-right: 10px;
content: "\2610";
}
[type=checkbox]:checked + span:before {
content: "\2611";
color: #0bf;
}
<label>
<input id="same" type="checkbox" hidden>
<span>Use Session values</span>
</label>
<br> Name: <input name="event_contact_name" data-sessionval="php echoed here">
Last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Input field validated only for first input field and not able to remove input field

I had created Ul which add the student input field with value and user can remove the field as well,Initially I am comparing student field value with each input field which are created to avoid duplication but it works only for first input field value not for others I used loop as well but its not working and not able to remove one input field at a time.
Here is my fiddle code
$('#addBtn').click(function () {
var studentArray = $(".students").text();
var i=" " ;
console.log(studentArray);
var studentSplitResult = studentArray.split('Remove');
console.log(studentSplitResult);
for (var i = 0; i < studentSplitResult.length; i++) {
if ($("#selectStd").val() !== $(".students").val()) {
$(".stdList").show();
var input_value = $('#selectStd').val();
$('ul').append('<input class="students" value="' + input_value + '">Remove</input>');
console.log($(".students").val());
// console.log(studentSplitResult[i]);
};
return false;
}
});
//prevent default action
$(document).on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
});

You can simplify your code like below.
Just check any text input has the new value before adding using filter. It will also handle case insensitivity (remove if required).
Also while removing consider the removing the text input only.
Added e.preventDefault() to restrict the form posting. change or remove it as per requirement.
$('#addBtn').click(function(e) {
e.preventDefault();
var input_value = $("#selectStd").val();
var isValid = $('input.students').filter(function() {
return this.value.toLowerCase() == input_value.toLowerCase();
}).length <= 0;
if (isValid) {
$('ul').append('<input class="students" value="' + input_value + '">Remove</input>');
} else {
alert('Duplicate');
}
});
//prevent default action
$(document).on('click', 'a.deleteStd', function(e) {
e.preventDefault();
$(this).prev('.students').remove();
$(this).remove();
});
<body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td><input class="form-control" id="selectStd" placeholder="Please select students"></td>
<td><button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button></td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label><br>
<br>
</ul>
<table>
</table>
</form>
</div>
</div>
</div>
</body>

I have encountered two issues: input validation itself (your question) and the removal of the element when you click on the anchor element.
For input validation, I have rewritten it a bit. What I did is
1. Obtain new student value
2. Check if not empty by if(newStudent). If it's empty, nothing happens
3. obtain other inputs
4. match the new input against the values inside other inputs
4a. if match, don't add it.
4b. if no match, add it
For removing the element, You need to revise your HTML. It's not so correct. I have wrapped it around with a <section> element to have a save removal and corrected the HTML use.
A side note, you may also reconsider this
$(document).on('click', 'a', function(e) {
e.preventDefault();
$(this).parent().remove();
});
If your HTML page has multiple anchor (<a>) elements, this function is used too on another anchor elements. If you click on these, it will remove these from the page upon click. If you don't want it, please revise the above function.
$('#addBtn').click(function(e) {
// obtain new student value
var newStudent = $('#selectStd').val();
// check if it is not empty
if (newStudent) {
// obtain other names and check if there is no match
var studentArray = $(".students");
var hasMatch = false;
studentArray.each(function(i, el) {
if (el.value === newStudent) {
hasMatch = true;
return; // stopping loop
}
});
// if there is no match, add student
if (!hasMatch) {
$('ul.stdList').append('<section><input class="students" value="' + newStudent + '" />Remove</section>');
}
}
return false;
});
//prevent default action
$(document).on('click', 'a', function(e) {
e.preventDefault();
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td>
<input class="form-control" id="selectStd" placeholder="Please select students">
</td>
<td>
<button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button>
</td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label>
<br>
<br>
</ul>
</form>
</div>
</div>

When adding you try this:
$('ul').append('<input class="students" value="' + input_value + '">Remove</input>');
Unfortunately this will not result in what you expect. The anchor will be adding by your browser next to the input not nested. Like this:
<input class="students" value="thevalue" />
<a href class="deleteStd">Remove</a>
So if you do this afterwards for removing $(this).parent().remove(); you will remove the entire container.
What you need to do is this:
$('ul').append('<div><input class="students" value="' + input_value + '" />Remove</div>');
This will work. I have updated your fiddle: https://jsfiddle.net/Lojdfyhn/1/

So based on your requirements, try this below code:
Student names can't be duplicate
And on removing, all names shouldn't removed.
While adding, code checks if the student name exists. If yes, it throws an error/alert.
$('#addBtn').click(function() {
var valueToCheck = $("#selectStd").val();
var flag = true;
$(".students").each(function() {
if ($(this).val() === valueToCheck) {
flag = false;
}
});
if (flag) {
$('ul').append('<span class="addedStudent"><input class="students" value="' + valueToCheck + '" />Remove</span>');
} else {
alert(valueToCheck + " already exists.");
}
return false;
});
//prevent default action
$(document).on('click', 'a.deleteStd', function(e) {
e.preventDefault();
$(this).parents(".addedStudent:first").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style=" width:422px;border: 1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType">
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td><input class="form-control" id="selectStd" placeholder="Please select students"></td>
<td><button id="addBtn" class="btn btn-default" style="margin-left: 17px;">Add</button></td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label><br>
<br>
</ul>
<table>
</table>
</form>
</div>
</div>

You are trying to delete the parent element of anchor tag.
Just update your code like this
$('ul').append('<div><input class="students" value="' + input_value + '">Remove</input></div>');
then clicking on anchor will delete the parent of anchor element.

Hello first of all you need to get a good understanding of the DOM traversing, which can really help you to organise the students that you are adding to the list, and removing.
Here a simple solution can be implemented as follows.
First encapsulate all the students in a div tag with 'students' class name, and in that div, place the student text field with 'stdname' class and the anchor tag to help in removing the student details.
Now when traverse through all the students with 'stdname' class and check if there is a duplicate value.
Here is the code please check out.
and check on jsfiddle too.http://jsfiddle.net/naveen_namani/842bf5ke/1/
$('#addBtn').click(function () {
var student_list=document.querySelectorAll(".students .stdname");
var selectStd=document.getElementById("selectStd");
var duplicate=false;
for(var i=0;i<student_list.length;i++) {
if(student_list[i].value==selectStd.value) duplicate=true;
}
if(duplicate==false) {
$('ul').append('<div class="students"><input value="'+selectStd.value+'" class="stdname"/>Remove');
}
return false;
});
$(document).on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-body" style="width:422px;border:1px solid #00A4CC;">
<div id="errorLabel"></div>
<div id="parentType" >
<form id="parentForm" name="parentForm">
<table style="margin-left: 8px;">
<tr>
<th>Select Student</th>
<td>
<input class="form-control" id="selectStd" placeholder="Please select students">
</td>
<td>
<button id="addBtn" class="btn btn-default" style="margin-left: 17px;" >Add</button>
</td>
</tr>
</table>
<ul class="stdList">
<label>Selected Students:</label>
<br><br>
</ul>
<table ></table>
</form>
</div>
</div>

Jquery how to count checkboxes from different divs

i have problem with counting checkboxes that are in different divs. It has to count if there is at least one checked checkbox checked in every div, and when there is, it makes a submit button active, else the submit button is inactive.
<div id="collapseOne">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
<div id="collapseTwo">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
$(document).ready(function() {
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if(($a && $b)>0 ){
$("#button").addClass('active')
}
else{
$("#button").removeClass('active').addClass('disabled')
}
});

You need to use length instead of lenght
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
as well as using:
if($a > 0 && $b>0 ){
instead of:
if(($a && $b)>0 ){
Edit: You also need to wrap your code inside change() function to keep track when your input has been changed:
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
$a = $('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b = $('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if (($a && $b) > 0) {
$("#button").addClass('active')
} else {
$("#button").removeClass('active').addClass('disabled')
}
}).change();
});
Fiddle Demo

checkboxes tiny and unclickable in chrome

For some reason the check-boxes on this form are not clickable and are very, very, tiny using google chrome. When using firefox the checkboxes work great. I'm not exactly sure what to look for... It's really strange!!! Is there something wrong with the way I'm using <form>? When I use inspector even if I disable all css the checkboxes are still tiny. not sure what is going on. reset browser cache etc. really could use some help.
HTML: http://pastebin.com/Pt6YgGP7:
CSS: http://pastebin.com/WHap5Vmh
Screenshot:
<div class="categories">
<button class="tyl_category" id="category1">Category1</button>
</div>
<form name ="things-you-like-form" class="sub-categories" action="things-you-like">
<div class="control-group">
<div class="controls category" id="form-category1">
Select from Category 1
<input type="checkbox" name="tyl_picked1" value="c1s1">
<label for "category1-subcategory1">1.1</label>
<input type="checkbox" name="tyl_picked1" value="c12">
<label for "category1-subcategory2">1.2</label>
<input type="checkbox" name="tyl_picked1" value="c1s3">
<label for "category1-subcategory3">1.3</label>
<input type="checkbox" name="tyl_picked1" value="c1s4">
<label for "category1-subcategory4">1.1</label>
</div>
</div>
<!-- end for-each sub-categores -->
</form>
</div>
JS
<script>
$(document).ready(function() {
$('form').each(function() { this.reset() });
var progress = 0;
$categories = $('.categories');
$sub_categories = $('.sub-categories');
$(document).on('click','.tyl_category', function(e) {
$form = $('#form-'+this.id);
console.log(this.id);
$categories.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$form.show('slide', { direction: 'right' },250);
});
});
$(document).on('click','input[type="checkbox"]', function (e) {
var $this = $(this);
var $progress_bar = $('#tyl_progress_bar');
if ($this.is(':checked')) {
progress +=1;
} else {
progress -=1;
}
$progress_bar.text('Step '+progress+'/5');
$progress_bar.css({width: (progress*25)+"%"});
$form = $this.parent('div');
$form.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$categories.show('slide', { direction: 'right' },250);
});
});
});
</script>

I had this problem too and had to set the checkbox height and width:
.make-checkbox-reasonable-height {
height: 16px;
width: 16px;
}
<div class="col-sm-2">
<input asp-for="MyCheckBox" class="form-control input-control make-checkbox-reasonable-height" />
</div>

Livequery and each()

i have an .each() loop doing something on all matching elements. but i also have a way to add those elements.... i'm trying to get livequery to realize that a new element has been added and run it through the same each loop.
here's a general setup:
http://jsfiddle.net/CUURF/1/
basically, how do i use livequery and each together?
ultimately it is so that i can dynamically add tinymce editor textboxes in metaboxes, but i am fairly certain the problem is that my IDs aren't autoincremting on the add/clone, since the new element isn't in the DOM for the each loop.
edit- i think the biggest thing is that i need the index counter that comes standard w/ .each to work w/ livequery?
edit- here's the code from wpalchemy for looping/cloning
/* <![CDATA[ */
jQuery(function($)
{
$(document).click(function(e)
{
var elem = $(e.target);
if (elem.attr('class') && elem.filter('[class*=dodelete]').length)
{
e.preventDefault();
var p = elem.parents('.postbox'); /*wp*/
var the_name = elem.attr('class').match(/dodelete-([a-zA-Z0-9_-]*)/i);
the_name = (the_name && the_name[1]) ? the_name[1] : null ;
/* todo: expose and allow editing of this message */
if (confirm('This action can not be undone, are you sure?'))
{
if (the_name)
{
$('.wpa_group-'+ the_name, p).not('.tocopy').remove();
}
else
{
elem.parents('.wpa_group').remove();
}
the_name = elem.parents('.wpa_group').attr('class').match(/wpa_group-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_delete');
}
}
});
$('[class*=docopy-]').click(function(e)
{
e.preventDefault();
var p = $(this).parents('.postbox'); /*wp*/
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
var the_group = $('.wpa_group-'+ the_name +':first.tocopy', p);
var the_clone = the_group.clone().removeClass('tocopy');
var the_props = ['name', 'id', 'for'];
the_group.find('input, textarea, select, button, label').each(function(i,elem)
{
for (var j = 0; j < the_props.length; j++)
{
var the_prop = $(elem).attr(the_props[j]);
if (the_prop)
{
var the_match = the_prop.match(/\[(\d+)\]/i);
if (the_match)
{
the_prop = the_prop.replace(the_match[0],'['+(+the_match[1]+1)+']');
$(elem).attr(the_props[j], the_prop);
}
}
}
});
if ($(this).hasClass('ontop'))
{
$('.wpa_group-'+ the_name +':first', p).before(the_clone);
}
else
{
the_group.before(the_clone);
}
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_copy', [the_clone]);
});
function checkLoopLimit(name)
{
var elem = $('.docopy-' + name);
var the_match = $('.wpa_loop-' + name).attr('class').match(/wpa_loop_limit-([0-9]*)/i);
if (the_match)
{
var the_limit = the_match[1];
if ($('.wpa_group-' + name).not('.wpa_group.tocopy').length >= the_limit)
{
elem.hide();
}
else
{
elem.show();
}
}
}
/* do an initial limit check, show or hide buttons */
$('[class*=docopy-]').each(function()
{
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
});
});
/* ]]> */
</script>
and the markup for inside my metabox:
<div id="testimonials">
<h2>Testimonials</h2>
<a style="float:right; margin:0 10px;" href="#" class="dodelete-testimonials button"><span class="icon delete"></span>Remove All</a>
<div id="wpa_loop-testimonials" class="wpa_loop wpa_loop-testimonials"><div class="wpa_group wpa_group-testimonials first">
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="" alt="preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][0][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][0][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Change Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][0][testimonial_desc]">I realized it was ME causing all the problems</textarea>
</div>
</div>
</div> <div class="wpa_group wpa_group-testimonials last tocopy">
<h3 class="slide">Testimonial Name:
<input type="text" name="_sidebar_meta[testimonials][1][testimonial_name]" value="" />
</h3>
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="http://localhost/multi/wp-content/themes/callingintheone/functions/WPAlchemy/images/default_preview.png" alt="_sidebar_meta[testimonials][1][testimonial_image] Preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][1][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][1][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Upload Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][1][testimonial_desc]"></textarea>
</div>
</div>
</div></div>
<p style="margin-bottom:15px; padding-top:5px;"><span class="icon add"></span>Add Testimonial</p>
</div>
the .tocopy class gets shifted by the alchemy code to a new hidden (by CSS) and last element

Your problem was that each was not executing with the clik. And after that there was nothing to make it run.
fixed code

Answer: http://jsfiddle.net/morrison/CUURF/6/
Notes:
Does not use livequery. There's no need to in this instance.
Keeps track of existing editors in an array. This is faster than cycling through the DOM every time you want an editor. DOM stuff is slow, arrays are fast. This also gives you easy access to any or all of the editors for other things you might do.
Doesn't cycle when a new editor is created. It simply modifies the new editor to have an id of the last one plus 1. This is a huge performance boost.