Text Box Concatenation using Javascript - javascript

I'm trying to get the code to work before the 7th textbox is added and once it has been added.
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Words</title>
</head>
<body>
<script type="text/javascript">
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
}
function concatenate()
{
concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + " " + document.getElementById("tb7").value;
document.getElementById("concateForm").value = concateText;
}
</script>
<h1>Please enter text into the fields below</h1>
<table>
<tr>
<td>
<input type="text" id="tb1">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb2">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb3">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb4">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb5">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb6">
</td>
</tr>
<tr>
<td>
<div id="newBut">
</td>
</tr>
<tr>
<td>
<input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
</td>
</tr>
<tr>
<td>
<input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
</td>
</tr>
</table>
</body>
The problem that i am having is that the code only works once the 7th text box has been added by clicking the button at the bottom. I was wondering whether it is possible to get the same function to work without the extra box added into the html code.


Because you have a concrete selector of the tb7 box, this will throw an exception when attempting to get the value. This is why you need the 7th to before a result will show. You would be better off making this dynamic by using document.getElementsByClassName and enumerating through the list to perform your concatenation.
As an alternative, this could be made remarkable simple by switching to jQuery and using selectors and the .each() function.
Sample:
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7' class='concatInput'>";
}
function concatenate()
{
var elements = document.getElementsByClassName("concatInput");
var concatText = "";
for (i = 0; i < elements.length; i++)
{
concatText += elements[i].value;
}
document.getElementById("concateForm").value = concateText;
}


Give it with a condition to check whether tb7 is available. like
((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"")
Because tb7 is not there in the DOM before you press add new button
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Words</title>
</head>
<body>
<script type="text/javascript">
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
}
function concatenate()
{
concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + ((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"");
document.getElementById("concateForm").value = concateText;
}
</script>
<h1>Please enter text into the fields below</h1>
<table>
<tr>
<td>
<input type="text" id="tb1">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb2">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb3">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb4">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb5">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb6">
</td>
</tr>
<tr>
<td>
<div id="newBut">
</td>
</tr>
<tr>
<td>
<input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
</td>
</tr>
<tr>
<td>
<input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
</td>
</tr>
</table>
</body>


add class to all textboxes
example:
<input type="text" class="tb" id="tb1">
<input type="text" class="tb" id="tb2">
then
var text = "";
document.querySelectorAll('.tb').forEach(function() {
text = text + " " + $(this).val();
});
alert(text);


So the issue is the element may not be there. So check for its existence beofre referencing the value.
var inp7 = document.getElementById("tb7");
var str = inp7 ? inp7.value : "";

Related

how to remove autofocus attrib

i want to get more input field by onfoucus event
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control">
</textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"><br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>
i want onfocus attribute only on last input and want to remove onfoucs attribute from remain

Before you add the new input you can remove the onfocus attribute form all the other inputs.
The below will query for inputs with the onfocus attribute and loop through each element removing the attribute. Then I append the last input with the onfocus attribute. This ensures only the last input will be able to add another input.
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
// remove onfocus from all previous inputs (that have the onfocus attribute)
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control"></textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"> <br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>

creating new row on button click

I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result.
function addNewRowAbove() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
function addNewRowBelow() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
<td><input type="text" name="empid"></input>
</td>
<td><input type="text" name="empfname"></input>
</td>
<td><input type="text" name="emplname"></input>
</td>
</tr>
<tr>
<td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
<td><input type="text" name="empid1"></input>
</td>
<td><input type="text" name="empfname1"></input>
</td>
<td><input type="text" name="emplname1"></input>
</td>
</tr>
<tr>
<td></td>
<td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
<td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
<td></td>
</tr>
</table>
</form>

I added var selectedRow = $( "input:checked" ).parent().parent(); to both of your functions to find the parent row of the checked element, and then used either $(newRow).insertBefore(selectedRow); or $(newRow).insertAfter(selectedRow); depending on the button clicked.
Hopefully this helps.
UPDATE:
In response to comments requesting that the id's of the rows are kept in order even after adding rows dynamically, I've added a SortRowIDs() function which is called at the end of both addNewRowAbove() and addNewRowBelow().
This function grabs all of the <input type="checkbox"/> tags in the <table id="maintable"></table> and then iterates through them using jQuery's .each() method. Each checkbox's parent row is then assigned an Id based on its order in the table. I also added a few comments in the code so that it is easier to follow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function SortRowIDs() {
// The code below finds all the <tr> elements in the table WITH checkboxes in them.
// This way, we skip the first row containing column headers and the last row containing buttons
// We use the jQuery .each() method to iterate through jQuery-object arrays
$('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
// We assign the parent row of the current checkbox to the variable 'currentRow'
let currentRow = $(this).parent().parent();
// Here we give the current row an id based on its position in the table
$(currentRow).attr('id', 'id_' + (index + 1));
// Prints the id's of each row
console.log('Current row\'s id: ' + $(currentRow).attr('id'));
});
// This prints the id attribute of the selected checkbox's parent row, to show that
// the Id's were successfully assigned by the SortRowIDs() function
console.log('');
console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
}
function addNewRowAbove() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertBefore(selectedRow);
SortRowIDs();
}
function addNewRowBelow() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertAfter(selectedRow);
SortRowIDs();
}
</script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td>
<input type="checkbox" name="radio" id="radio"/>
<input type="hidden" id="rowIndex" value="1" />
</td>
<td>
<input type="text" name="empid" />
</td>
<td>
<input type="text" name="empfname" />
</td>
<td>
<input type="text" name="emplname" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="radio1" id="radio1" />
<input type="hidden" id="rowIndex" value="2" />
</td>
<td>
<input type="text" name="empid1" />
</td>
<td>
<input type="text" name="empfname1" />
</td>
<td>
<input type="text" name="emplname1" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
</td>
<td>
<input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
</td>
<td></td>
</tr>
</table>
</form>

