We Keep Coding

Duplicate input on click, insert before clicked element - jQuery

I have markup like so:
$('label.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_one[]">
<label class="duplicate" for="input_one[]">Add another car</label>
This doesn't duplicate, or provide an error so I don't know why this is not working?

It is working, but you need to wait for the dom-structur to load before you run you code. Put everything inside documet.ready like this:
$(document).ready(function() {
$('label.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
})
Or insert your code dead last on you page. Read more about this here: https://learn.jquery.com/using-jquery-core/document-ready/

<input type="text" name="input_one[]">
<label class="duplicate" for="input_one[]">Add another car</label>
just .duplicate is enough to duplicate:
$(function(){
$('.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
}

Checkbox check event is not getting prevented

I have a set of set of checkboxes on which I want to restrict to check maximum of one. If the choice needs to be changed then first checked ones need to be unchecked but maximum limit needs to be one.
Here is the jquery code.
$('#ReportRow').on('click', 'input[type="checkbox"]', (function (event) {
alert("Hi");
var checkedReportValues = $('#ReportRow input:checkbox:checked').map(function () {
return this.value;
}).get();
if ($("#ReportRow input:checkbox:checked").length > 1) {
return false;
}
alert(checkedReportValues);
})
);
Here, the above code is restricting only one checkbox to be checked but when I am trying to check other, they first are being checked and then unchecked. Where I am doing wrong ?
Here is the dynamically created HTML.
//Add Code to Create CheckBox dynamically by accessing data from Ajax for the application selected above
var Reports = " User, Admin, Detail, Summary";
var arrReportscheckBoxItems = Reports.split(',');
var reportscheckBoxhtml = ''
for (var i = 0; i < arrReportscheckBoxItems.length; i++) {
reportscheckBoxhtml += ' <label style="font-weight: 600; color: #00467f !important;"><input type="checkbox" value=' + arrReportscheckBoxItems[i] + '>' + arrReportscheckBoxItems[i] + '</label>';
}
//Add Submit button here
reportscheckBoxhtml += ' <button type="button" id="SubmitReport" class="btn btn-primary">Submit</button>';
$('#ReportRow').html(reportscheckBoxhtml);

Try this: uncheck all other checkboxes except clicked one inside click event handler, like below
$('#ReportRow').on('click', 'input[type="checkbox"]',function(){
$('#ReportRow input[type="checkbox"]').not(this).prop("checked",false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReportRow">
<input type="checkbox">one
<input type="checkbox">Two
<input type="checkbox">Three
<input type="checkbox">Four
</div>

This line:
if ($("#ReportRow input:checkbox:checked").length > 1) {
return false;
}
is saying you want to uncheck the checkbox. It's doing exactly what you tell it to do. Just a comment: Users may be confused since checkboxes are meant to check multiple selections. Radio buttons are designed for being able to select only one option.

you are returning false from the function when there is a checkbox already selected, which is preventing the checkbox selection.
if ($("#ReportRow input:checkbox:checked").length > 1) {
return false;
}
Do something like this:
$('#ReportRow').on('click', 'input[type="checkbox"]', (function (event) {
alert("Hi");
var curCheckBox = this;
$('#ReportRow').find('input[type="checkbox"]').each(function() {
if(this === curCheckBox)
$(this).attr("checked",true);
else
$(this).attr("checked",false);
});
alert(checkedReportValues);
});

Make a clickable dropdown that gets the values and places them in a table JQuery

This is a validation check that already works i have a name,Email and some other input fields this checks if everything is filled in and if not it makes the inputfields red. if everything is correct it will create a table with the values of the inputfields i have filled in.
<script>
$(document).ready(function(){
$('input[name="submit"]').click(function(e) {
e.preventDefault();
formIsValid = true;
var errors = [];
$('.errors').html("");
$('input.required').each(function() {
if ($(this).val() == '') {
formIsValid = false;
message = $(this).attr('id') + ' is required';
errors.push(message);
$(this).addClass("red");
} else{
$(this).removeClass("red");
}
});
if (formIsValid == true) {
$('.data').append('<tr class="datarow"><td>'+$('input[name="name"]').val()+'</td><td>'+$('input[name="email"]').val()+'</td><td>'+$('input[name="phone_number"]').val()+'</td><td class="delete">X</td></tr>');
updateTotalRows();
$('.delete').click(function() {
$(this).parent().remove();
updateTotalRows();
})
}
});
function updateTotalRows() {
$('.total').html('Ik heb nu : ' + $('.datarow').length + ' rows');
}
});
</script>
<script>
function selectCountry() {
$('.data').append('<tr class="datarow"><td>'+$('.info_link').val()+'</td><td>'+'</td><td class="delete">X</td></tr>');
updateTotalRows();
}
</script>
I already have a clickable dropdown with country's in it but when i click it should use my function selectCountry. That function should make a table with the name of the subitem i have clicked.
Landen
Nederland
Duitsland
Frankrijk
<script>
$(".dropdown")
.bind("click", function (selectCountry) {
console.log((selectCountry))
});
</script>
<script>
$(function(){
$('.info_link').click(function(){
alert($(this).text()); //$('#table tr:last').append($("<td></td>").text());
});
});
</script>
so my question is how do i make a clickable dropdown that takes the value of the subitem and puts it in a table.

You can use a standard <select id="mySelect"><option value="abc">ABC</option></select> element and add a function on element value change:
$("#mySelect").change(function() {
var optionValue = $(this).val();
$('#table tr:last').append('<td>' + optionValue + '</td>');
});

I got a annoying bug in storing input value using localStorage

I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});

To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});

There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>

Make jquery validation on javascript functions - change

Can anyone help me make jquery validation on a javascript function. basically it change the UI whenever you choose one of the accounts on a dropdown menu: I want to check that one of them in the checkbox was selected to display "you need to check one of them"
$("#selectAcc").change(function() {
var type = $("#selectAcc option:selected").text();
$("#accountInfo").empty();
if (type === "Saving Account") {
$("#accountInfo").append("<label>Rate: </label><input type='text' name='rate'><br>");
$("#accountInfo").append("<input type='checkbox' name='days' value='90' id='90'/>90 days<br>");
$("#accountInfo").append("<input type='checkbox' name='days' value='180' id='180'/>180 days<br>");
$("#accountInfo").append("<input type='checkbox' name='days' value='360' id='360'/>360 days<br>");
$("input:checkbox").click(function() {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});

If you are looking for a way to count the checkboxes that are checked based on a grouping by the name attribute this might help you:
$("input:checkbox").click(function() {
var clicked_count = $('input:checkbox[name="'+$(this).attr("name")+'"]:checked').length;
console.log( clicked_count + " checkboxes are checked" );
});
So you might display "you need to check one of them" when the result of this is 0.

connect the listener to an element that isnt added after dom.
$("#accountInfo").on('click', 'input', function(){
// do something
});

Could you try with radio button instead? Something like this:
http://jsfiddle.net/3Ab3z/1
Or if you are checking is there any checkbox checked;
$("#selectAcc").change(function() {
var checked=0;
$( "input:checkbox" ).each(function() {
if($(this).is(':checked')){
checked++;
}
});
if(checked==0){
alert('Please check days!');
}
});