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(){})
Related
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';
}
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.
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];
I am trying to create dynamic textboxes using php & jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks
<html>
<head>
<title>author</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>Author</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addAuthor").click(function () {
if(counter>10){
alert("Only 10 authores allow");
return false;
} //addAffiliation
var newauthorDiv = $(document.createElement('div'))
.attr("id", 'authorDiv' + counter);
newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
'<br><label>Name : </label>' +
'<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
'<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
'<input type="text" name="author' + counter + 'affiliation' + counter +
'" id="author' + counter + 'affiliation' + counter +'" value="" >' +
'<input type="button" id="addAffiliation" value="+" >' +
'<input type="button" id="removeAffiliation" value="-" >' + '</div>');
newauthorDiv.appendTo("#AuthorGroup");
counter++;
});
$("#removeAuthor").click(function () {
if(counter==1){
alert("No more author to remove");
return false;
}
counter--;
$("#authorDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Author " + i + " : " + $('#author' + i).val();
}
alert(msg);
});
});
// Affiliation
$(document).ready(function(){
var counter = 2;
$("#addAffiliation").click(function () {
if(counter>10){
alert("Only 10 Affiliations allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
'<input type="text" name="author1_affiliation' + counter +
'" id="author1_affiliation' + counter + '" value="" >');
newTextBoxDiv.appendTo("#AffiliationGroup");
counter++;
});
$("#removeAffiliation").click(function () {
if(counter==1){
alert("No more Affiliations to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='AuthorGroup'>
<label><b>Author 1 </b></label> <br>
<label>Name : </label><input type='author' id='author1_name1' >
<div id='AffiliationGroup'>
<label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' >
<input type='button' value='+' id='addAffiliation'>
<input type='button' value='-' id='removeAffiliation'>
<!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
</div>
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
</body>
</html>
See http://jsfiddle.net/9y3n33jx/
I haven't completed the whole thing but it should give you an idea.
You need to put your original author inside a div.authorDiv. Use class names instead of id for your + - buttons.
<input type='button' value='+' class='addAffiliation'>
<input type='button' value='-' class='removeAffiliation'>
Because those buttons will be dynamically added you need to bind to click event on body for the button class:
$('body').on("click", ".addAffiliation", function () {
(When the button is clicked you need to figure out the number of affiliates inside div by class, i.e. $(this).parent().(".affiliateClass").length)
When the add button is clicked, you need to add the new div to the parent of the clicked button:
newTextBoxDiv.appendTo($(this).closest(".authorDiv"));
You'll have to do the same for the - button. This should get you going in the right ddirection.
I have table with dynamic rows like
<table>
for(int i=0;i<=Modal.Count;i++)
{
<tr class="trList">
<td class="tdEmpid><input type="button" value="Insert row" class="btnInsert"/></td>
<td><input type="text" id="Sun_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].SUN_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>
<td><input type="text" id="Mon_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].MON_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>
<td><input type="text" id="Tue_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].TUE_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>;
..........
..........
</tr>
}
Now, I want to add row where the button dynamically exactly to next row where button is clicked , for that i have written jquery code
$(document).ready(function(){
$('.btnInsert').live('click',function(){
var html = '<tr class="trNeedTimesheet"><td></td><td></td></td><td><p style="background-color:white;">-- Need To Enter TImesheetHours</b> -------</p></td></tr>';
$("" + html + "").insertAfter($(this).parent('td.tdEmpId').parent('tr.trList'));
});
});
It is not only adding , but it should insert and work same like slidetoggle functionality.
How can I do that?
parent() don't accept argument but parents() do.
Change this line
$("" + html + "").insertAfter($(this).parent('td.tdEmpId').parent('tr.trList'));
to
$("" + html + "").insertAfter($(this).parents('tr.trList'));
Demo
Edit : updated toggle functionality.
jQuery :
$(document).on('click','.btnInsert', function(){
var $nextTr = $(this).parents('tr.trList').next();
var newTrExist =$nextTr.hasClass('newTr');
if(newTrExist)
{
$nextTr.toggle();
}
else
{
var html = '<tr class="newTr trNeedTimesheet"><td></td><td></td></td><td><p style="background-color:white;">-- Need To Enter TImesheetHours</b> -------</p></td></tr>';
$(html).insertAfter($(this).parents('tr.trList'));
}
});
Updated Demo :
Check this Working Fiddle
For insert .parents(),
$(html).insertAfter($(this).parents('tr.trList'));
For slideToggle(),
$(document).on('click','.trNeedTimesheet',function(){
$('p',this).slideToggle()
});