Append an input field to the end of an li element. jQuery - javascript

let's say I enter something into an input field, whatever is typed gets appended to a ul along with another input field.
I can't figure out a way to append the input field. I mean, what I tried added an input at the beginning of the li and adds it over and over again.
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>");
$("ul li").append(time);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<input type="text" id="task" name="todo" placeholder="Your task">
<button id="add">Add It</button>
</div>
<div id="after"></div>
<ul>
<li><span>X</span> Code ToDo</li>
<li><span>X</span> Read two books</li>
<li><span>X</span> Run</li>
</ul>

You can use .append(li + input) to avoid append() to all li on each click
about direction maybe you are using css direction:rtl; witch will make input in left side or you are using float:left; with inputs.
$("#add").on("click", function() {
var i = $("#task").val();
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + " <input type='text' /></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<input type="text" id="task" name="todo" placeholder="Your task">
<button id="add">Add It</button>
</div>
<div id="after"></div>
<ul>
<li><span>X</span> Code ToDo</li>
<li><span>X</span> Read two books</li>
<li><span>X</span> Run</li>
</ul>

You want the input only in the value you added? If so:
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>").append(time); // just moved ".append(time)" to this line
})
If you want the input only in the last li:
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>");
$("ul li:last").append(time);
})

Related

determine the membership of the list

In the text field inputAddLabel some character is entered. When you click the Add tag button, the eventpushLabel ()is triggered. However, not every symbol should be added, but only one that is contained in listAlphabet. That is, a check must be carried out on the belonging of the added label to the alphabet.
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
if(alph.length == 1){
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
} else { alert('error');}
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>
Keep track of the pushed symbols (alphabet) and use them to filter the label:
var allowedLabels = [];
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
allowedLabels.push(alph);
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
document.getElementById("inputAddAlphabet").value = "";
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
if (allowedLabels.indexOf(label) >= 0) {
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
document.getElementById("inputAddLabel").value = "";
} else { alert('error');}
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>

How to add new input to html document on input typing using jquery?

I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>

How to auto scroll to the focused input field division using javascript or jquery while cloning the form multiple times

Auto scroll to the focused input field form division.
I'm cloning the form to add more users to add at once.
So it must scroll down to the input field when I click the add buttion
HTML:
$(document).ready(function() {
$('#id_i_fa_add').click(function duplicate() {
$('#id_i_fa_add').off('click');
$('.fa.fa-trash').off('click');
var original = document.getElementById('id_div_add' + i);
var clone = original.cloneNode(true);
$('#' + clone.id + " a i").attr('class', 'fa fa-trash');
$('#' + clone.id + " a i").attr('id', 'id_i_fa_del' + i);
clone.id = "id_div_add" + ++i;
clone.querySelectorAll("[id = 'id_span_error_email" + (i - 1) + "']")[0].id = 'id_span_error_email' + i;
$(clone).find('input').val("");
$(clone).find('span').text("");
document.getElementById('id_form_append').appendChild(clone);
$('#id_form_append input').focus();
$('#id_i_fa_add').on('click', duplicate);
$('.fa.fa-trash').on('click', duplicate_trash);
});
});
function duplicate_trash() {
var trash_id = this.id;
var parent_trash_id = $('#' + trash_id).parents().eq(1).attr('id');
$('#' + parent_trash_id).remove()
}
<form id='id_form_append' action="#">
<div id='id_div_append'>
<div id='id_div_add0' class="panel_box">
<div class="form_group">
<label>Email Address</label>
<div class="form-group form-inline">
<div class="input-group" style="width: 100%;">
<input name="email" type="text" class="form-control" placeholder="e-mail" autofocus>
<div class="input-group-addon">domains</div>
</div>
</div>
<span id='id_span_error_email0' class='class_span0'></span>
</div>
<a class="action" href="#">
<i id='id_i_fa_add' class="fa fa-plus"></i>
</a>
</div>
</div>
</form>
you can scroll to a position using:
$(window).scrollTop(/* pixel count */)
to retrieve the position of any element, use:
$(/* selector */).position()
you then have a simple object containing the position of the selected element. To retrieve the pixel to the top, use:
$(/* selector */).position().top
Note: This will only work correctly if your selector selects exactly one element.

On label click return its radio group name