You can use insertBefore to append new row above buttons (give id="button" to row content buttons). Try with below solution:
function addNewRowAbove(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber)- 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
newRow.insertBefore('#button');
}
function addNewRowBelow(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
$('#maintable tbody').append(newRow);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr><td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1"/></td>
<td><input type="text" name="empid"></input></td>
<td><input type="text" name="empfname"></input></td>
<td><input type="text" name="emplname"></input></td>
</tr>
<tr><td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2"/></td>
<td><input type="text" name="empid1"></input></td>
<td><input type="text" name="empfname1"></input></td>
<td><input type="text" name="emplname1"></input></td>
</tr>
<tr id="button"><td></td><td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td><td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td><td></td></tr>
</table>
</form>
</body>
</html>

HTML Radio Button

I have typed the following code in Front Page and it gives error in displaying Radio Button Values (as undefined):
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
Rest of the things are working except radio buttons. Kindly help with a solution for the same. Thank you in advance

<form>
What color do you prefer?<br>
<input type="radio" name="colors" id="red">Red<br>
<input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
document.getElementById("red").checked = true;
}
function uncheck() {
document.getElementById("red").checked = false;
}
</script>
link:-http://www.w3schools.com/jsref/prop_radio_checked.asp

All Radio Buttons has the same name. So you have to select the checked radio button by using document.querySelector('input[name=R1]:checked').value. I have even checked for unselected checkbox value as "Empty"
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>

