Incrementing fieldset IDs sometimes results in duplicates - javascript

I am trying to allow the number of input fields to be increased or decreased for several different sections. As demonstrated by the code below, with only 2 sections, each fieldset created should have a unique ID to allow it to be deleted.
I have observed that the IDs are not always unique but it is not consistent. Sometimes I can add 10 fieldsets between the 2 groups and not get any duplicate IDs and other times I will start getting duplicates on the 2nd or 3rd fieldset addition.
As shown in the image below in this particular case the duplicate IDs started happening when the 3rd fieldset was added.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing Fieldset Add/Delete</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
function AddGroup1() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group1new">Group 1</label>';
infield += '<input type="text" name="group1[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup1');
div.innerHTML += infield;
} // end of the AddGroup1 function
function AddGroup2() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group2new">Group 2</label>';
infield += '<input type="text" name="group2[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup2');
div.innerHTML += infield;
} // end of the AddGroup2 function
function newFieldset() {
var fpoint = 1; // fieldset ID pointer so we may address each one individually
var ids = $("fieldset[id^='newFieldset_']").map(function() { // get any already there
var partsArray = this.id.toString().split('_'); // break into pieces
fpoint = partsArray[1]; // first element of the resulting array should be a number
fpoint++; // increment by one
}).get(); // end of the map
return "newFieldset_" + fpoint; // give the caller the new fieldset ID
} // end of the newFieldset function
function deleteID(id2Delete) {
var deleteID = document.getElementById(id2Delete.id);
deleteID = deleteID.id;
$("#" + deleteID).remove();
} // end of the deleteID function
</script>
</head>
<body>
<h1>Testing Fieldset Add/Delete</h1>
<form method="post" action="WeedsTest.html">
<fieldset>
<label for="group1">Group 1</label>
<input type="text" name="group1[]" value="0" size="15" maxlength="15" />
Add
</fieldset>
<div id="moregroup1"></div>
<fieldset>
<label for="group2">Group 2</label>
<input type="text" name="group2[]" value="0" size="15" maxlength="15" />
Add
</fieldset>
<div id="moregroup2"></div>
</form>
</body>
</html>

Here's a quick change to use relative positioning to locate the fieldset to remove. Your delete buttons change to:
<a href="#" onclick="deleteID(this);return false"......
And your deleteID function becomes
function deleteID(button) {
var fieldset = $(button).parent();
$(fieldset).remove();
}

Related

Autofocus on dynamically added textboxes - html/javascript

