We Keep Coding

why my for loop is infinite here

below is the js code for wikipedia search project. I am getting infinite for loop even though it had condition to stop repeating the loop. I am stuck in this problem.
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
for (i = 1; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});

You are appending to each and every one of <p> in page.
Since your for loop appends even more <p> (and you possibly have a high number of <p> elements in your page beforehand) you overflow your call stack.
You probably wanted to append to a specific <p>. Try giving an id to your selector.

from what i can see in the url you need to do the following:
loop over the terms found and select the link based on the index of the element, chose a single element .contentto append the data not a set of elements p, this will increase the number of duplicated results
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search='+srcv+'&format=json&limit=20&callback=?', function(json){
$.each(json[1],function(i,v){
$('.content').append("<p><a href ='"+json[2][i]+"'target='_blank'>"+json[0]+"</a>"+v+"</p>");
});
});
see demo: https://jsfiddle.net/x79zzp5a/

Try this
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
var i = 1;
for (i; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});

jQuery - Total and extra divs not showing?

i am trying to show the total amount of selected persons, and also add that number of extra divs in the form
This is me code: fiddle , but the total amount of persons is not showing also the extra divs are not working.
This is an example how it should be like : fiddle
What is wrong? And how can i make this work? Thanks!
This is my JS
$(document).ready(function(){
var sum = 0;
$(document).on('change', 'div select',function(){
sum = 0;
$('div select').each(function(){
var thisVal = parseInt($(this).val());
sum += thisVal;
});
$('#person-total').text(sum);
// you can use here
// remove all divs
$('div[class^="passenger"]').remove();
// to show divs depending on number of persons
for(var i = 1 ; i <= sum ; i++){
$('body').append('<div class="passenger'+i+'"><label for="passenger_name">Passenger '+i+'</label><input name="passenger_name_'+i+'" type="text" id="passenger_name" placeholder="FIRSTNAME"><input name="passenger_lname_'+i+'" type="text" id="passenger_lname" placeholder="LASTNAME"><input name="passenger_age_'+i+'" type="text" id="passenger_age" placeholder="AGE"></div>');
}
});
});
I found the problem i tink, its calculating al selected options., but how can i change this :
$(document).on('change', 'div select',function(){
sum = 0;
$('div select').each(function(){
var thisVal = parseInt($(this).val());
sum += thisVal;
});
Special for working for 1 div ?

The problem here is that your "choose a trip" drop down matches the selector 'div select', so it is included in the .each() loop. So when you call
parseInt($(this).val());
You end up with NaN which stands for "Not a Number".
I added a class of "count-select" to each of the select elements that should be included in this function, and modified the JavaScript as follows:
JS
$(document).ready(function () {
var sum = 0;
$(document).on('change', '.count-select', function () {
sum = 0;
$('.count-select').each(function () {
var thisVal = parseInt($(this).val());
sum += thisVal;
});
$('#person-total').text(sum);
// you can use here
// remove all divs
$('div[class^="passenger"]').remove();
// to show divs depending on number of persons
for (var i = 1; i <= sum; i++) {
$('body').append('<div class="passenger' + i + '"><label for="passenger_name">Passenger ' + i + '</label><input name="passenger_name_' + i + '" type="text" id="passenger_name" placeholder="FIRSTNAME"><input name="passenger_lname_' + i + '" type="text" id="passenger_lname" placeholder="LASTNAME"><input name="passenger_age_' + i + '" type="text" id="passenger_age" placeholder="AGE"></div>');
}
});
});
Here's the updated fiddle: https://jsfiddle.net/voveson/9rspxhjy/2/
Hope it helps!

Auto filling parentheses and hyphen for phone number input jquery

I want to have a user's input auto fill the punctuation of a phone number to look like this (xxx) xxx-xxxx. I have written an example jfiddle here but it breaks when filling in the last 4 digits of the phone number.
$("#phone").on("change keyup paste", function () {
var output;
var input = $("#phone").val();
input = input.replace(/[^0-9]/g, '');
var area = input.substr(0, 3);
var pre = input.substr(3, 4);
var tel = input.substr(6, 4);
if (area.length < 3) {
output = "(" + area;
} else if (area.length == 3 && pre.length < 3) {
output = "(" + area + ")" + " " + pre;
} else if (area.length == 3 && pre.length == 3) {
output = "(" + area + ")" + " " + pre + "-" + tel;
}
$("#phone").val(output);
});
HTMl:
<input id='phone'></input>

I realize this post is older but i found it quite useful and made some minor modifications to enhance it for all telephone fields and to allow for deleting characters if the user makes a mistake.
$("input[type='tel']").each(function(){
$(this).on("change keyup paste", function (e) {
var output,
$this = $(this),
input = $this.val();
if(e.keyCode != 8) {
input = input.replace(/[^0-9]/g, '');
var area = input.substr(0, 3);
var pre = input.substr(3, 3);
var tel = input.substr(6, 4);
if (area.length < 3) {
output = "(" + area;
} else if (area.length == 3 && pre.length < 3) {
output = "(" + area + ")" + " " + pre;
} else if (area.length == 3 && pre.length == 3) {
output = "(" + area + ")" + " " + pre + "-" + tel;
}
$this.val(output);
}
});
});
<input type="tel" placeholder="(XXX) XXX-XXXX" />

When you're getting the pre code from the number, you're trying to get the index of 4, instead of four digits. So change that, and it should start working:
var pre = input.substr(3, 3);
If you don't want the dynamic filling, the other posted answers might be useful.

Regular expressions are your friend.
var ok = phNum.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/);
if (ok==0) {
var parts = phNum.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/);
output.value='('+parts[1]+') '+parts[2]+'-'+parts[3];
}
Accepts: 404-555-1234, 4045551234, (404) 555-1234, etc.
Returns: (404) 555-1234

