We Keep Coding

How to set the id of a set of textboxes using a loop

Hello I'm trying to rest the ID attribute of a set of text boxes when the delete button is pressed.
What I want to do is that when the delete button is pressed read the existing textboxes and rest there id's because when I delete items the ID's of the existing once keep the old ID values I want to rest this to match the error number value.
Working jsFiddle
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var div = $("<div />"),
btnId = $("#stValue").val(); //Breaks the number from the ID using .match
// btnId = $(this).data("bid").match(/\d+/);//Breaks the number from the ID using .match
div.html(copy()); //Creates a new div container
$('.error-Column').append(div); //Insert all the HTML into the new div
$('#addRow_' + btnId).prop("disabled", true); //Disables the add button once clicked.
resetErrorNo(); //Calls the reset function
});
//Remove the text filed from the list and resets the error number
$(document).on('click', '.delRow', function() {
if (confirm('Your sure you want to remove this?')) {
var btnId = $("#stValue").val(), //Read the value of stValue
btnId2 = btnId - 1; //Deduct 1 from the value to get the last ID
for (var i = 0; i < btnId; i++) {
$('.addRow').attr('id', 'addRow_' + i);
}
//Enables the 1st add button if the value equals 1
if (btnId2 === 1) {
$('#addRow_' + btnId2).prop('disabled', false);
} else {
$('#addRow_' + btnId).prop('disabled', false);
}
$(this).parent().remove(); //Remove the text row from the list.
resetErrorNo(); //Calls the reset function
}
});
});
//Reset the entire error count number index
function resetErrorNo() {
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
$("#stValue").val(index + 1);
});
}
//HTML function which will be called by the button click event for the add button
function copy() {
var stNum = document.getElementById("stValue"),
genNum = (document.getElementById("stValue").value - 1) + 2;
// stNum.value = genNum;
// language=HTML
return '<input class="errorCount" size="1" value="' + genNum + '" style="margin-left: 2%" readonly/>\n' +
'<select class="errorName" style="margin-left: 6%">\n' +
'<option selected disabled>----- Select Error -----</option>\n' +
'</select>\n' +
'<input type="button" class="addRow" id="addRow_' + genNum + '" data-bid="addRow_' + genNum + '" value="Add" />\n' +
'<input type="button" class="delRow" id="delRow_' + genNum + '" data-bid="delRow_' + genNum + '" value="Delete"/><br />'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span style="margin-left: 8%">Error Name</span>
</div>
<div class="error-Column">
<input class="errorCount" size="1" value="1" style="margin-left: 2%" />
<input type="hidden" value="1" id="stValue" />
<select class="errorName" style="margin-left: 6%">
<option selected disabled>----- Select Error -----</option>
</select>
<input type="button" data-bid="addRow_1" id="addRow_1" class="addRow" value="Add" />
</div>
</div>
</div>
UPDATE: I used the answer given by #Rory McCrossan and made some tweaks to get I wanted and ended up with the below code which is what I wanted to do in the first place.
// Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('select').val('');
// $clone.find('input').val('');
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
resetErrorNo();
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove();
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
resetErrorNo();
}
});
});
//Reset the entire error count number index
function resetErrorNo() {
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
});
}
/*----- All the styling for the error input area start -----*/
#error-Column-Headings span {
margin-left: 8%;
}
.errorCount {
margin-left: 2%;
}
.errorName {
margin-left: 6%;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
/*----- All the styling for the error input area end -----*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span>Error Name</span>
</div>
<div class="error-Column">
<div class="error-container">
<input class="errorCount" size="1" value="1" style="margin-left: 2%" />
<select class="errorName">
<option selected disabled value="">----- Select Error -----</option>
</select>
<input type="button" class="addRow" value="Add" />
<input type="button" class="delRow" value="Delete" />
</div>
</div>
</div>
hope this helps some one in the future.

Incremental id attributes are an anti-pattern which leads to a lot of unnecessary maintenance work - as you've discovered.
You can make your code much more DRY, not to mention more simple by simply cloning each row and using DOM traversal to find elements related to the buttons and add/delete them as needed. Try this:
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('select').val('');
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove();
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
}
});
});
#error-Column-Headings span {
margin-left: 8%;
}
.errorCount {
margin-left: 2%;
}
.errorName {
margin-left: 6%;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number <span>Error Name</span>
</div>
<div class="error-Column">
<div class="error-container">
<select class="errorName">
<option selected disabled value="">----- Select Error -----</option>
</select>
<input type="button" class="addRow" value="Add" />
<input type="button" class="delRow" value="Delete" />
</div>
</div>
</div>
</div>

How to find dynamically created element using jQuery selectors?

I have a form which has certain elements in it. I want to get all the elements inside the form regardless of their depth.
This is my test code
$(document).ready(function(){
//script.init(markchaining);
$('#checkbutton').click(function(){
$('#saveForm :input').each(function(key){
if($(this).is('select'))
{
var id = $(this).attr('id');
console.log('id is '+id);
$(this).trigger('change');
console.log('if-> Element name is '+$(this).attr('name'));
}
else
{
console.log('else-> Element name is '+$(this).attr('name'));
}
});
});
});
function addRow(ele,name)
{
var id = ele.id;
$('#'+id+'').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="'+name+'" /></td></tr>');
}
My Problem
I also have dynamic elements which will be created on certain select change events during the iteration. I want to get these dynamically created elements as I iterate through my form.
I am not able to access the "New Row" element which gets created dynamically on clicking the 'check' button
This is my complete test code

Just added a count variable to distinguish the names on console. https://jsfiddle.net/ztpjacyu/
$(document).ready(function() {
//script.init(markchaining);
$('#checkbutton').click(function() {
$('#saveForm :input').each(function(key) {
if ($(this).is('select')) {
var id = $(this).attr('id');
console.log('id is ' + id);
$(this).trigger('change');
console.log('if-> Element name is ' + $(this).attr('name'));
} else {
console.log('else-> Element name is ' + $(this).attr('name'));
}
});
});
//Clicked twice to show you the console
$('#checkbutton').click();
$('#checkbutton').click();
});
var count = 0;
function addRow(ele, name) {
var id = ele.id;
$('#' + id + '').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="' + name + ++count + '" /></td></tr>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="mainform" id="saveForm" action="#">
<!--##GENERAL##-->
<input type="button" name="checkbutton" id="checkbutton" value="Check" /> <- Moved here so that you can see the console
<div id="fromuser">
<table width="100%" id="userTable">
<tr id="ReportNameRow">
<td class="label-cell">Report Name :</td>
<td>
<input type="text" name="CustomReportName" id="CustomReportName" />
</td>
</tr>
<tr id="ReportNamrRow">
<td class="label-cell">* Saved Report Name :</td>
<td>
<select name="rname" id="rname" onChange="addRow(this,'MYID');">
<option value="">---Select---</option>
<option value="Cash_Position">Cash Position</option>
<option value="Detail_Report">Detail Report</option>
<option value="FCCS/FBPS_Detail_Report">FCCS/FBPS Detail Report</option>
<option value="Reconciliation_Report">Reconciliation Report</option>
<option value="Statement_Report">Statement Report</option>
<option value="CustomReport">Enter Custom Report Name</option>
</select>
</td>
</tr>
<input type="hidden" name="hiddenid" value="I am hidden" id="hiddenid" />
<tr id="submit">
<td class="label-cell"></td>
<td>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
Update
if you want the element to be there before you execute your each , you can do this : https://jsfiddle.net/jbrt3Led/
$('#checkbutton').click(function() {
$("#rname").trigger('change');
$('#saveForm :input').each(function(key) {
if ($(this).is('select')) {
var id = $(this).attr('id');
console.log('id is ' + id);
console.log('if-> Element name is ' + $(this).attr('name'));
} else {
console.log('else-> Element name is ' + $(this).attr('name'));
}
});
});

need help in javascript to increase the output size

I am new to JavaScript. I have made a form and taken textarea and button and displayed the text of the textarea in a div tag and have taken 2 buttons.
Now I want on click of first button the size of output in div tag increase and similarly on click of second button it becomes bold and so on ...
<html>
<body>
<form name="myform" onsubmit="return fuc1()">
<table>
<tr><td>Description</td><td> <textarea name="message1" id="message" rows="10" cols="30" font-size:"100px";></textarea><br/></td></tr>
<tr><td><button onclick=fincrease() type="button" name="sizeinc" id="sizeinc" >Increase SIZE</button></td>
<td><button type="button" name="sizedec" id="sizedec" >Decrease SIZE</button></td></tr>
<tr><td><button type="button" onclick="fbold()" name="bold" id="bold" >BOLD</button></td>
<td><button type="button" name="italic" id="italic" >ITALIC</button></td>
<td><button type="button" name="underline" id="underline" >UNDERLINE</button></td></tr>
<tr><td><select id="colors" onclick="fcolor()">
<option value="Default">(Please select color)</option>
<option value="pink">PINK</option>
<option value="yellow">YELLOW</option>
<option value="green">GREEN</option>
<option value="orange">ORANGE</option>
</select>
</td>
<td><select id="borders" onclick="fborder()">
<option value="Default">(Please select border)</option>
<option value="dashed">DOTTED</option>
<option value="thick solid">Thick Solid</option>
<option value="solid">Solid</option>
</select></td>
</tr>
<tr><td><input type="submit"/></td></tr>
</table>
<div id="div1">OUTPUT</div>
</form>
<script type="text/javascript">
function fuc1()
{
var tex=document.getElementById("message").value;
var colr=document.getElementById("colors").value;
var bord=document.getElementById("borders").value;
var increase=document.getElementById("sizeinc").value;
var decrease=document.getElementById("sizedec").value;
var italic1=document.getElementById("italic").value;
var bold1=document.getElementById("bold").value;
var under=document.getElementById("underline").value;
html=tex;
document.getElementById("div1").innerHTML=html;
return false;
}
function fcolor(){
var c=document.getElementById("colors").value;
if(c=="pink")
{
document.getElementById("div1").style.color= c;
}
if(c=="yellow")
{
document.getElementById("div1").style.color= c;
}
if(c=="green")
{
document.getElementById("div1").style.color= c;
}
if(c=="orange")
{
document.getElementById("div1").style.color= c;
}
}
function fborder(){
var b=document.getElementById("borders").value;
if(b=="dashed")
{
document.getElementById("div1").style.border=b;
}
if(b=="thick solid")
{
document.getElementById("div1").style.border=b;
}
if(b=="solid")
{
document.getElementById("div1").style.border=b;
}
}
function fbold()
{
}
</script>

Remember to add them to the onclick events of your buttons
function fbold()
{
if (document.getElementById("div1").style.fontWeight == "bold")
{
document.getElementById("div1").style.fontWeight = "normal"
}
else
{
document.getElementById("div1").style.fontWeight = "bold";
}
}
function fItalic() {
if (document.getElementById("div1").style.fontStyle == "italic") {
document.getElementById("div1").style.fontStyle = "normal"
}
else {
document.getElementById("div1").style.fontStyle = "italic";
}
}
function fUnderline()
{
if (document.getElementById("div1").style.textDecorationUnderline) {
document.getElementById("div1").style.textDecorationUnderline = false
}
else {
document.getElementById("div1").style.textDecorationUnderline = true;
}
}
function fincrease()
{
if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "")
{
document.getElementById("div1").style.fontSize = "14px"
}
document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) + 1) + "px"
}
function fdecrease() {
if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "") {
document.getElementById("div1").style.fontSize = "14px"
}
document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) - 1) + "px"
}

General tip: add some console.log("...") messages to your functions and open your page in a browser that has a console (e.g. in Google Chrome, press F12). That will enable you to see when a function is called while you test it.
More specific tip: on the select lists, replace onclick with onchange.

Jquery onclick this remove both of span

how to do that when i Click to "OnClick" will remove City1 and City2
I mean want to remove both of them by one click.
Waiting for your reply
thanks.
<select multiple="multiple" id="city" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
<div id="City1" ></div>
<div id="City2" ></div>
$(document).ready(function()
{
var i = 0;
$("#city").click(function(){
var sel=$(this).val();
i++;
$('#City1, #City2').append('<span id="'+ [i] +'"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(this).remove();">'+ sel +'</span>');
});
});
http://jsfiddle.net/zeynaloffnet/WRs86/2/

I know you've got your answer already, but I thought it might be worth pointing out a few things.
When creating DOM elements, you might consider using the object literal syntax, where you create the element as usual, then add its properties using key/value pairs:
$('<div'>, { class: 'myDiv'});
Ids cannot start with a number. It might be worth appending the option's value to a prefix instead:
id: "opt-" + this.value,
It's a good idea to give your new span a specific class , then alter its appearance by targeting it from a separate style-sheet. This will remove the need for all that ugly and hard to maintain, inline CSS.
These changes would give you something like:
span {
border-radius:5px;
color:#fff;
background-color:#005e3a;
padding:5px;
cursor:pointer;
width:auto;
}
<select multiple="multiple" id="mySelect">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<div id="result"></div>
$("#mySelect").click(function () {
var span = $("<span />", {
id: "opt-" + this.value.toLowerCase(),
class: "city",
text: this.value,
click: function () {
$(this).remove();
}
});
$('#result').html(span);
});
Here's a fiddle
EDIT:
Here's how you'd do it with two elements:
$("#mySelect").click(function () {
var span1 = $("<span />", {
class: "opt-" + this.value.toLowerCase(),
text: this.value,
click: function () {
$(this).remove();
}
}),
span2 = span.clone(true);
$('#result').empty().append(span1).append(span2);
});
You have to clone the original span, as append actually moves the element, so appending it twice wouldn't work.
New fiddle
I also changed the id attribute to class, as ids should be unique to a page.

You just need to clean the div before. Use .empty() before .append()
<select multiple="multiple" id="city" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
<div id="City1" ></div>
<div id="City2" ></div>
$(document).ready(function()
{
var i = 0;
$("#city").click(function(){
var sel=$(this).val();
i++;
$('#City1, #City2').empty().append('<span id="'+ [i] +'"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(this).remove();">'+ sel +'</span>');
});
});
http://jsfiddle.net/guinatal/WRs86/3/

onClick="removeCity();"//add this as your onlick
var removeCity = function()
{
$("#City1").remove();
$("#City2").remove();
}

As per my understaning, Here is your updated fiddle: http://jsfiddle.net/kailashyadav/WRs86/7/
$(document).ready(function () {
var i = 0;
$("#city").click(function () {
var sel = $(this).val();
i++;
$('#City1, #City2').append('<span class="spanClass" id="' + [i] + '"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(\'.spanClass\').remove();">' + sel + '</span>');
});
});

Demo Fiddle
If you want to replace the contents..simply change append to html
$('#City1, #City2').html('<span id="' + [i] + '"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;">' + sel + '</span>');
To remove both span elements when only clicking one or the other, take the onclick function out and replace with
$('#City1 span, #City2 span').on('click',function () {
$('#City1 span, #City2 span').remove();
});

jQuery Append UL with LI from DropDownList and Vice Versa

I have a dropdownlist with values. On a click of a button a unordered list gets appended with an <li> with details from the selected item in the dropdown list.
The <li> has an <a> tag in it which will remove the <li> from the <ul>.
I need to repopulate the dropdown list with the item removed from the <ul> when the <li> is removed.
Any ideas?
UPDATE:
Thanks for all your help. Here is my whole implementation:
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
$('#btnAdd').click(function() {
if (validate()) {
//Remove no data <li> tag if it exists!
$("#nodata").remove();
$("#sortable").append("<li class='ui-state-default' id='" + $("#ContentList option:selected").val() + "-" + $("#Title").val() + "'>" + $("#ContentList option:selected").text() + "<a href='#' title='Delete' class='itemDelete'>x</a></li>");
$("#ContentList option:selected").hide();
$('#ContentList').attr('selectedIndex', 0);
$("#Title").val("");
}
});
$('#btnSave').click(function() {
$('#dataarray').val($('#sortable').sortable('toArray'));
});
$('.itemDelete').live("click", function() {
var id = $(this).parent().get(0).id;
$(this).parent().remove();
var value = id.toString().substring(0, id.toString().indexOf('-', 0));
if ($("option[value='" + value + "']").length > 0) {
$("option[value='" + value + "']").show();
}
else {
var lowered = value.toString().toLowerCase().replace("_", " ");
lowered = ToTitleCase(lowered);
$("#ContentList").append("<option value='" + value + "'>" + lowered + "</option>");
}
});
});
function validate() {
...
}
function ToTitleCase(input)
{
var A = input.split(' '), B = [];
for (var i = 0; A[i] !== undefined; i++) {
B[B.length] = A[i].substr(0, 1).toUpperCase() + A[i].substr(1);
}
return B.join(' ');
}
</script>
<form ...>
<div class="divContent">
<div class="required">
<label for="ContentList">Available Sections:</label>
<select id="ContentList" name="ContentList">
<option value="">Please Select</option>
<option value="CHAN TEST">Chan Test</option>
<option value="TEST_TOP">Test Top</option>
</select>
<span id="val_ContentList" style="display: none;">*</span>
</div>
<div class="required">
<label for="ID">Title:</label>
<input class="inputText" id="Title" maxlength="100" name="Title" value="" type="text">
<span id="val_Title" style="display: none;">*</span>
</div>
<input value="Add Section" id="btnAdd" class="button" type="button">
</div>
<ul id="sortable">
<li class="ui-state-default" id="nodata">No WebPage Contents Currently Saved!</li>
</ul>
<div>
<input type="submit" value="Save" id="btnSave" class="button"/>
</div>
<input type="hidden" id="dataarray" name="dArray" />
</form>

You've acknowledged that you know very little about jQuery, so let's look at some of this piece by piece. This snippets will give you the information you need to construct your solution.
Adding click-events is relatively easy:
$("#myButton").click(function(){
/* code here */
});
Removing elements is also pretty simple:
$("#badThing").remove();
The thing about .remove() though is that you can add it elsewhere after removing it:
$("#badThing").remove().appendTo("#someBox");
That moves #badThing from wherever it was, to the inside of #someBox.
You can add new list items with the append method:
$("#myList").append("<li>My New Item</li>");
You can get the selected item of a drop-down like this:
var item = $("#myDropDown option:selected");