i am adding the text boxes dynamically to the form.
following is the code:
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
var af = "autofocus"
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required autofocus=" + af + ">";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
</head>
<body>
<form action="part.php" align="center" method="POST">
<div id = "dynamicInputHolder_1">
<b>Emotion </b><input type="text" value="" name="emotion" id="emotion" class="generatedEmotion" readonly>
<input type="hidden" value="" name="uniqueID" id="uniqueID">
<div id="dynamicInput_1">
<textarea rows="5" cols="50" readonly class="floating-box">
John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<br>
</form>
</body>
</html>
I am putting in autofocus="autofocus", but it works only for the first dynamic text box, for other it does not work. Any idea how can i achieve this?
See https://stackoverflow.com/a/47207659/5674976 for a detailed reason for autofocus not working; it only works on page load.
Use elementName.focus()
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
var af = "autofocus"
newdiv.innerHTML = "<input id='my-div-"+counter+"' type='text' name='" + arrName + "[]' required autofocus=" + af + ">";
document.getElementById(divName).appendChild(newdiv);
document.getElementById('my-div-'+counter).focus();
counter++;
}
}
</script>
</head>
<body>
<form action="part.php" align="center" method="POST">
<div id = "dynamicInputHolder_1">
<b>Emotion </b><input type="text" value="" name="emotion" id="emotion" class="generatedEmotion" readonly>
<input type="hidden" value="" name="uniqueID" id="uniqueID">
<div id="dynamicInput_1">
<textarea rows="5" cols="50" readonly class="floating-box">
John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<br>
</form>
</body>
</html>
from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
autofocus HTML5 This Boolean attribute lets you specify that a form
control should have input focus when the page loads, unless the
user overrides it (e.g. by typing in a different control). Only one
form element in a document can have the autofocus attribute, which
is a Boolean.
so you can use autofocus to focus on something (good for server side rendering)
and you need to use javascript if you want to change this after the page is laoded.
Edit:
see #George Campbell answer to how to achieve this: https://stackoverflow.com/a/47207691/6126033
Try to use just "<input type='text' name='" + arrName + "[]' autofocus";
And also ...
$(document).on(<event>, <object>, function(event) {console.log("test"});
(old post, already accepted answer, but anyways....)
try this.
var focusDynForms = function() {
var captureAutoFocus = function (form) {
var el_keys = Object.keys(form.elements);
for(var i = 0; i < el_keys.length; i++) {
var el = form.elements[el_keys[i]];
if (["text","password"].indexOf(el.type)>=0){
if (el.autofocus){
el.focus();
return;
}
}
}
};
var forms = document.querySelectorAll("form");
// dynamically created forms need a helping hand to find focus in life...
forms.forEach(captureAutoFocus);
}
Obviously this only addreses text and password inputs, but you can customize for other types.

Get id or class name of particular input(child) elements of a div in jquery

Using bellow code i am dynamically created the table.
In this table the 4th td have dynamic data with div what i want is
When user select textbox want to remove child div then append textbox or
if he select fileupload then append upload field in that td tag only
//some lines of table opening and header code comes here
$.each(data,function(key,value){
MoreTag += '<tr><td style="width: 10px">'+value.Id+'</td>';
MoreTag += '<td>'+value.installment_number+'</td>';
MoreTag += '<td>'+value.instal_title+'</td>';
//4th td element
MoreTag += '<td id="tabledata">'+
'<div id="fields'+value.installment_number+'">'+
'<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox"> Text Box</label>'+
' <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload"> File Upload</label>'+
'</div></td>';
MoreTag += '<td>'+value.instal_amount+'</td></tr>';
});
MoreTag += '</tbody>';
MoreTag += '</table>';
MoreTag += '</div>';
$('#listofstudloanschedules').append(MoreTag);
I am tring with this script
var childinput = '';
$(document).on('change',"#tabledata",function(){
var name = $(this).children("div").prop("id");
$("#" + name + " input").click(function(){
childinput = $(this).attr("id");
alert(childinput);
});
});
By this i got perticular field id or class name.
problem
But for every rows 4th td the first click was not alerting..
let me give you simple code snippet, but you have to modify value of input type radio button as per your requirement
$(document).ready(function() {
$('input[type=radio]').change(function() {
if (this.value == 'textbox') {
alert("textbox");
}
else if (this.value == 'uploadfile') {
alert("uploadfile");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<td id="tabledata">
<div id="text_fields">
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox" value="textbox">Text Box</label>
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload" value="uploadfile">Upload File</label>
</div>
</td>
You can get id of upload input by using jquery .on("click") event like following.
$("div#text_fields input").on('click',function(){
var name=$(this).attr("id");
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="tabledata">
<div id="text_fields">
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">Text Box</label>
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">Upload File</label>
</div>
</td>
This is the right solution as per my requirement.
$(document).on('change',"#tabledata",function(){
var childinput=$(this).find("div input:checked").prop("id");
alert(childinput);
});

Jquery add row dele buttons?

I want to add the insertion button in the following code directory
How can I add a button to the insert section.
$(document).ready(function() {
$('#row_add_btn').click(AddRows)
var number = 1;
function AddRows() {
number++;
if (number < 21) {
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>
If you want the button click to remove the row, this jQuery should do the trick:
$(document).on("click", ".ibtnDel", function () {
$(this).parent().remove();
});
jQuery on() documentation
If you planning to insert deletion of the the rows then you need to use the code what Will P. suggested above but in addition you will need to handle the maximum number of rows differently.
Increment the number in if condition and decrement on remove row.
Example Snippet:
$(document).ready(function() {
$('#row_add_btn').click(AddRows);
$(document).on('click', '.ibtnDel', removeRow);
var number = 1;
function AddRows() {
if (number <= 21) {
number++;
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
function removeRow() {
number--;
$(this).parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

Retrieve user input not working?

So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>

Loading Values into auto generated HTML input elements using javascript

I am using a javascript function to populate html element generated automatically after submitting a form from a different div.
Here is the html:
<html >
<body>
<div class="wrapper">
<div id="one">
<form name="form">
<fieldset>
<legend>BILLING</legend>
<div> <label for="ex1">Procedure/Drug</label>
<input type="text" name="procdrug" id="procdrug"/><br><br>
<label>Amount</label>
<input type="text" name="amount" id="amount"/><br><br>
<input type="button" onclick="addInput()" name="add" value="Add input field" style="margin-left:150px" />
</div>
</fieldset>
</form>
</div>
<div id="two">
<fieldset>
<legend>TN QUEUE</legend>
<label><B>Procedure/Drug</b></label><label><b>Amount</b></label><br>
<div id="text">
</div>
<label><b>Total</b></label>
<input type="text" name="total" id="total"/>
</fieldset>
</div>
</body>
</html>
Here is the javascript function
<script language="javascript">
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
if (fields != 10)
{
document.getElementById('text').innerHTML += "<input id='pdgen' type='text'/>";
document.getElementById('text').innerHTML += "<input id='amtgen' type='text'/><br />";
document.getElementById('pdgen').value=pd;
document.getElementById('amtgen').value=amount;
fields += 1;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
</script>
The generated elements values are posted from the form and increment on every submit. My problem is the only on submit first element is updated with the new value:
Sample results
Procedure/Drug Amount
Amoxyl 200
blank element blank element
blank element blank element
blank element blank element
Total
The problem is you are adding your elements with the .innerHtml += method which is avoiding the values entered before. You need to use appendChild method to add new elements. Here is your new code :
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
var br = document.createElement('br');
if (fields != 10)
{
var input1 = document.createElement('input');
input1.setAttribute('id','pdgen' + fields);
input1.value = pd;
var input2 = document.createElement('input');
input2.setAttribute('id','amtgen' + fields);
input2.value = amount;
document.getElementById('text').appendChild(input1);
document.getElementById('text').appendChild(input2);
document.getElementById('text').appendChild(br);
fields++;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
FIDDLE

Categories

Resources