We Keep Coding

Selecting ID's dynamically in js/ JQuery

I have an html form. Whenever i click add button another copy of it appends. Whenever i click add button, id of my elements increases such as username_0, username_1, username_2... There are 2 radio buttons on my form that whenever i choose second radio button, a hidden textarea appears. Problem is i'm having problem with choosing my dynamic id's of radio buttons. I made a function but its only working for first element since i can't get dynamic id's
<label for="evetKontrol_0">Evet</label>
<input type="radio" id="evetKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol_0">Hayır</label>
<input type="radio" id="hayirKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo_0" style="visibility:hidden">
<strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_0" name="hayirSebep" style="height: 75px"><br>
</div>
function yesnoCheck() {
if (document.getElementById('evetKontrol_0').checked) {
document.getElementById('ifNo_0').style.visibility = 'hidden';
}
else document.getElementById('ifNo_0').style.visibility = 'visible';
}
I need to be able to get my evetKontrol_#somenumber for my function for every copy of my form.
JSfiddle/ all of my code
I tried to use jQuery( "[attribute*='value']" ) but i couldn't manage to work it out.

Consider the following.
Working Example: https://jsfiddle.net/Twisty/sonvakq2/21/
JavaScript
$(function() {
function addElement(tObj) {
var counter = $("[id^='ogrenci']", tObj).length;
var html = '<div class="col-auto" id="ogrenci_' + counter + '"><label for="ad">Ad</label><input type="text" name="ad[]" class="form-control" id="ad_' + counter + '" placeholder="Öğrencinin Adı"/><label for="soyad">Soyad</label><input type="text" name="soyad[]" class="form-control" id="soyad_' + counter + '" placeholder="Öğrencinin Soyadı"/><label for="no">No</label><input type="text" name="numara[]" class="form-control" id="no_' + counter + '" placeholder="Öğrencinin Numarası"><label for="course">Bölümü</label><input type="text" name="bolum[]" class="form-control" id="course_' + counter + '" placeholder="Öğrencinin Bölümü"><label for="alKredi">Almak İstediği Kredi</label><input type="text" name="alKredi[]" class="form-control" id="alKredi_' + counter + '" placeholder="Almak İstediği Kredi"><label for="verKredi">Alabileceği Kredi</label><input type="text" name="verKredi[]" class="form-control" id="verKredi_' + counter + '" placeholder="Alabileceği Kredi"><label for=""><strong>Uygun mu?</strong> </label><br><label for="evetKontrol_' + counter + '">Evet</label><input type="radio" id="evetKontrol_' + counter + '" name="uygun_' + counter + '" value="uygun" checked><label for="hayirKontrol_' + counter + '">Hayır</label><input type="radio" id="hayirKontrol_' + counter + '" name="uygun_' + counter + '" value="uygunDegil"><div id="ifNo_' + counter + '" style="visibility:hidden"><strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_' + counter + '" name="hayirSebep" style="height: 75px"><br></div><div class="input-group-addon"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</div></div>';
tObj.append(html);
}
function showHidden() {
$("[id^='evetKontrol']").each(function(i, el) {
var rel = $("#ifNo_" + i);
if ($(el).is(":checked")) {
rel.show();
} else {
rel.hide();
}
});
}
//add more fields group
$("#add").click(function() {
addElement($("#container"));
});
//remove fields group
$('#container').on('click', "a[id^='remove']", function() {
$(this).parents('div.col-auto').remove();
});
$("#container").on("click", "input[type='radio']", showHidden);
});
Your fiddle wasn't configured properly, so I addressed that first. I moved a lot of the repeatable items into Functions. Switched it all the jQuery and removed any of the local javascript calls.
You can see examples of how to use the Attribute selector in a relative manner to select items you want.
See More: https://api.jquery.com/category/selectors/attribute-selectors/

You shouldn't need to use IDs for this. Just capture the onclick event and pass a boolean to determine if the hidden input should be shown. If you have multiple inputs to show and hide separately, you could pass the ID of the input along with the boolean.
function yesnoCheck(show) {
var ta = document.getElementById('hiddenTA');
if (show) {
ta.style.visibility = 'visible';
} else {
ta.style.visibility = 'hidden';
}
}
<label for="user1_0">User 1</label>
<input type="radio" name="users" id="user1_0" onclick="yesnoCheck(false)" checked />
<label for="user2_0">User 2</label>
<input type="radio" name="users" id="user2_0" onclick="yesnoCheck(true)" />
<input style="visibility:hidden" id="hiddenTA" />

