Removing checkboxes dynamically added to a div - javascript

I am using the following code to dynamically create a set of checkboxes based on user input from dropdown list. It does not delete the previous selections when the user select another option from the dropdown list.
It only deletes the checkboxes but not the description attached to the check box. I am unable to find the error with the code. Appreciate your help.
$(document).ready(function() {
$('#sel_LearnA').change(function(event) {
var $learnA=$("select#sel_LearnA").val();
$.get('actionDataSelect',{LAreaID:$learnA},function(responseJson) {
// remove existing checkboxes
$('#somediv').children().remove();
// add checkboxes to the div
$.each(responseJson, function(index, item) { // Iterate over the JSON array.
$('#somediv').append("<input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</br>");
});
});
});
});
And my jsp looks like,
<div id="somediv"></div>

.children() gets only the element nodes of the parent, not the text nodes
Try empty()
$('#somediv').empty();
or just .html('')
$('#somediv').html('');

Empty function resets div.
$( "#yourDivId" ).empty();

This is not the error in your code.
The description is not attached to the checkbox.
$('#somediv').append("<input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</br>");
You are closing the checkbox and the description is given after. So .remove will remove the checkbox, not the description.
Put the checkbox and description inside a label and remove the label.
This will definitely work.
$('#somediv').append("<label><input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</label></br>");

Related

dynamically edit row using jquery

I am perform add ,edit and delete operation using jquery.
i have create product.html file and jsproduct.js file.
My Question is i am click edit button and change selectbox value and press edit
product button
but select box value can not display table
<script async src="//jsfiddle.net/kishankakadiya/m6sn39hp/1/embed/"></script>
Check Demo
The problem is that you are using the same id for the <td>elements on your table. You are using the counter with this and the result is having more than one <td id="1"> and jQuery will not handle it correctly.
I changed your td's to use a class instead of id and added a class prefix to your td's like this:
'<td class="category-' + this.counter + ' ">' + product_category +'</td>'
'<td class="name-' + this.counter + '">' + product_name + '</td>'
And in your edit function I used the class as a selector:
$(".category-" + this.id).text(product_category);
$('.name-' + this.id).text(product_name);
Then it works correctly. You still have some trouble in setting your mode etc but hopefully you can get those fixed by yourself.
Fiddle: https://jsfiddle.net/ye6mugxe/1/

If element doesn't exist, add to input field in javascript

I am trying to add a hashtag to an input field. The problem is that when I add it, I can keep adding it. I am wondering of a way to check the input field and if the hashtag already exists, to not add it?
My javascript is:
$('.item').click(function(){
var clonedTag = $("<div class='tag_clone' data-value=" + ($(this).attr('data-value')) + ">"+($(this).attr('data-value')) + "<a href='javascript:void(0)' class='remove' tabindex='-1' title='Remove'>" + "×" + "</a>" + "</div>")
$('.selectize-input.items.not-full').append(clonedTag)
})
$('.selectize-input.items.not-full').on('click', '.remove', function(e){
$(this).parent('.tag_clone').remove()
e.preventDefault();
})
So, if #example1 exists in the top input field, a user can not add it again (I'm using Selectize.js)
In the image below, I click the bottom input field to get a clone of the hashtag to the top input field.

Edit dynamically created row in a form

I have difficulties to edit in form dynamically added rows. For example if some of the cell in the row have error - clicking on it will feed the form with selected row. Hope I'm clear.
Here is a code:
(document).ready(function(){
$("#inputtitle").append("<input type='text' name='type1' placeholder='Title'/><br>");
$("#inputremarks").append("<input type='text' name='type2' placeholder='Remarks'/><br>");
$("#inputdate").append("<input type='text' name='type3' placeholder='Date'/><br>");
$("#inputoption").append("<input type='text' name='type4' placeholder='Option'/><br>");
});
$("form").submit(function(e){
e.preventDefault();
var newName = $('form').find('input[name="type1"]').val();
var newName1 = $('form').find('input[name="type2"]').val();
var newName2 = $('form').find('input[name="type3"]').val();
var newName3 = $('form').find('input[name="type4"]').val();
$('table').append('<tr><td>' + newName + '</td><td>' + newName1 + '</td><td>' + newName2 + '</td><td>' + newName3 + '</td></tr>' );
});
Sorry for being not clear. My question was how to feed back the form when click to one of the new created row. Below is updated JSFiddle with approximate solution, but not correct, because probably need another button with name UPDATE and may be need another column with ID. DEMO.
I desided to go by different way. So I created additional button to run a script for editing cell of created table. The link to the code you can find [here] Using jQuery to edit individual table cells