You can do this either by jQuery or jsvascript
In jQuery use $('input[name="R1"]:checked').val(); here R1 is your checkbox name
In javascript get the dom elements by name and loop through the elements to get the selection.
I have attached a sample code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ChangeSelection() {
//Using Jquery
var selection = $('input[name="R1"]:checked').val();
console.log("jQuery Result - " + selection);
//Javascript
var radios = document.getElementsByName('R1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
//Selected Radio
selection = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
console.log("JavaScript Result - " + selection);
}
</script>
</head>
<body>
<input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font>
<input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font>
</body>
</html>

Using jQuery to find the selected value between the td and the div

The function below is used to find the reference number then compare it, then if the corresponding value is found the cell values are modified according to the input boxes. This works great, however, how do I go about modifying the existing function below to capture the value between the
<td><div>this value here</div></td>
Here is the Javascript in question:
function changeit() {
var valueToFind = $('#number').val();
$('#data > tbody> tr').each(function(index) {
console.log(index);
var firstTd = $(this).find('td:first');
if ($(firstTd).text() == valueToFind) {
console.log("found: " + index + ":" + valueToFind);
$(this).find('td:eq(1)').text($('#item').val());
$(this).find('td:eq(2)').text($('#color').val());
}
})
}
Here is the HTML Markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
</head>
<body>
Number:*
<input type="text" id="number">
<br> Items:
<input type="text" id="item">
<br> Color:
<input type="text" id="color">
<br>
<br>
<input type="button" onclick="changeit()" value="save">
<br>
<table id="data" style="width: 100%" cellspacing="1" class="style1">
<tr>
<td>
<div><b>Number*</b></div>
</td>
<td>
<div><b>items</b></div>
</td>
<td>
<div><b>Colors</b></div>
</td>
</tr>
<tbody>
<tr>
<td>
<div>
<div>123</div>
</div>
</td>
<td>
<div>Boats</div>
</td>
<td>
<div>red</div>
</td>
</tr>
<tr>
<td>
<div>456</div>
</td>
<td>
<div>Vehicles</div>
</td>
<td>
<div>blue</div>
</td>
</tr>
<tr>
<td>
<div>789</div>
</td>
<td>
<div>Motorcycles</div>
</td>
<td>
<div>green</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

change
var firstTd = $(this).find('td:first');
to
var firstTd = $(this).find('td:first div');

innerHTML firstChild.value works in IE9 IE8 but not IE10, Firefox, Chrome

The following code works in IE8,9 but not in IE10, Firefox or chrome.
The calculations are correct in IE8,9 and older versions but in IE10, FF ,chrome the calculated values in the respective columns and rows show up as NaN.
I have provided the entire code.
Any help will be greatly appreciated.
Thank you all in advance.
<html>
<head></head>
<script type="text/javascript">
function enable_text(che, inp, cost) {
if (che.checked) {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = d;
}
else {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = 0;
}
}
</script>
<body>
<form action="" method="post" name="f1" id="f1">
<table width='95%' border='1' id='tableId' name='tableId'>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>Cost</td>
<td>discount yes/ no</td>
<td>Discount amount</td>
<td>Subtotal (Cost - Discount Amount)</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td bgcolor='#F4F4F4'>N</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1819 onclick='enable_text(this,0,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1819
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_0' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td bgcolor='#F4F4F4'>S</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1821 onclick='enable_text(this,1,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1821
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_1' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align='left'>Com</td>
<td align='left'>
<input name='Registration_fee' type='text' value='200' size=6 readonly />
</td>
<td> </td>
<td>
<input name='Registration0fee' value='0' size=6 readonly />
</td>
<td align='left'>
<input name='Registration_fee' value='200' size=6 />
</td>
</tr>
<tr id='columnTotals' name='columnTotals'>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>= N +S + Com</td>
<td>
<input id='sum1' name='sum1' type='text' readonly>
</td>
<td> </td>
<td>
<input id='sum2' name='sum2' type='text' readonly>
= Discount Amount Subtotal
</td>
<td>
<input id='sum3' type='text' name='sum3' readonly>
= Total
</td>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
(function calc() {
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
})();//execute calc() immediately to cater for any initial values
for (var i = 1; i < inputs.length - 1; i++) {
inputs[i].onchange = calc;
}//attach calc as onblur handler to input fields.
};
</script>
<script>
function calc() {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
}
</script>
</html>

col_1_total += Number(cells[5].getElementsByTagName("input")[0].value);
col_2_total += Number(cells[7].getElementsByTagName("input")[0].value);
col_3_total += Number(cells[8].innerHTML = cells[5].getElementsByTagName("input")[0].value - cells[7].getElementsByTagName("input")[0].value);
firstChild is a text node (caused by whitespaces between <td> and <input>), not the input element you apparently want.
Also, your code is quite redundant and not exactly valid html - calc() is defined two times, tags on the level instead of /, a closing is missing, and so on... please consider rewriting that whole thing.

Categories

Resources