In order to get the evetKontrol_#somenumber, pass that number in the onclick function.
In your JSfiddle, this would mean concatenating the counter variable into the function parameters like
... onclick="javascript:yesnoCheck(' + counter + ');" ...
Then update the function to use that value:
function yesnoCheck(counter) {
if (document.getElementById('evetKontrol_' + counter).checked) {
document.getElementById('ifNo_' + counter).style.visibility = 'hidden';
} else {
document.getElementById('ifNo_' + counter).style.visibility = 'visible';
}

Input fields are repeating in preview page

I have three check boxes with two is auto selected and I am displaying the text field with a label which check box is selected.
But after clicking on preview from I am getting input field twice. I mean I am getting four text field instated of two.
There is some issue with my ready script.Would you help me out in this?
<!--If any check box clicked then active this script-->
$(function() {
$(".add_student_input").change(function() {
if (this.checked) {
$(".students_items").append('<div class="form-group row ' + this.id + '"><label class="col-sm-4 col-form-label">' + $(this).next('label').text() + '</label><div class="col-sm-8"><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div></div>');
} else {
$('.students_items').find('.' + this.id).remove();
}
});
});
<!--end script -->
$(document).ready( function(){
$checkbox=$(".add_student_input");
$checkbox.each(function(){
var isChecked = $(this).is(":checked");
if(isChecked) {
$(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>');
} else {
//check false
$('.students_items').find('.' + this.id).remove();
}
});
});
/*form preview*/
function PrintPreview() {
var toPrint = document.getElementById('open_in_preview');
var popupWin = window.open('', '_blank');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</body></html>');
popupWin.document.close();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body id="open_in_preview">
<input type="checkbox" name="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label>
<input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label>
<input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label>
Preview form
<span class="students_items"></span>
</body>
I am getting output like this.

as comment, why the script putting at the below of your page will cause multiple input, as when onload, it will run document ready and append again based on the checkbox, so to solve the issue, put empty() onto it will "reset" the input before append with a new 1
$(document).ready( function(){
$checkbox=$(".add_student_input");
$(".students_items").empty(); //add this to clear it
$checkbox.each(function(){
var isChecked = $(this).is(":checked");
if(isChecked) {
$(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>');
} else {
//check false
$('.students_items').find('.' + this.id).remove();
}
});
});
update with another question by OP
please look at the plnkr
https://plnkr.co/edit/wnGWwcgAySrjfNQwqX3J?p=preview
the issue here is not related to empty(), it is how it behave on DOM ready(but i remove it as your question is different now), I had enhance your script so that it take only the needed tag, and also combine the script to make it clearer, please have a look, so in order to really read the checked behavior in the html, we need to add
this.setAttribute("checked", "checked");
this will force the checked is being render in the html, and also
$(function(){}) is the same as $(document).ready(function(){})

How to reset the error number when deleted from list

I'm creating a set of textboxes and some drop downs using jQuery. The add function is working with out any issues.
My problem is with the delete function function works nicely as long as the user deletes one after the other but if the user delete from some where else the number sequence get messed up. Which breaks the 1,2,3,4 ... etc and sets the number which was deleted last.
As an example if the user deletes number 4 out of 7 errors the functions sets the last number as 4 when the user clicks the add button the next number generated will be 5 not the correct last number. I want to rest the rest of the numbers when something get removed from the middle.
I'm storing the last number in a hidden filed called stValue which is getting reset when deleting.
My problem is here I can't get my head around to think of way to reset this when deleting from some where else and then reset the entire error number row numbers when something get removed from the middle. Can you guys help me with this below is my code.
jsFiddle will help to understand better
JQuery:
//Add and remove function for the error text boxes
$(document).ready(function () {
$(document).on('click','.addRow',function () {
var div = $("<div />"),
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.
});
//Remove the text filed from the list and resets the error number
$(document).on('click', '.delRow', function () {
var //btnId = $(this).data("bid").match(/\d+/),//Breaks the number from the ID using .match
maxNoList = $('input[class="addRow"]').length,
errNoList = maxNoList - 1;
alert(errNoList);
//btnId = btnId - 1; //Calculates the ID number of the previous button
$('#addRow_'+errNoList).prop('disabled',false);// Enables the previous add button
$('#stValue').val(errNoList); //Set the value of stValue when removing the text filed
//So the error numbers will be generated accordingly when Add is clicked again.
$(this).parent().remove(); //Remove the text row from the list.
});
});
//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 />'
}
HTML:
<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:**Completely changed the code now it's much more simpler adding the solved answer here so it might help some one in the future.
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var div = $("<div />"),
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.
});
//Remove the text filed from the list and resets the error number
$(document).on('click', '.delRow', function() {
var btnId = $("#stValue").val(); //Read the value of stValue
btnId = btnId - 1; //Deduct 1 from the value to get the last ID
//Enables the 1st add button if the value equals 1
if (btnId === 1) {
$('#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>

Try with whenever, you delete any row, update all input with new number.
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
});
Full Code
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var div = $("<div />"),
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.
});
//Remove the text filed from the list and resets the error number
$(document).on('click', '.delRow', function() {
var //btnId = $(this).data("bid").match(/\d+/),//Breaks the number from the ID using .match
maxNoList = $('input[class="addRow"]').length,
errNoList = maxNoList - 1;
//btnId = btnId - 1; //Calculates the ID number of the previous button
$('#addRow_' + errNoList).prop('disabled', false); // Enables the previous add button
$('#stValue').val(errNoList); //Set the value of stValue when removing the text filed
//So the error numbers will be generated accordingly when Add is clicked again.
$(this).parent().remove(); //Remove the text row from the list.
rearrange();
});
});
function rearrange() {
$(".errorCount").each(function(index, _this) {
$(this).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/1.9.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>

Inserting rows with inputs in a table dynamically

I have built a function using jQuery to insert into a table a new row including some inputs, like textboxes, checkboxes and one button.
This is the code I have:
$('#AddEntry').click(function () {
var lastTrClass = $('tr:last').attr('class');
var textBoxTitle = '<input id="titleid" type="text" value="" style="width: 100%; vertical-align: middle">';
var textBoxStartDate = '<input id="StartDate" type="text" class="required DatePicker" value="" style="width: 100%; vertical-align: middle">';
var checkBoxSync = '<input id="Sync" type="checkbox" checked="checked" disabled="disabled" value="true" style="vertical-align: middle">';
var lastDate = '<input id="LastSyncDate" class="required DatePicker" type="text" value="" style="width: 100%; vertical-align: middle">';
var buttonEdit = '<button id="btnEditar" class="EditButton icon_only text_only" style="vertical-align: middle;" type="button">Editar</button>';
if (lastTrClass == 'gradeA odd') {
$('#DataTable > tbody:last').append("<tr class='gradeA even'><td>#</td><td>" + textBoxTitle + "</td><td>" + textBoxStartDate + "</td><td>" + checkBoxSync + "</td><td>" + lastDate + "</td><td>" + buttonEdit + "</td></tr>");
}
else {
$('#DataTable > tbody:last').append("<tr class='gradeA odd'><td>#</td><td>" + textBoxTitle + "</td><td>" + textBoxStartDate + "</td><td>" + checkBoxSync + "</td><td>" + lastDate + "</td><td>" + buttonEdit + "</td></tr>");
}
})
As you can see in my code, I'm generating the inputs into a var, but my question is whether or not this is safe. Is my code vulnerable to a JS injection or something like that? Is there a better way to do this?

All of this happens on the client so you're code should be fine. You may want to check out client templating for this sort of thing though - then you can scrap the vars altogether and editing the html will be more pleasurable. I use jqote when I need to render relatively complex stuff from javascript.

How to turn a jquery ui dialog button into a checkbox?

So I'm new to Jquery and Jquery UI. I have my dialog box working but one thing I am looking for is how to change one of the buttons in the dialog into a checkbox.
My scenario:
A user will be posting information, like news and such. But I want to give them the ability to not publish it to the public yet. A draft, if you will. So the checkbox would be right beside the "ok" and "cancel" button.
I've tried creating an array before the dialog function and placing it there but I can't seem to find a way to declare a button as a checkbox.
Thank you in advance for all your help,
Edit: Here is some code I have tried. My problem is now that i try to style the button pane, it disappears.
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' +
'<div class="ui-dialog-buttonset">' +
'<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' +
'<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Save</span>' +
'</button>' +
'<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Cancel</span>' +
'</button>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});

1) You can add the buttons and checkbox into the HTML that creates the dialog and not the use dialog's property that generates buttons for you. Once you create the dialog you can set the handlers
using the dialog object in the selector:
dialog = $('<div>' +
'...' +
'<input type="submit" id="btnCancel" value="Ok" />' +
'<button id="btnCancel">Cancel</button>' +
'<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' +
'</div>')
.dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false});
$('#btnCancel', dialog).click(function(){
//...
});
dialog.dialog('open');
EDIT: Without reading jQuery UI code it seems that a div with a class attribute like 'ui-dialog-buttonpane' will be removed from the dialog html. So if you choose this approach
you must avoid reusing the jQuery UI dialog classes.
2) Other approach could be add a third button using the dialog's property and substitute the third button html for your checkbox:
//Again use the dialog object as the scope for the selector.
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
EDIT: The object returned by dialog correctly refers to the DOM element using in the creation of the dialog instead of all the machinery to make the dialog work. That is way you
will need to use dialog.parent() as the scope of the above selector.
3) A third option: Use a regular button that provides the same check/uncheck semantic that a checkbox (I mean visually, craft some CSS), when this button is clicked just make sure some hidden field in the dialog markup (Im thinking in a form you will post after the OK is pressed) gets updated to reflect the check state.
$("<div>...</div>").dialog({
modal: true /..
},
buttons: {
//...
'IsDraft': function() {
$(this).toggleClass('checked')
$("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked'));
}
}
});
EXAMPLE (BASED IN YOUR CODE):
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400,
buttons: {
IsDraft: function(){alert('draft');},
Save: function(){alert('saving');},
Cancel: function(){alert('cancel');}
}
});
//lets do a replacement to get a checkbox in the button pane.
$('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
dialog.dialog('open');

Maybe it'll help: look at the JQuery UI button. It can work as a checkbox. You can create separate button in the dialog for your purposes.