post table data into form

Question

Corbula 0 Newbie Poster

14 Years Ago

I have a lot of tables and to get it to post some of the data into a form.

So say i have a location and a start date and end date, and when i select a radio and click submit the location and dates get put into the corresponding field in the form.

However i have a lot of tables and a lot of different options but want it to go to only one form.

this form can be on a seperate page, but was wondering if its possible to get the form to appear on the same page, underneath the table.

Thanks, any help will be appreciated.

javascript

2 Contributors
19 Replies
3K Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Corbula,

Demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body, button, input {
	font-family: verdana;
	font-size: 10px;
}
.item {
}
.item {
	float:left;
	width: 200px;
	border: 1px solid #999;
	margin-right: 6px;
}
.item td, .item th {
	border: 1px solid #999;
}
.item .select {
	text-align: center;
}
</style>

<script>
function selectItem(n) {
	var table = document.getElementById('item'+n);
	if(!table) { alert('table not found'); return; }
	var valueFields = table.getElementsByTagName('td');
	document.myForm.location.value = valueFields[0].innerHTML;
	document.myForm.start_date.value = valueFields[1].innerHTML;
	document.myForm.end_date.value = valueFields[2].innerHTML;
	
}
</script>
</head>

<body>

<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item1">
<tr>
<td class="Location">L_1</td>
<td class="Start date">SD_1</td>
<td class="End date">ED_1</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(1)">Select</button></td></tr>
</table>

<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item2" >
<tr>
<td class="Location">L_2</td>
<td class="Start date">SD_2</td>
<td class="End date">ED_2</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(2)">Select</button></td></tr>
</table>

<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item3">
<tr>
<td class="Location">L_3</td>
<td class="Start date">SD_3</td>
<td class="End date">ED_3</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(3)">Select</button></td></tr>
</table>

<hr style="clear:both">

<form name="myForm">
	<table>
	<tr><td>Location</td><td><input type="text" name="location" value=""></td></tr>
	<tr><td>Start Date</td><td><input type="text" name="start_date" value=""></td></tr>
	<tr><td>End Date</td><td><input type="text" name="end_date" value=""></td></tr>
	</table>
</form>


</body>
</html>

Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Thanks this works great but how do you get it to put the table contents into form field that is on a new page?

That depends what you mean by "new page". Sending data to a new page in the same window can be achieved differently from sending data to a page in a different window.

And also is it possible to get it to post text from the page into a form field, for example the header text of the page.

Yes, that's possible. You can copy it across with Javascript but the easier way is to build/serve your page with the title already in place in a form field. If you wish, the field can be of type="hidden" so your users will not see it.

Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

If a page needs two or more forms, then :

Forms must not be nested one inside another. Otherwise it is ambiguous as to which <form action="..."> applies when a nested submit button is clicked.
Submission applies to any one form at a time. Fields/values of any other form are not included in the resulting HTTP request.

Consequently, if you want some hidden field (containing eg. a text or numeric identifier of your choice) to be submitted with each of several forms, then it should be repeated in each of these forms.

Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

You could write the HTML as follows :

<form name="myForm">
	<input type="hidden" name="pageHeading" value="">
	<table>
	<tr><td>Location</td><td><input type="text" name="location" value=""></td></tr>
	<tr><td>Start Date</td><td><input type="text" name="start_date" value=""></td></tr>
	<tr><td>End Date</td><td><input type="text" name="end_date" value=""></td></tr>
	</table>
</form>

with an additional line in fn selectItem(), document.myForm.pageHeading.value = document.getElementsByTagName('h1')[0].innerHTML; .

