I'm looking for a JQuery code which creates input fields dynamically.. I found this code and it's kind of the thing I want
$(function() {
var input = $('<input type="text" />');
var newFields = $('');
$('#qty').bind('blur keyup change', function() {
var n = this.value || 0;
if (n + 1) {
if (n > newFields.length) {
addFields(n);
} else {
removeFields(n);
}
}
});
function addFields(n) {
for (i = newFields.length; i < n; i++) {
var newInput = input.clone();
newFields = newFields.add(newInput);
newInput.appendTo('#newFields');
}
}
function removeFields(n) {
var removeField = newFields.slice(n).remove();
newFields = newFields.not(removeField);
}
});
DEMO
But I would like to have the fields numerated, like this:
#1 FIELD
#2 FIELD
#3 FIELD
I've already tried my best and I've really searched for a long time but I haven't found anything that helps me. I hope someone can help me here.
Try this:
function addFields(n) {
for (i = newFields.length; i < n; i++) {
var newInput = $("<div>#"+(i+1)+"</div>").append(input.clone());
newFields = newFields.add(newInput);
newInput.appendTo('#newFields');
}
}
DEMO
Related
I have this block as UI :
<textbox id="style-search" flex="1" type="search" timeout="250" dir="reverse"/>
and this is the onload function:
var listbox = document.getElementById("style-listbox");
var searchbox = document.getElementById("style-search");
var styles = Zotero.Styles.getVisible();
var index = 0;
var nStyles = styles.length;
var selectIndex = null;
var searchValue = searchbox.value;
if (searchValue) {
for (var i = 0; i < nStyles; i++) {
if (styles[i].title.match(searchValue)) {
var itemNode = document.createElement("listitem");
itemNode.setAttribute("value", styles[i].styleID);
itemNode.setAttribute("label", styles[i].title);
itemNode.setAttribute("id", styles[i].title);
if (i % 2 === 0) {
itemNode.setAttribute("class", "backG");
} else {
itemNode.setAttribute("class", "backY");
}
listbox.appendChild(itemNode);
if (styles[i].styleID == _io.style) {
selectIndex = index;
}
index++;
}
}
}
i need this: when i type some string in search box i want to filter all my style base on my style list with that string. i try above code but it doesn't work.
I've the following code snippet. The issue is onclick event doesn't fire for the second label, which has the same class as the first one. Why is that?
I searched online and found multiple solutions but all of them are in jQuery. But I want it in pure JavaScript. Does anyone know what am I doing wrong here?
var label = document.getElementsByClassName('text');
label[0].onclick = function() {
console.log(true);
};
<label class="text">Hello</label>
<label class="text">World!</label>
PS: I know this question has been asked here multiple times (but the solutions are for jQuery). So please don't mark this question as duplicate :/
You could use event delegation :
document.body.onclick = function (ev) {
if (ev.target.getAttribute("class") == "text") {
console.log(true);
}
};
<label class="text">Hello</label>
<label class="text">World!</label>
Thanks to event delegation new labels are also clickable :
var nLabels = 2;
document.body.onclick = function (ev) {
var newLabel;
if (ev.target.getAttribute("class") == "text") {
console.log(ev.target.textContent);
} else if (ev.target.id == "btn-add-label") {
newLabel = document.createElement("label");
newLabel.setAttribute("class", "text");
newLabel.textContent = " new label #" + (nLabels++);
document.body.appendChild(newLabel);
}
};
<button type="button" id="btn-add-label">Add label</button>
<label class="text">Hello</label>
<label class="text">World!</label>
label is an array of all the elements with class text, so label[0] will only apply to the first element in the document. Simplest way to do it would probably be with a loop such as
for (var i = 0; i<label.length; i++){
label[i].onclick = function() {
console.log(true);
};
var label = document.getElementsByClassName('text');
for (var i = 0; i<label.length; i++) {
label[i].oncllick = function () { console.log(true); };
}
try this
var label = document.getElementsByClassName('text');
for (var i = 0; i < label.length; i++) {
label[i].onclick = function() {
console.log(true);
};
}
What is the plain Javascript equivalent of .each and $(this).find when used together in this example?
$(document).ready(function(){
$('.rows').each(function(){
var textfield = $(this).find(".textfield");
var colorbox = $(this).find(".box");
function colorchange() {
if (textfield.val() <100 || textfield.val() == null) {
colorbox.css("background-color","red");
colorbox.html("Too Low");
}
else if (textfield.val() >300) {
colorbox.css("background-color","red");
colorbox.html("Too High");
}
else {
colorbox.css("background-color","green");
colorbox.html("Just Right");
}
}
textfield.keyup(colorchange);
}
)});
Here's a fiddle with basically what I'm trying to accomplish, I know I need to use a loop I'm just not sure exactly how to set it up. I don't want to use jquery just for this simple functionality if I don't have to
http://jsfiddle.net/8u5dj/
I deleted the code I already tried because it changed every instance of the colorbox so I'm not sure what I did wrong.
This is how to do what you want in plain javascript:
http://jsfiddle.net/johnboker/6A5WS/4/
var rows = document.getElementsByClassName('rows');
for(var i = 0; i < rows.length; i++)
{
var textfield = rows[i].getElementsByClassName('textfield')[0];
var colorbox = rows[i].getElementsByClassName('box')[0];
var colorchange = function(tf, cb)
{
return function()
{
if (tf.value < 100 || tf.value == null)
{
cb.style.backgroundColor = 'red';
cb.innerText = "Too Low";
}
else if (tf.value > 300)
{
cb.style.backgroundColor = 'red';
cb.innerText = "Too High";
}
else
{
cb.style.backgroundColor = 'green';
cb.innerText = "Just Right";
}
};
}(textfield, colorbox);
textfield.onkeyup = colorchange;
}
var rows = document.querySelectorAll('.rows');
for (var i=0; i<rows.length; i++) {
var row = rows[i];
var textfield = row.querySelector('.textfield');
var colorbox = row.querySelector('.box');
// ...
}
Note that you must use a for loop to iterate the rows because querySelectorAll() does not return an array, despite appearances. In particular, that means that .forEach() isn't valid on the returned list.
I've a drop down list that contains all the ontacts on mobile. I want to select more than one contact at a time.
When I was working on regular html & JS pages I used this code:
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('AllContacts');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++)
{
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
But when I use it on Android, then if statement is skipped & it just stops,this statement:
"selObj.options[i].selected"
seems strange for the mobile!
This worked:
function ChooseContact(data)
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('contacts');
var i;
var count = 0;
for(i=0;i<selObj.options.length;i++)
{
if(selObj.options[i].selected==true)
{
selectedArray[count] = selObj.options[i].value;
alert(selObj.options[i].value);
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
I just modified this:
if (selObj.options[i].selected)
to this:
if(selObj.options[i].selected==true)
In android phonegap application, I created 5 or more question with respective option (checkboxes) in div dynamically. Each question and respective option have same id. Now I want to know how many question are answered/how many questions are not answered while clicking submit button.
please guide me. Thanks in advance.
My code is:
for dynamic div: retrive value from local database
function list(results){
for (i = 0; i < results.rows.length; i++) {
$("#poll").append("<li id='"+i+"'>"+results.rows.item(i).ques+"</li>"+"<br/>" );
var optiontypearray = new Array();
var arr = results.rows.item(i).option;
var optiontypearray=arr.split(" ");
for(var j=0; j<optiontypearray.length; j++) {
$("#poll").append("<input id='"+i+"' name='ckbox' value='"+optiontypearray[j]+"' type='checkbox'/>"+optiontypearray[j]+"<br/>");
}
}
}
for submit button:get question with respective answer
function submit(){
$answers = $(':checked');
var $questions=$('li');
$answers.each(function(index,el) {
var list1=$(this).attr("id");
alert("list1:"+list1);
var val=$('#'+list1).val();
alert($questions.eq(list1).html() + ' : ' + $(el).val());
});
}
HTML:
<div id="poll">
This is what happens when you click submit button.
$('#submit').click(function () {
var questionsAnswered = questionsNotAnswered = 0
var arrQuestions = new Array();
$('li').removeAttr('style').each (function (i) {
if ($(this).children('input:checked').length > 0) {
var ans = '';
$(this).children('input:checked').each(function () {
ans+= $(this).val() + ', ';
});
arrQuestions[questionsAnswered] = new Array($(this).attr('id'), ans);
questionsAnswered++;
} else if ($(this).attr('class') == 'required' && $(this).children('input:checked').length == 0) {
$(this).css({border : '1px solid red'});
questionsNotAnswered++;
alert($(this).clone().children('span').remove().end().text());
}
});
$('div#finalResults').html("Questions Answered : " + questionsAnswered + "<br /> Questions Not Answered : " + questionsNotAnswered);
});
$.each (arrQuestions, function () {
$('div#finalResults').append("<br /> Q: " + this[0] + " A: " + this[1]);
});
Demo. http://jsfiddle.net/tmM76/9/
Please note that the code in list() function might change as per your existing code which you did not share ;-).
u can do something like..
var qanswered;
for( j = 0; j < numberofQuestions; j++){
qanswered = false;
ques = questions[j];
for( k = 0; k < ques.choices.length; k++){
btn = $('.ui-page-active input#'+k); // k is your choice id whatever way u define it
if(btn[0].checked){
qanswered = true;
}
}
if(!qanswered){
//this question is not answered, do something
}
}
btn gets the jquery object of the inputs one by one, of the ques