How to loop over all the selected elements of an HTML page using jquery

I am working on a Quiz Application where I need to get all the selected elements or the user answers . These elements can be radio input, check-box input or the text field. every element is assigned a question_id attribute, answer_id and a mark attribute with it. What I want to do is I have to get these all question_id , answer_id and mark attribute so that I can calculate marks, and send the both question_id and answer_id to DB so that i can store the related user answer under a particular question. i have rendered the quiz on template using this code.
$(data.quiztopics).each(function(index,element){
$(element.questions).each(function(index,question){
$(".quiz").append("<form name='question' class= question_"+question.id+"><input type='text' disabled value="+question.question_text+"/><br></form>");
if(question.question_type=='NUM'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='radio' question_id='+question.id+'answer_id='+answer.id +'name='answer' class=answer_"+answer.id+" mark="+answer.marks+"value="+answer.answer_text+">"+answer.answer_text+"</input>")
});
}
else if(question.question_type=='MCQ'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='checkbox' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
});
}
else if(question.question_type=='FIB'){
$(question.answers).each(function(index,answer){
$(".question_"+question.id).append("<input type='text' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
});
}
});
});
tell me how can i get the attributes of the selected elements for submitting the quiz.
I think this will do:
var questions = {};
$(".quiz :selected, .quiz :checked, .quiz input[type=text]").each({
var $this = $(this);
var question = $this.attr('question_id');
questions[question] = {
answer: $this.attr('class'),
};
});
its very simple, you just have to use element.attr( attributeName ) function
JQuery documentation
A little JSFIddle to get you going
alert("Radio Mark " + $("#one").attr('mark') + ", Radio Value " + $("#one").attr('value'));
alert("check Mark " + $("#two").attr('mark') + ", check Value " + $("#two").attr('value'));
I have solved this problem by getting all the elements available in the DOM by their name, using getElementsByName('answer') method. It returns me a list then looping over this list i checked if the element is check or not if it is checked i get their attributes.
attributes_list=new Array()
var answers=document.getElementsByName('answer');
for(i=0;i<answers.length;i++){
if(answers[i].checked){
question_id=answers[i].attributes['question_id'].value
answer_id=answers[i].attributes['answer_id'].value
attributes_list.push({'que':question_id,'ans':answer_id});
}
}

Replacing/reloading input list with jQuery and leaving first element

I created jQuery function that gets bunch of simple objects that contains id and title.
Then I run simple loop to create list:
$.each(data['results'], function(key, val) {
items.push('<label for="radio_show_' + val['id'] + '" >'
+ '<input type="checkbox" name="radio_show" class="checkbox" id="radio_show_' + val['id'] + '" value="'+ val['id'] + '" >'
+ val['title']
+ '</label>');
});
But now I don't know how to do the cleaning part.
I want to append this list to certain <ul>, I could do that with .appendTo(), but each time i would call this, it would add more and more lists. So before appending I would need to delete <ul> contains with .empty(). But the main problem is that I want to keep first element that would be same input just with no value and title of "Select all" (You get the idea).
Could you use something like this to 'clear' the ul -
$("ul > li:not(:first)").remove()
That should remove all the items in the ul aprt from the first one.
Working demo - http://jsfiddle.net/zUuE9/
You could clear your ul with:
$('#my_ul input[value!=""]').parent('li').remove();
This would leave your Select All Checkbox (value="") in the ul.
To remove all li's except for the first one, try this:
$('#my-ul li').slice(1).remove();

Categories

Resources