Why i can't getElementByName?
<form class="form" action="#">
<p class="EmptySlot" hidden>
<input name="characters" type="radio" id="empty" disabled="disabled"/>
<label for="empty">Пустой слот</label>
</p>
</form>
Then:
$(".form").append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
And it's don't work:
var radios = document.getElementsByName('character');
The method will return a collection, not a single Element. You may try...
$(".form")[0].append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
Should get the first form that belongs to the "form" class.
The second should work, but remember that "radios" will be a collection too.
.getElementsByName might return more than one element if multiple elements have the name of 'character'.
To get the first item in the list of returned elements, try:
var radios = document.getElementsByName('character')[0];
Related
I am adding controls dynamically in the below div when you click a button like this:
<div class="column" id="addkey" style="width: 200px">
</div>
<div class="column" id="main1" style="width: 150px">
</div>
<div class="column" id="docmanindex" style="width: 150px">
</div>
</div>
function AddPrimaryClick() {
var selectedprimarykey = $("#ddlprimarykey :selected").text();
var one = chkkeyId + i;
var two = radioId + i;
var three = chkindxid + i;
$('#addkey').append('<input type="checkbox"' + ' id = ' + one + '/> ' + selectedprimarykey + '<br />' + '<br />');
$('#main1').append('<input type="radio" ' + ' id = ' + two + '/> ' + '<br />' + '<br />');
$('#docmanindex').append('<input type="checkbox" ' + ' id = ' + three + '/> ' + '<br />' + '<br />');
i = i + 1;
};
How do i remove above controls which are checked on a button click event?
You can do it like this:
$("#button").on("click", function() {
$("input:checked").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="radio" name="test" />
<input type="radio" name="test" />
<button id="button">
Remove
</button>
You can loop through all the checked check boxes and checked radio buttons and remove it using jquery remove() function
$("input[type='checkbox']:checked, input[type='radio']:checked").each(function(){
$(this).remove();
});
I have three check box with two is auto selected. I have to display the text field with a label which check box is selected.
I tried below code but it is displaying only one text field and type is undefined I checked in view source. I think there is some issue with this.
Would you help me out?
$(document).ready( function(){
$checkbox=$(".add_student_input").is(":checked");
if($checkbox == true) {
$(".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();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>
<span class="students_items"></span>
You are missing the loop for $(".add_student_input") which gives you three checkboxes. So, you need to use each() that will loop over all three checkbox and check for the checked checkbox and then create a respective text element for it.
$(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();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class='students_items'></div>
It appears that you do not have HTML element with class "students_items" in your code, so this portion of the JavaScript will not be executed:
$(".students_items").append('<div class=....)
Create element with such CSS class and try again.
can anyone help me adding a specific html structure inside this javascript?
// If question has >1 true answers and is not a select any, use checkboxes; otherwise, radios
var input = '<input id="' + optionId + '" name="' + inputName + '" type="' + inputType + '" /> '
var optionLabel = '<label for="' + optionId + '">' + answer.option + '</label>'
var answerContent = $('<li></li>')
.append(input)
.append(optionLabel)
answerHTML.append(answerContent)
I want to add this HTML structure:
For Radio buttons:
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">First</span>
</label>
And for checkboxes:
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
And here is the part that decide if the input will be a checkbox or a radio button:
// prepare a name for the answer inputs based on the question
var selectAny = question.select_any ? question.select_any : false,
forceCheckbox = question.force_checkbox ? question.force_checkbox : false,
checkbox = (truths > 1 && !selectAny) || forceCheckbox,
inputName = $element.attr('id') + '_question' + (count - 1),
inputType = checkbox ? 'checkbox' : 'radio'
PS: This is my first experience with javascript, i'm a complete newbie on javascript, so.. if anything is missing, tell me
Dynamically added checkbox inside jQuerymobile list view is not rendering properly.
Find below the unorder list. I have added a sample listitem in the HTML itself.
<ul data-role="listview" id="ul_address_list" >
<li data-icon="false"><a href="#" class="add-container">
<label class="add-container" data-corners="false">
<input type="checkbox" value="true" />
<label class="lbl_add-container">
<h3>Header</h3>
<p>Content</p>
</label>
</label>
</li>
</ul>
Below is the output for the above code. Which is rendering correct.
Now I am trying to add the list item dynamically using append function using jQuery.
$.each(obj_address_list, function (ctr, obj) {
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>');
});
$('#ul_address_list').listview('refresh');
below is the output for the above code. Not displayed correctly.
Why the listitem added dynamically is not rendering properly?
Just add
$("[type=checkbox]").checkboxradio();
before
$('#ul_address_list').listview('refresh');
Or, call .trigger("create");
$('#ul_address_list').listview('refresh').trigger("create");
Demo
You need to call the listview refresh inside your append function and add .trigger("create");.
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>').listview("refresh");
Check this fiddle: http://jsfiddle.net/eRsMV/5
you have extra
});
just use
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>');
$('#ul_address_list').listview('refresh');
my advice is to use some editor like dreamweaver just to save your time.
http://jsfiddle.net/prollygeek/xqwqM/1/
I have a method like:
$('.officeapprovalspan').click(function () {
var invoicelineid = $(this).data("invoicelineid");
var approval = $(this).data("approval");
$(this).replaceWith('<input type="radio" name="variety" value="null" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="pleaseapprove">Please Accept</span><br >' +
'<input type="radio" name="variety" value="false" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="onhold">On Hold</span><br >' +
'<input type="radio" name="variety" value="true" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="accepted">Accepted</span>');
$(document).on('change', '.radioapproval', radiohandler);
});
So, I have the three radio buttons. What I want to achieve is based on the value of the variable approval preselect the appropriate radio button. Approval will have the value null, false or true.
Can someone please tell me how you would write this given I'm adding it with the replaceWith
Try using .html():
var invoicelineid = $(this).data("invoicelineid");
var approval = $(this).data("approval");
$(this).html(
'<input type="radio" name="variety" value="null" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="pleaseapprove">Please Accept</span><br >' +
'<input type="radio" name="variety" value="false" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="onhold">On Hold</span><br >' +
'<input type="radio" name="variety" value="true" class="radioapproval" data-invoicelineid=' + invoicelineid + ' /><span class="accepted">Accepted</span>'
)
.find(':radio[name="variety"][value="' + approval + '"]')
.prop('checked', true);
For example if the value of the approval variable is true the last radio button will be selected.