Develop Reference

Populate table fields based on user input

I have to make an app, that takes a user input field, and then populates a table, according to some calculations. However, I don't understant how can I do this calculations to appear as a result in the field of the table. Can someone help me please?
Here is my code;
function countbase() {
let count = 0;
var input = document.getElementById('sequence').value;
const inputLen = input.length;
document.getElementById('bcount').value = GC_Content;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<h2>Calculater example</h2>
<label for="sequence"> Name field</label>
<br>
<br>
<textarea id="sequence" name="sequence" placeholder="Enter sequence" rows="2" cols="50">
</textarea>
<br><br>
<button onclick="countbase();">Check </button>
<br><br>
<table style="width:100%" id="values">
<tr>
<th colspan="2"> Results</th>
</tr>
<tr>
<td align="center"><span><b>Lenght Count:</b></span></td>
<td align="center"><span id="bcount"></span></td>
</tr>
<tr>
<td align="center"><span><b>Word Count :</b></span></td>
<td><b><span id="GC"></span></b></td>
</tr>
</table>

From your line:
document.getElementById('bcount').value = GC_Content;
Here GC_Content isn't defined, I guess you trying to set the inputLen variable.
That said, to change the content of a <span>, use innerHTML:
Change span text?
To get the 'word count', we can use split(' ') to create an array of the input string, then set the .length of that array as the content of the <span>
function countbase(){
// Get input element
const input = document.getElementById('sequence').value;
// Set length
document.getElementById('bcount').innerHTML = input.length;
// Set word count
document.getElementById('GC').innerHTML = input.split(' ').length;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<h2>Calculater example</h2>
<label for="sequence"> Name field</label>
<br>
<br>
<textarea id="sequence" name="sequence" placeholder= "Enter sequence" rows="2" cols="50">
</textarea>
<br><br>
<button onclick="countbase();">Check </button>
<br><br>
<table style="width:100%" id="values">
<tr>
<th colspan="2"> Results</th>
</tr>
<tr >
<td align="center"><span><b>Lenght Count:</b></span></td>
<td align="center"><span id="bcount"></span></td>
</tr>
<tr>
<td align="center"><span><b>Word Count :</b></span></td>
<td><b><span id="GC"></span></b></td>
</tr>
</table>

You can use Array.split() method and then get length of result array
let GC_Content = input.split(" ").length //splits input by spaces and count length of result array

Issue replacing input value in array

I did an example about replacing the input value when the row is deleted but is not working (this is not a static example).
<script src="./edit_files/prototype.js" type="text/javascript"></script>
<script src="./edit_files/application.js" type="text/javascript"></script>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="cristianoronaldo#realmadrid.com"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="ONLY THE INPUT WILL BE test#hotmail.com IF I CLICK ON DELETE"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
Here is the application.js file:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
I tried this code but only works if I remove the first row.
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
$('should_change_value').update("test#hotmail.com");
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
Here is the live example in jsfiddle
Here is the example download on Github but is not replacing the input value correctly

Ok I got it, you want to change the input value when the row is deleted, so do this:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
var element_text2 = $(element).up('.contact').down('.should_change_value',0);
element_text2.className = 'should_change_value';
element_text2.value = 'test#hotmail.com';
if (should_destroy) { $(element).next('.should_destroy').value = 1;}
$(element).up('.contact').hide();
}

Javascript - how to add array elements to the textbox field using next ad backward

I have list of array elements like {5000,10000,25000,50000,100000}
i want those elements should assign to the text field with buttons on click.Like as show in the image
the units value should change according to the click events.
Here is the sample code
<html>
<head>
<style>
td { width:33%; }
</style>
<script>
var counter = 0;
function upDate(){
counter++;
if (counter > 7){
counter = 0;
}
var description = new Array(7)
description[0] = "5000";
description[1] = "10000";
description[2] = "25000";
description[3] = "50000";
description[4] = "100000";
description[5] = "250000";
description[6] = "500000";
description[7] = "Unlimited";
document.myForm.units.value = description[counter];
}
var lenght = 0;
function upDateLength(){
lenght++;
if (lenght > 2){
lenght = 0;
}
var description = new Array(3)
description[0] = "30sec";
description[1] = "60sec";
description[2] = "unlimited";
document.myForm.length.value = description[lenght];
}
var utype = 0;
function upDateType(){
utype++;
if (utype > 2){
utype = 0;
}
var description = new Array(3)
description[0] = "Feature";
description[1] = "Background";
description[2] = "Theme";
document.myForm.utype.value = description[utype];
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
<table width="75%" align="center" border="1">
<tr>
<td colspan="3" align="center"><h2>License Requests</h2></td>
</tr>
<tr>
<td><input type="radio" name="type" value="vocal"><span>Vocal</span></td>
<td><input type="radio" name="type" value="inst"><span>Instrumental</span></td>
<td> </td>
</tr>
<tr>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDate()"> Units</td></tr>
<tr><td><input type="text" name="units" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateLength()"> Length</td></tr>
<tr><td><input type="text" name="length" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateType()"> User Type</td></tr>
<tr><td><input type="text" name="utype" value="" ></td></tr></table>
</td>
</tr>
</table>
</form>
</body>
<html>

Find textbox value and attribute if wrapped in span

I have a listview that contains a dropdown, 3 textboxes, 1 textbox wrapped in a span to toggle visiblility and 2 buttons.
I'm having trouble accessing the value and a value of an attribute of the textbox wrapped in the span. It probably has to do with how I'm trying to access it. Any help is appreciated.
Here is the listview:
<asp:ListView runat="server" ID="ListView1">
<LayoutTemplate>
<table id="tablesorter" style="border: solid 1px black; width: 55%;">
<thead>
<tr>
<th>
Country
</th>
<th>
Info.
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<tfoot>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<select id="Existing" data="<%# Eval("Type").ToString()%>"
class="Existing" style="width: 90px">
<option value="0">USA</option>
<option value="1">CAN</option>
<option value="2">MEX</option>
</td>
<td>
<input size="4" data="" type="text" id="city" value="<%# Eval("City")%>" />
<input size="4" data="" type="text" id="state" value="<%# Eval("State")%>" />
<input size="4" data="" type="text" id="Phone" value="<%# Eval("PhoneNbr")%>" />
<span class="ZipBox" id="ZipBox" style="visibility: hidden">
<input maxlength="5" data="" class="zip" size="5" type="text" id="zip" value="<%# Eval("ZIP")%>" />
</span>
</td>
<td>
<2 buttons here>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Here is my Javascript where I'm accessing the values of all the textboxes and such on button click...
$(.updatebuttonclick)
.click(function() {
var parent = $(this).parent().prev();
var tr = $(this).closest('tr');
var TypeNode = tr.find("select.Existing").first();
var cityNode = parent.children(".city").first();
var stateNode = parent.children(".state").first();
var phoneNode = parent.children(".phone").first();
var zipNode = parent.children(".zip").first();
var newcity = cityNode.val();
var originalcity = cityNode.attr('data');
var newstate = stateNode.val();
var originalstate = stateNode.attr('data');
var newphone = phoneNode.val();
var originalphone = phoneNode.attr('data');
//check for business type for extension
if (newcity == "2") {
var newzip = zipNode.val();
var originalzip = zipNode.attr('data');
}
});

Is it as easy as setting IDs to the text boxes and accessing them via:
document.getElementById('yourtextboxid').value
or
document.yourformname.yourtextboxname.value
or
$('#yourtextboxid').val()

Just access the zipNode by ID:
var zipNode = parent.find("#zip");

You can use find function to find element deeply in the DOM
var zipNode = parent.find(".zip");

JavaScript checking & adding text to a table dynamically on submit button click

Basically my HTML looks like this:
<form method="post" name="htmlform" onsubmit = "checkFields()">
<table style="width: 479px;" border="30" cellspacing="3" cellpadding="10">
<tbody>
<tr>
<td valign="top"><span id="firstNameSpan" >First Name *</span></td>
<td valign="top"><input type="text" name="first_name" id="first_name"
size="30" maxlength="50" /></td>
</tr>
<tr>
<td valign="top"><span id = "lastNameSpan" >Last Name *</span></td>
<td valign="top"><input type="text" name="last_name" size="30" maxlength="50"/>
/td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="radio" name="sex"
value="male" /> Male <input type="radio" name="sex"
value="female" /> Female</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="submit" value="submit"
/></td>
</tr>
</tbody>
</table>
</form>
When the form is submitted, the onsubmit() event checks if first_name textfield is blank, if it is then the label or span to its left is appended to output "first name*" + " you must enter a first name" and similarly for last name and sex.
The problem is that the text in the table does not update with appendchild. When I enclosed the statement in an alert for debugging the message is appended then disappears.
The JavaScript code is below for the onsubmit = "checkFields()".
function checkFields() {
var firstName = document.getElementById("first_name").value;
var lastName = document.getElementById("last_name").value;
if (firstName == "") {
//<span style='color:red'> Please enter a first name </span>
var nameHint = " Please enter a first name";
var node = document.getElementById("firstNameSpan");
//alert(node.appendChild(document.createTextNode(nameHint)) );
//not working
node.appendChild(document.createTextNode(nameHint));
} if (lastName == "") {
//additional code
}
}
Thanks in advance, your help is much appreciated. Also are there any JavaScript debuggers?
Regards
David D

I believe your sample code is not working due to incorrect html. document.getElementById("last_name") will return undefined.
http://jsfiddle.net/5E6my/1/

Thanks all, Im getting the ropes of JFiddle the split screen is very useful although the error messages are not useful for debugging. Here is the completed code (1) HTML (2) JavaScript.
<form method="post" name="htmlform" onsubmit="return checkFields();">
<table style="width: 479px;" border="30" cellspacing="3" cellpadding="10">
<tbody>
<tr>
<td valign="top"><span id="firstNameSpan" >First Name *</span></td>
<td valign="top"><input type="text" name="first_name" id="first_name"
size="30" maxlength="50" /></td>
</tr>
<tr>
<td valign="top"><span id = "lastNameSpan" >Last Name *</span></td>
<td valign="top"><input type="text" name="last_name" id="last_name" size="30"
maxlength="50" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2" id = "sexMessage">
Please select Male or Female*</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="radio"
name="sex" value="male" /> Male <input type="radio" name="sex"
value="female" /> Female</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="submit" value="submit"
/></td>
</tr>
</tbody>
</table>
</form>
The JavaScript code to react to the onsubmit button's unfilled fields in the form are: (any ways to make this code simpler??)
window.checkFields = function()
{
var firstName = document.getElementById("first_name");
var lastName = document.getElementById("last_name");
if(firstName.value == "")
{
//<span style='color:red'> Please enter a first name </span>
var nameHint = " *Please enter a first name ";
var fnNode = document.getElementById("firstNameSpan");
while(fnNode.firstChild)
{
fnNode.removeChild(fnNode.firstChild)
}
fnNode.appendChild(document.createTextNode(nameHint));
fnNode.style.color="red";
} else{
var nameHint = " First Name *";
var fnNode = document.getElementById("firstNameSpan");
while(fnNode.firstChild)
{
fnNode.removeChild(fnNode.firstChild)
}
fnNode.appendChild(document.createTextNode(nameHint));
fnNode.style.color="black";
}
if (lastName.value == "")
{
//additional code
var nameHint = " *Please enter a last name";
var lnNode = document.getElementById("lastNameSpan");
while(lnNode.firstChild)
{
lnNode.removeChild(lnNode.firstChild)
}
lnNode.appendChild(document.createTextNode(nameHint));
lnNode.style.color="red";
} else{
var nameHint = " Last Name *";
var lnNode = document.getElementById("lastNameSpan");
while(lnNode.firstChild)
{
lnNode.removeChild(lnNode.firstChild)
}
lnNode.appendChild(document.createTextNode(nameHint));
lnNode.style.color="black";
}
var radios = document.getElementsByName("sex");
var radioValue = ""
for(var i=0; i<radios.length; i++)
{
if(radios[i].checked)
{
radioValue = radios[i].value;
}
}
if(radioValue === "")
{
var sexNode = document.getElementById("sexMessage");
var nameHint = "*You did not choose a sex";
while(sexNode.firstChild)
{
sexNode.removeChild(sexNode.firstChild);
}
sexNode.appendChild(document.createTextNode(nameHint));
sexNode.style.color="red";
} else {
var sexNode = document.getElementById("sexMessage");
var nameHint = "Please select Male or Female*";
while(sexNode.firstChild)
{
sexNode.removeChild(sexNode.firstChild);
}
sexNode.appendChild(document.createTextNode(nameHint));
sexNode.style.color="black";
}
return false;
}
The trick is to use as Yury suggested was the onsubmit="return checkfields()" and then in the code block to use window.checkFields = function() { etc.
One question that I have... is JQuery a lot simpler to use, im learning JavaScript before JQuery... should I skip to JQUery instead. Also does JQuery support the AJAX framework?
Much appreciated
David