If you started to use regexp, why dont you go whole way through. Below the code that filter input value and convert it to your look.
Beware, this code only for value that contains only digits. You could block any other types via plugins or your own code. (jquery.numeric plugin is a good choice)
jquery
$(document).on('change', '.js-phone-number', function() {
var
$this = $(this),
number = $this.val();
number = number.replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3');
$this.val(number);
});

You are fetching variable pre as substring of length 4 and then checking it for it is less than or equal to 3. So, basically your last else if block will never be true.
Change var pre = input.substr(3,3);
Your code will work fine.

Empty input counting as full

So I have a form and you get the percent of the form you've completed. The problem is on one of the inputs, I get a result even though its empty. I'm not sure how to fix this. Heres the code
countMissing();
function countMissing() {
//Get total inputs
console.log("Total inputs " + form.getElementsByTagName('input').length);
//Divide by complete inputs out of 100% and get percent
console.log("The percentage is " + 100 / form.getElementsByTagName('input').length + "%");
var tot = 100 / form.getElementsByTagName('input').length + "%"
//Check
var cback=function(){
bad=0;
$('.form :text').each(function (i,e) {
if ($.trim($(e).val()) == "") bad++;
//Change width
$('.top').css('width', bad + '%');
});
//Missing amount of fields
if (bad > 0) $('.congrats').css("display", "block").text(100/bad + ' Completed ');
else $('.congrats').hide();
}
$(document).delegate('.form :text','focus',cback);
$(document).delegate('.form :text','keyup',cback);
}
And a link to the demo http://jsbin.com/xijemuli/2/edit Any ideas?

FIDDLE : http://jsfiddle.net/abdennour/3mH6w/3/
function count(){
console.log("Total inputs " + $('.form :text').length);
//Divide by complete inputs out of 100% and get percent
console.log("The percentage is " + bad / $('.form :text').length + "%");
return 100-(bad / $('.form :text').length)*100 + "%"
}
UPDATE :
Another example with form of 10 inputs : http://jsfiddle.net/abdennour/3mH6w/6/

I think you need to specify .value().length (not sure if it includes the brackets or not - from memory:
form.getElementsByTagName('input').value.length

There were several things going on with your code, but the primary problem you were having is calculating the percentage.
To find the percentage of form remaining, the math is:
(total_fields - empty_fields / total_fields)
After making that change (and a few others), your tested and working code is as follows:
countMissing();
function countMissing() {
var i = $('input').not('[type="button"]').length;
var cback=function(){
bad=0;
$('.form :text').each(function (i,e) {
if ($.trim($(e).val()) === "") bad++;
$('.top').css('width', bad + '%');
});
// Missing amount of fields
if (bad > 0) {
$('.congrats').css("display", "block").text(((i - bad)/ i) * 100 + ' Completed ');
} else {
$('.congrats').hide();
}
$(document).delegate('.form :text','focus',cback);
$(document).delegate('.form :text','keyup',cback);
}

I am pretty sure your code tried to kill my computer. Here is the approach I'd take:
$('form').on('input', function(e) {
var $inputs = $(this).find('input'),
$empties = $inputs.filter(function(){
return $.trim(this.value).length === 0;
});
$('.info').text($empties.length + ' of ' + $inputs.length + ' are empty!');
}).trigger('input');
along with a small demo: http://jsbin.com/gitef/4/edit?js,output

Get and loop through all Select Boxes in a Table with Jquery

i am new with jQuery.. i have a table with a number of boxes in it. I want to grab all the select boxes in the table and loop through them..
I am trying to create a function that does this and it looks like this:
function calculatePercentageTotal(tableName) {
var total = 0;
for (i = 0; i <= $("#" + tableName + ' select').length; i++) {
total += parseInt($("#" + tableName + ' select')[i].val());
}
return total;
}
It's not working though.. any ideas? thanks!

this should do it:
function calculatePercentageTotal(tableName) {
var total=0;
$('#'+tableName+' select').each(function(){
total+= +($(this).val());
});
return total;
}

$(document).ready(function(){
var total =0;
$("#calculatebtn").click( function(e){
$("select").each(function(){
total += parseInt($(this).val());
});
alert("total=" + total);
});
});
You need a button with id='calculatebtn'

Just use a selector to get the elements. I'm not sure which elements you are looking for. If what you are trying to do is to sum the values of the selected items in all the selects(dropdowns) then you can use this:
var mysum = 0;
$("#" + tableName.id + ' select').each(function(){
mysum += $(this).val() * 1;
});
alert("mysum = " + mysum.toString);
// Why **"$(this).val() * 1"** - .val() will return a string with the value selected
// * 1 will make it numeric.