However, because the page heading is static (user can't alter it), you might as well serve the page with the text already in place as follows:

<form name="myForm">
	<input type="hidden" name="pageHeading" value="This text as well">
	<table>
	<tr><td>Location</td><td><input type="text" name="location" value=""></td></tr>
	<tr><td>Start Date</td><td><input type="text" name="start_date" value=""></td></tr>
	<tr><td>End Date</td><td><input type="text" name="end_date" value=""></td></tr>
	</table>
</form>

All you need to do is arrange for your page to be composed and served that way.

Airshow

Edited 14 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Aha!! That makes sense then.

Easiest way is to give each <h1> an id suffixed with 1, 2, 3 etc. as per its corresponding <tbody> element, then handle then similarly to the other data (Location, StartDate, EndDate).

For example :

<h1 id="h_1">Heading 1</h1>

function selectItem(n) {
    .....
    var heading = document.getElementById('h_'+n);
    if(heading) { document.myForm.itemHeading.value = heading.innerHTML; }
    .....
}

where itemHeading is the name of a (hidden?) field in your form.

Airshow

Edited 14 Years Ago by Airshow because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Corbula 0 Newbie Poster · Answer 1 · 2010-04-06T18:34:58+00:00

Thanks this works great but how do you get it to put the table contents into form field that is on a new page?

Corbula 0 Newbie Poster · Answer 2 · 2010-04-06T19:50:27+00:00

And also is it possible to get it to post text from the page into a form field, for example the header text of the page.

Corbula 0 Newbie Poster · Answer 3 · 2010-04-07T01:02:22+00:00

thanks i will try this tomorrow.

I have the table opening in a greybox window and then it goes to a form which is in greybox as well, so effectively its the same window.

Corbula 0 Newbie Poster · Answer 4 · 2010-04-07T15:59:03+00:00

Yes, that's possible. You can copy it across with Javascript but the easier way is to build/serve your page with the title already in place in a form field. If you wish, the field can be of type="hidden" so your users will not see it.
Airshow

Does the text have to be in the same form or can it be a separate one?

Corbula 0 Newbie Poster · Answer 5 · 2010-04-07T21:52:25+00:00

Here's your original code to show you what i mean.

I want to put that text (in the h1 tags) into a field as well (on a new page).

Do i need to get the button to selectItem twice. Once for data from the table and another for the title? if that makes sense.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body, button, input {
	font-family: verdana;
	font-size: 10px;
}
.item {
}
.item {
	float:left;
	width: 200px;
	border: 1px solid #999;
	margin-right: 6px;
}
.item td, .item th {
	border: 1px solid #999;
}
.item .select {
	text-align: center;
}
</style>

<script>
function selectItem(n) {
	var table = document.getElementById('item'+n);
	if(!table) { alert('table not found'); return; }
	var valueFields = table.getElementsByTagName('td');
	document.myForm.location.value = valueFields[0].innerHTML;
	document.myForm.start_date.value = valueFields[1].innerHTML;
	document.myForm.end_date.value = valueFields[2].innerHTML;
	
}
</script>
</head>

<body>
<h1>This text as well</h1>
<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item1">
<tr>
<td class="Location">L_1</td>
<td class="Start date">SD_1</td>
<td class="End date">ED_1</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(1)">Select</button></td></tr>
</table>

<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item2" >
<tr>
<td class="Location">L_2</td>
<td class="Start date">SD_2</td>
<td class="End date">ED_2</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(2)">Select</button></td></tr>
</table>

<table class="item">
<tr>
<th class="Location">Location</th>
<th class="Start date">Start Date</th>
<th class="End date">End Date</th>
</tr>
<tbody id="item3">
<tr>
<td class="Location">L_3</td>
<td class="Start date">SD_3</td>
<td class="End date">ED_3</td>
</tr>
</tbody>
<tr><td class="select" colspan="3"><button onclick="selectItem(3)">Select</button></td></tr>
</table>

<hr style="clear:both">

<form name="myForm">
	<table>
	<tr><td>Location</td><td><input type="text" name="location" value=""></td></tr>
	<tr><td>Start Date</td><td><input type="text" name="start_date" value=""></td></tr>
	<tr><td>End Date</td><td><input type="text" name="end_date" value=""></td></tr>
	</table>
</form>


</body>
</html>

Corbula 0 Newbie Poster · Answer 6 · 2010-04-08T01:29:10+00:00

The header text is different in each table. That's why i need to get it to appear in the form with the other text.

Corbula 0 Newbie Poster · Answer 7 · 2010-04-08T14:59:06+00:00

Thanks.

If i want to send the data to a new page, can this only be done on a .asp page, or can it be done on a html page?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2010-04-08T17:41:46+00:00

If i want to send the data to a new page, can this only be done on a .asp page, or can it be done on a html page?

You can do either :

ASP : Read Post/Get parameters from the request and build the HTML server-side with ASP.
HTML : Read Get parameters from location.search and adapt the already-served page with Javascript.

ASP is arguably easier and certainly better documented. 99% of programmers would choose a server-side approach when available.

In support of the HTML/Javascript method, you have Airshow's excellent Javascript Query Parser. In addition you will need to do some DHTML/DOM scripting to insert values into DOM elements (divs, table cells etc. in accordance with your page design), which should be trivial. For something like this, cross-browser issues are a thing of the past.

Airshow

Corbula 0 Newbie Poster · Answer 9 · 2010-04-08T18:28:47+00:00

I've got an asp page but when i click on a button in the table on the html page, it just displays the .asp code.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2010-04-08T22:41:28+00:00

ASP pages need to be run/served from an ASP-enabled server.

If you are runing all this on a desktop computer under Windows, then your best bet is to enable something called IIS (it will be on your Windows installation disk if not already installed).

Personally, I run Apache/PHP, not IIS/ASP so I'm not in a good position to advise further though I believe MS make it pretty simple to install and configure.

Of course, the right paid-for web hosting service (possibly including your ISP) will provide ASP for you. All you have to do is use the right file extension to cause a file to be parsed by the ASP engine before being served.

Airshow

Corbula 0 Newbie Poster · Answer 11 · 2010-04-09T18:04:19+00:00

I am running it on a server, maybe its not asp enabled but it should be. I will check on monday. I'm guessing it will say in a phpinfo file?

Can you advise me on what should be in the asp page? and also do you know why when i click on the first button it put all the data into the form but all the other buttons don't put the header text in?

Let me know if i'm not making any sense.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2010-04-09T21:38:56+00:00

Corbula,

The only thing that doesn't make sense is "phpinfo", which is strictly to do with the PHP environment, not ASP.

The other questions make sense but you will get better responses to detailed ASP questions in the ASP forum.

Airshow

Corbula 0 Newbie Poster · Answer 13 · 2010-04-09T23:06:12+00:00

ok thanks.

phpinfo is a file i have on the server which tells me server information.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 14 · 2010-04-10T00:05:46+00:00

Corbula,

You may be right yet. Maybe phpinfo does include data on the status of ASP. I don't know because (a) I've never tried running a server with both and (b) I have never looked for it. Please let us know.

Airshow