accessing html table elements in javascript - javascript

I would like to access the html input tag which is present inside a table inside a form as shown below. I have used the function below to access the element but I'm getting undefined in the output:
function checkForm()
{
var table=document.getElementById('register').getElementsByTagName('myTab');
document.writeln(table);
}
The above function returns undefined. Why, and how can it be fixed to return the input that I need?
<!DOCTYPE HTML>
<HEAD>
<META CHARSET = "utf-8">
<TITLE>Register</TITLE>
<link rel="stylesheet" type="text/css" href="reglog.css">
</HEAD>
<BODY>
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border = 0 align=center>
<tr >
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type = text required></td>
</tr>
<tr >
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type = password required></td>
</tr>
<tr >
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type = password required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type = submit value = Register> </td>
</tr>
</table>
</FORM>
</BODY>
</HTML>

Javascript's getElementsByTagName function works, as it's name says, with html tag names (div, table, form, etc). In your case would be getElementsByTagName('table'). Instead you could use getElementsByName.

To get the table element with attribute myTab from the element with id register, you can chain a querySelectorAll() method to a getElementById() :
table = document.getElementById('register').querySelectorAll('table[name=myTab]')[0];
console.log(table)
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border=0 align=center>
<tr>
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type=t ext required></td>
</tr>
<tr>
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type=p assword required></td>
</tr>
<tr>
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type=p assword required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type=s ubmit value=R egister> </td>
</tr>
</table>
</FORM>
Note that getElementsByTagName() get the elements from their name, not from their name attribute.

There are various ways to access form elements. In your code you can access form elements using
var x = document.getElementById("register").elements;
This will give you all the elements in your form. However if you want to access first element you can use something like below code
document.getElementById("register").elements[0].value // 0 is the index as per all the elements present in your form 'register'

Related

Using Javascript to set input to readonly

I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.

Unable to fetch the input values from the form in jquery

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?
All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.
Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>

How to automate filling a simple form and clicking submit in JavaScript for a chrome extension

Been trying to do this for days now, and have failed and have searched for examples but not found one yet that has helped.
I want to navigate through a web page by filling in the details and clicking submit programmatically.
the page is as follows:
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td ><input type='Text' size='30' name='email'></td>
</tr><tr>
<td>Password: </td>
<td ><input type='password' size='30' name='password'></td>
</tr><tr>
<td colspan=2> </td>
</tr><tr>
<td> </td>
<td align='left'><input type='Submit' value='Log in'></td>
</tr>
<td colspan=2> </td>
<tr><td colspan=2><hr></td></tr>
</table>
</form>
I cant change the above existing web page, So want to include code in a chrome extension written in JavaScript to save me heaps of time at the moment I cant get passed the login page!
I have been a programmer in the distant past but am not fully versed with JavaScript syntax yet..
One of my problems is the form does not seem to have an ID.
Could anyone help?
Thanks for the help so far but I am still struggling so have added more detail.
I have managed to do this submit in IE using VB in the past (from an Excel macro) using:
Sub PressSubmit(IE)
With IE.Document
Set elems = .getElementsByTagName("input")
For Each e In elems
If (e.getAttribute("value") = "Log in") Then
e.Click
Exit For
End If
Next e
IE.Document.all("email").Value = "me#email.address"
IE.Document.all("password").Value = "myPassword"
Call PressSubmit(IE)
But now I need to do the same on Chrome and I am struggling with JavaScript syntax which is new to me is there anyone that could give me a JavaScript version of this, or a better version, that I can learn from by example?
You can use document.querySelector(), Element.querySelector(), attribute selectors to set values atelements, call.click()onelement to submit`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td>
<input type='Text' size='30' name='email'>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type='password' size='30' name='password'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td> </td>
<td align='left'>
<input type='submit' value='Log in'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2>
<hr>
</td>
</tr>
</table>
</form>
<script>
var form = document.querySelector("form[action='login.php']");
var submit = form.querySelector("input[type='submit'][value='Log in']");
if (submit.length) {
form.querySelector("input[name='email']").value = "me#email.address";
form.querySelector("input[type='password']").value = "myPassword";
submit.click();
}
</script>
</body>
</html>

How to get all text from all textboxes with class txt_Answer

<table id="tb_Answers">
<tbody>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td colspan="4">
</tr>
</tbody>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td>
</tr>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
</tr>
</table>
I got 3 inputs with answers.How to get all this text/answer by class txt_Answer i tried this
$('*[class="txt_Answer"]').val()
but this returns me only the first value not all of thaem
By iterating and creating an array with $.map :
var values = $.map($('input.txt_Answer'), function(el) {return el.value;});
FIDDLE
You should also validate your HTML, as it's not valid
Try this code which is using the each method :
$('.txt_Answer').each(function() {
text = $(this).val()
alert(text)
})

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Categories