http://jsfiddle.net/Yuxfv/2/
I want to be able to click on a label, and see which radio button group it belongs to. I tried this, but it always finds the first input after li (name=left), not the one closest to the label. How do I fix that?
$('input[type=radio]:enabled + label').click(function () {
var thisGroupName = $(this).closest('ul').find('input[type=radio]:enabled').attr('name');
alert("group name: " + thisGroupName);
});
HTML
<ul>
<li>
<input type="radio" class="radio-red" name="left" id="a1">
<label for="a1">a1</label>
<input type="radio" class="radio-blue" name="right" id="a2">
<label for="a2">a2</label>
</li>
<li>
<input type="radio" class="radio-red" name="left" id="b1">
<label for="b1">b1</label>
<input type="radio" class="radio-blue" name="right" id="b2">
<label for="b2">b2</label>
</li>
<li>
<input type="radio" class="radio-red" name="left" id="b3">
<label for="b3">b3</label>
<input type="radio" class="radio-blue" name="right" id="b4">
<label for="b4">b4</label>
</li>
</ul>
Dont go to ul and come back into li. Try using prev() if you need to get the input's group :
$('input[type=radio]:enabled + label').click(function () {
var thisGroupName = $(this).prev('input[type=radio]:checked').attr('name');
alert("group name: " + thisGroupName);
});
To get more specific, you've got for attribute with you. why not use that?
$('input[type=radio]:enabled + label').click(function () {
var thisGroupName = $("#" + $(this).attr("for")).attr('name');
alert("group name: " + thisGroupName);
});
I think you need this:
$('label').click(function(){
var forRadio = $(this).attr('for');
var groupName = $('#'+forRadio).attr('name');
alert(groupName);
});
I have made a jsfiddle here
http://jsfiddle.net/psmkw/
In the code example you provided you could also look up the radio button explicitly by using the 'for' attribute of the clicked label.
$(document).ready(function () {
$('input[type=radio]:enabled + label').click(function () {
var forName = $(this).attr('for');
var thisGroupName = $('#' + forName).attr('name');
alert("group name: " + thisGroupName);
});
});
It is working in this jsFiddle:
http://jsfiddle.net/Yuxfv/4/
there is no point in traversing the DOM in that way, the label has a reference to the element. which it use to click it when you click the label.
$('input[type=radio]:enabled + label').click(function () {
var input_id = '#'+$(this).attr('for');
var group_name = $(input_id).attr('name');
alert("group name: " + group_name );
});

Problem with jQuery clone(): clone input without value

I am using jquery .clone() and it is working fine. However my problem is that when I clone my input field it also clones the value of the previous field. I don't want to clone the value. How can I overcome this issue?
Here is my code
function addrow(){
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
$('#input' + num).after(newElem);
jQuery('.clonedInput').each(function(){
jQuery('#total', jQuery(this)).unbind('blur');
});
var ci = jQuery('.clonedInput:last');
jQuery('#total', ci).blur(function() {
addrow();
});
}
Regards,
Faizan
try this:
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).val('');
I might be late with this, but it's not clear whether your "#input" is actually an input field. Only then you can set it's value.
After you place your cloned element, try:
newElem.find('input:first').val(null);
add this line after the clone
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.removeAttr('value');
or
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).removeAttr('value');
Works fine with me:
<div id="con">
<input id="input1" value="some text" />
</div>
$("#input1").clone().val("").attr("id", "input2").appendTo("#con");
http://jsfiddle.net/sXL2b/
or by using insertAfter:
http://jsfiddle.net/sXL2b/1/
Try this instead of cloning:
http://jsfiddle.net/sXL2b/4/
Do you really need to clone?
You can clean all the inputs with .val(""):
<div class="">
<div id="references">
<div class="">
<div class="">
<div class="">
<input type="text" name="name-reference" class="" placeholder="Name" >
</div>
<div class="">
<input type="text" name="relationship-reference" class="" placeholder="Relationship" >
</div>
</div>
</div>
<div class="">
<div class="">
<div class="">
<input type="text" name="employer-reference" class="" placeholder="Employer" >
</div>
<div class="">
<input type="tel" name="phone-reference" class="" placeholder="Phone Number" >
</div>
</div>
</div>
<div class="">
<button id="add" class="">Add</button>
<button id="remove" style="display:none;">Remove</button>
</div>
</div>
The script:
var reference_form_index = 0;
$("#add").on('click', function(){
reference_form_index ++;
$(this).parent().parent().after($("#references").clone().attr("id","references" + reference_form_index));
$("#references" + reference_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + reference_form_index);
$(this).attr("id",$(this).attr("id") + reference_form_index);
$(this).val('');
});
$("#remove" + reference_form_index).css('display', 'inline');
$(document).on( 'click', "#remove" + reference_form_index, function(event){
$(this).parent('div').parent('div').remove();
} );
$("#add" + reference_form_index).remove();
});
You can see it in action on:
http://jsfiddle.net/pnovales/yF2zE/5/

Categories

Resources