Develop Reference

Create row with unique ID in javascript

Below is my javascript function to add new row to <table> in HTML. I need a unique row id for each table row. Below is my code :
$(document).ready(function(){
var html = '<tr><td class="cb"><input class="form-control" type="text" value="" id="inputString" name="inputString"/><div id="showList"><ul class="list-group"></ul></div></td><td><input type="checkbox" name="debit" class="form-control"></td><td><input type="checkbox" name="credit" class="form-control"></td><td><input type="number" name="amount" class="form-control"></td><td><input class="btn btn-warning" type="button" name="remove" id="remove" value="Remove" onclick="removeMe(this);"></td></tr>';
var x=1;
$("#add").click(function(){
$("#table_field").append(html);
});
});
How can I achieve this in the same function
I tried creating unique ids but not able to do.. Please help me

I need a unique row id for each table row.
To add an id to each row while adding you just have to pass it on $("#table_field").append(). Below I am using the length of tr inside #table_field to set an id.
$("#add").click(() => {
const
tTable = $("#table_field"),
tID = `tr${tTable.find('tr').length}`;
tTable.append(
`<tr id = '${tID}'><td>${tID}</td></tr>`
)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = 'table_field'></table>
<button id = 'add'>Add</button>
You can adjust the logic of generating the id to how you see fit. Like using Math.random or Date ticks.

Append html string as a table row (<tr>) via javascript-jquery

I'm trying to append an HTML string to
var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$('#featureContainer').append(jfield);
When the button is clicked it will crete a input field, but if I click again it creates the input in the same row.
How can I make a new row with the input in it?
The following is my HTML code
<tr>
<td id="featureContainer"></td>
</tr>
If I click the button for the second time it creates it in the same row.
I want it to create it in new row.

As we don't know wether trs are wrapped inside table or tbody, .... We have to look for the closest tr and then get its parent then append a new row to that parent.
So, you should replace this:
$('#featureContainer').append(jfield);
with:
$('#featureContainer').closest('tr').parent().append('<tr><td>' + field + '</td></tr>');
NOTE: that inside field you have a static ID which will be on all the inputs you spawn which will be wrong since IDs are unique. So you may want to assign diferent IDs for diferent inputs.

You can just add the html code into field variable, like below:
var field = "<tr><td id="featureContainer"><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td>
</tr>"
var jfield = $(field);
Assuming there is a button with id = 'add' and a table with id='data', then you can add this after above code:
$('#add').click(function(){
$('#data').append(jfield);
});

Your on the right track. But you don't need the jfield.
this appends the value of 'field' inside the td element:
$('#featureContainer').append(field);
but what you want is to append inside the table. So give your table a id (or the tbody) and do the following:
You need to embed the field inside a <tr><td> section and append that as a whole.
var field = var field = '<tr><td><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td></tr>';
then in the click event:
$('#tableid').append(field);

Thr issue with your code is that you are trying to append to an element using id selector. Since in a valid html there should be only a single element with an unique id, you will be appending the new element always to the same td#featureContainer.
I will suggest you to change the id to class. To select the td.featureContainer where you need to append the new element, you can check inside the clicked button element event handler and find the td.featureContainer
$(".feature").on("click", function() {
var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$(this).parent().prev(".featureContainer").append(jfield);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="featureContainer"></td>
<td>
<input type="button" class="feature" value="click for row one">
</td>
</tr>
<tr>
<td class="featureContainer"></td>
<td>
<input type="button" class="feature" value="click for row two">
</td>
</tr>
</table>

First the id should be unique in the same document so better to use a common classes instead, then you could use append() to add new row (including tr/td), check the example below.
Hope this helps.
$('#add-row').on('click', function(){
var field = '<input type="text" name="featureName" class="form-control" placeholder="Feature Name" value="">'
$('table').append('<tr><td>'+field+'</td></tr>');
console.log($('table tr').length+' rows');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Default row</td>
</tr>
</table>
<button id='add-row'>Add row</button>

Clone a Textarea Field with its Value using Javascript

I have the code below, ready without errors. My problem is that, when you type a value in the TEXTAREA field the value does not copy itself along the clones in spite of what happens with the INPUT field. Try it your self below.
Thanks
//JAVASCRIPT PART
function insRow(row)
{
i=row.parentNode.parentNode.rowIndex;
var x=document.getElementById('myTable');
var new_row = x.rows[i].cloneNode(true);
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);
}
<table id="myTable">
<tr>
<td><input size=10 type="text" name="myInput[]" value = ""/></td>
<td><textarea name="myTextArea[]" type="text" cols="10" rows="5" type="text" ></textarea></td>
<td><input type="button" id="addInv" value="Add" onclick="insRow(this)"/></td>
</tr>
<table>

wellll did you try adding it..
var x=document.getElementById('myTable');
var val = x.getElementsByTagName('textarea')[0].value;
var new_row = x.rows[i].cloneNode(true);
new_row.getElementsByTagName('textarea')[0].value = val;
x.rows[i].parentNode.insertBefore(new_row, x.rows[i].nextSibling);

HTML Dynamic div resize on javascript call

So i am using a javascript function to add rows based on need to a table. I am trying to figure out how to resize the div so that when a row is added the div increases in size to accomodate the new row. i also need the div next to it to resize so that the page keeps a uniform style. The function of the dynamic table allows for the user to add and delete rows from the table. Any help is appreciated.
Thank you.
<div class="leftboxes leftline1">
Full Name Of Detained Juvenile
</br>
<input id="detaineeLastName" onfocus="if (this.value=='Last') this.value = ''"
type="text" value="Last"/>
<input id="detaineeFirstName" onfocus="if (this.value=='First') this.value = ''"
type="text" value="First"/>
<input id="detaineeMiddleName" onfocus="if (this.value=='Middle') this.value = ''"
type="text" value="Middle"/>
</br>
Aliases
<table id="witnessTable" style="table-layout:fixed" border="1">
<tr>
<td style="width:0px"><input type="checkbox" name="chk" style="width:15px;margin-
left:18px"/></td>
<td><input id="aliasLast" onfocus="if (this.value=='Last') this.value = ''"
type="text" value="Last"/></td>
<td><input id="aliasFirst" onfocus="if (this.value=='First') this.value = ''"
type="text" value="First"/></td>
<td><input id="aliasMiddle" onfocus="if (this.value=='Middle') this.value = ''"
type="text" value="Middle"/></td>
</tr>
</table>
<input type="button" value="Add Row" onclick="addRow('witnessTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('witnessTable')" />
</br>
</div>
<div class="rightboxes rightline1">
Sex
</br>
Age
</br>
DOB
</div>

When you add or remove a row, try putting this:
var h = myTable.clientHeight;
var divRight = document.getElementById("right");
var divLeft = document.getElementById("left");
divRight.style.height = (h + 60) + "px";
divLeft.style.height = (h + 60) + "px";
Note I added an Id label to the DIVs so it's easyer to handle them.

Use jquery if that is an option:
var divOneHeight = $("#div1ID").height() + 10;
$("#div1ID").height(divOneHeight);
var divOneWidth = $("#div1ID").width() + 10;
$("#div1ID").width(divOneWidth);
Something like that. Else use javascript:
document.getElementById("div1ID").style.width += 10;

use this for adding the rows to the table and extending the div:-
var y = document.createElment("the tag of the element wanted to be created");
var x = document.getElementByClassname("tables class");
x.appendChild(y);
then use x.removeChild(); for deletion.
then change the event handler for the element you want to trigger the event, and then put the code in it the makes the changes on both the divs.
edit: i used the getElementByClassName to simplify the styling process so that the appended elements just go under the styling class of the table and only increase its size with stable shape.

Getting input values from text box

I'm trying to get the text from a text box.
I have 2 input text boxes that are not in a form, and I'm trying to retrieve the value and store it in a variable.
This code returns undefined in the alert box that pops up.
<script>
var userPass = document.getElementById('pass');
var userName = document.getElementById('fName');
function submit(){
alert(userPass.value);
}
</script>
When I run it with userName.value as a parameter in the alert function, it will work and display what ever you type in the box.
Here is the html:
<table id="login">
<tr>
<td><label>User Name</label></td>
</tr>
<tr>
<td colspan="2"><input class="textBox" id="fName" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td><input type="button" class="loginButtons" value="Login" onclick="submit();"/>&nbsp&nbsp&nbsp
<input type="button" class="loginButtons" value="Cancel"/></td>
</table>

You will notice you have no value attr in the input tags.
Also, although not shown, make sure the Javascript is run after the html is in place.

<script>
function submit(){
var userPass = document.getElementById('pass');
var userName = document.getElementById('user');
alert(user.value);
alert(pass.value);
}
</script>
<input type="text" id="user" />
<input type="text" id="pass" />
<button onclick="submit();" href="javascript:;">Submit</button>

// NOTE: Using "this.pass" and "this.name" will create a global variable even though it is inside the function, so be weary of your naming convention
function submit()
{
var userPass = document.getElementById("pass").value;
var userName = document.getElementById("user").value;
this.pass = userPass;
this.name = userName;
alert("whatever you want to display");
}

you have multiple elements with the same id. That is a big no-no. Make sure your inputs have unique ids.
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
see, both the td and the input share the id value pass.

Remove the id="pass" off the td element. Right now the js will get the td element instead of the input hence the value is undefined.

Javascript document.getElementById("<%=contrilid.ClientID%>").value; or using jquery
$("#<%= txt_iplength.ClientID %>").val();

This is the sample code for the email and javascript.
params = getParams();
subject = "ULM Query of: ";
subject += unescape(params["FormsEditField3"]);
content = "Email: ";
content += unescape(params["FormsMultiLine2"]);
content += " Query: ";
content += unescape(params["FormsMultiLine4"]);
var email = "ni#gmail.com";
document.write('SUBMIT QUERY');