Combine a Table + Form

[SaranacLake]

Is it possible to combne an HTML table and a form?

I am working on an ecommerce module for my website, where I am offering various paid subscriptions.

When aperson clicks on “Subscribe”, I want to display a page that shows 3 different subscription options (Silver, Gold, Platinum).

The design I have in mind is like a Consumer Reports comparison where in the left margin I have a series of features, and then under each subscription type I have an “X” denoting if you get that feature with that plan.

I also compare things like price, value of extras, etc.

For version1 I’m not worried about being responsible/mobile friendly.

At any rate, it seems to me a good ol HTML table is the best way to display things, but then I need a way for the uesr to choose a given subscription plan, which is where the need for a form comes in.

I was thinking of have a “Select” button at the top and bottom of the page beneath each subscripton type.

So if you decide the “Gold” plan is best for you, you would click “Select” underneath the “Gold” heading and then my cript would capture that selection and take you to the checkout page.

So is my thinking correct? And if so, how do I do this?

Thanks!

[astonecipher]

Are you planning on hardcoding the comparison or having it be dynamic?

[SaranacLake]

No real need to have it be dynamic, so it will be hard-coded.

[johnphpnewb]

you can find lots of nice designs by searching Google for html pricing table. You can even find responsive designs.

for example:

https://codepen.io/DigimadMedia/pen/qZdMzd

here is a blog with many listings:

http://blog.dynamicdrive.com/free-comparison-and-pricing-table-templates/

[SaranacLake]

Thanks, but you are missing my question…

I know how to create an HTML Table.

I know how to create an HTML Form.

Until now, any HTML Forms that I have done had simple form controls like Text Boxes and then a Submit button.

I am unsure how to take an HTML Table and make it so it behaves like an HTML Form.

I have already mocked up a very sexy “Product Comparison Grid” in a spreadsheet, and coding that as an HTML Table should be fairly easy.

But what I am unsure of is how to make it so that when the user clicks on the “Select” button found in each Product Column, that I can capture and submit that so my PHP script can handle it.

I have something like this…

			A			B		C
			-----			-----		-----
			Select		Select	Select

Price		$20			$30		$40
Size		100pg		150pg	225pg
Color		N			Y		Y

			Select		Select	Select

If the user clicks on the “Select” button for Product “B”, then I need to capture that so my PHP script knows to go directly to the Checkout page and to use $30 in calculating the Order Total.

And if the user chooses the “Select” button for Product “C”, then I need to capture that so that my PHP script knows to instead go to the Product Catalog page to allow the user to choose a free eBook. nd then after that, go to the Checkout page and use $40 in calculating the Order Total.

Follow me?

If this was a stright up HTML Form I know what to do.

But I don’t know what to do with my HTML Table that Iw ill be creating.

Make sense?

[johnphpnewb]

yes, i follow you and yes it makes sense: you are trying to use a server-side scripting languge to accomplish a client-side task. PHP can process the form but it cannot control the form submission methods. You will have to use a client-side language such as JavaScript, JQuery or AJAX.

The values (prices) will be available to PHP on submission. isset and such to check the values.

I was a tbles only HTML coder up until two years ago. I finally sat down and learned page layout with divs, spans and css. I like the modern designs better. I no longer use tables.

[SaranacLake]

yes, i follow you and yes it makes sense: you are trying to use a server-side scripting languge to accomplish a client-side task. PHP can process the form but it cannot control the form submission methods. You will have to use a client-side language such as JavaScript, JQuery or AJAX.

The values (prices) will be available to PHP on submission. isset and such to check the values.

You still haven’t answered my questions…

I asked how to incorporate an HTML table with an HTML form…

I was a tbles only HTML coder up until two years ago. I finally sat down and learned page layout with divs, spans and css. I like the modern designs better. I no longer use tables.

There is nothing wrong with using an HTML table for tabular data - that is why they were created!!

Using divs and spans would be ridiculous for what I am doing.

[johnphpnewb]

@SaranacLake

But what I am unsure of is how to make it so that when the user clicks on the “Select” button found in each Product Column, that I can capture and submit that so my PHP script can handle it.

Select is a keyword for a type of input field in a form, so you shouldn’t use this word if you are not using a select form control. PHP cannot make a Select control a submission control. Javascript could make it submit. I suspect that you use the word Select to mean choose this subscription versus use a select control to submit the form.

Maybe i am not able to understand you correctly but it sounds to me like you DO NOT know how to build a table and a form. HTML is static language, so it is just a matter of memorization and utilization. Thus, simply build a table with form controls around the content. Very simple. However, a table is all ready defined as a table in the HTML DTD, thus one cannot make a table behave like a form. A table is a table and a form is a form.

Tables
https://www.w3.org/TR/html401/struct/tables.html

Forms
https://www.w3.org/TR/html401/interact/forms.html

"An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
"

one could use a button as submit type and style it with css to fill the td which contains it and value the button as Select.

In the 90s, i always wrapped a form inside a table and the form controls inside nested tables. I never had problems with Netscape browser, Internet Explorer or Opera browser. I’ve created a screen capture of this approach to a form layout using tables.

I feel as though you want to make a table cell (TD) a form submission control and that is as simple as styling a button to the dimensions of the cell and presenting it to look like a cell and not a button. In this case, HTML and CSS is all you need to complete the task besides the time required to code it.

If i am not helpful to you, then i will cease and desist at this point. Perhaps someone else can assist you. I interpret this post to be a misunderstanding of the dtd of html and how to utilize it. Further, divs and spans can accomplish the same thing. I don’t recommend using lists in place of divs and spans but it is also possible.

I wish for you success at this table form and for all to have a pleasant day.

[astonecipher]

I have something like this…

			A			B		C
			-----			-----		-----
			Select		Select	Select

Price		$20			$30		$40
Size		100pg		150pg	225pg
Color		N			Y		Y

			Select		Select	Select

If the user clicks on the “Select” button for Product “B”, then I need to capture that so my PHP script knows to go directly to the Checkout page and to use $30 in calculating the Order Total.

Based on the layout, it sounds like you just want a button.

So,

<form method='post'>
<!-- your table -->

</form>

And then you test which button cause the submission.

[SaranacLake]

But what I am unsure of is how to make it so that when the user clicks on the “Select” button found in each Product Column, that I can capture and submit that so my PHP script can handle it.

Select is a keyword for a type of input field in a form, so you shouldn’t use this word if you are not using a select form control. PHP cannot make a Select control a submission control. Javascript could make it submit. I suspect that you use the word Select to mean choose this subscription versus use a select control to submit the form.

There is no such thing as a “Select” control…

What are you referring to?

Are you thinking I meant “radio buttons”?

No, I just want a button labeled “Select” (or it could say “Choose me” or “Subscribe” or whatever) that when you click on it submits the web page (web form) so my PHP script can process it.

You do NOT need any Javascript for that as I am submittng the form to the SERVER…

[SaranacLake]

I feel as though you want to make a table cell (TD) a form submission control and that is as simple as styling a button to the dimensions of the cell and presenting it to look like a cell and not a button. In this case, HTML and CSS is all you need to complete the task besides the time required to code it.

I would have guess the reverse, in that I would create my HTML table, and then wrap it in one HTML form…

[SaranacLake]

I have something like this…

			A			B		C
			-----			-----		-----
			Select		Select	Select

Price		$20			$30		$40
Size		100pg		150pg	225pg
Color		N			Y		Y

			Select		Select	Select

If the user clicks on the “Select” button for Product “B”, then I need to capture that so my PHP script knows to go directly to the Checkout page and to use $30 in calculating the Order Total.

Based on the layout, it sounds like you just want a button.

So,

<form method='post'>
<!-- your table -->

</form>

And then you test which button cause the submission.

That is what I would have guessed.

So is it okay to take that approach, or am I breaking “best practices”?

(BTW, using an HTML table may be a point of contention, and IF I was going for a “responsive” design, then it probably would be, but for v1.0 using an HTML table makes the most sense, and even with mobile, HTML tables are designed to display tabular data and that is exactly what I have! Either way, I can refine the web design later, but I am more stressed out about getting this working properly. And I never thought something so simple would trip me up, but when you have been away from coding for years - and you are older - simple things feel like a big deal!!)

I think you have me on the right track now, so thanks!!

[astonecipher]

A table is used for tabular data, which a comparison chart is.
Tables can be responsive as well, look at bootstrap tables.
I tend to follow a separated front-end/ back-end philosophy. So, clicking specific cells in a table would have even binding and trigger an ajax request to an back end api for processing, but I realize that is outside of some budding developers understanding. We all start somewhere and I did some stupidly poor designs when I started, it’s part of the learning process.

[SaranacLake]

@astonecipher,

Unfortunately I don’t know Javascript. It’s on my to-do list!

My goal now is to pick up where I left off a few years ago, get my site up and to where I can try and make some $$, and then for v2.0 I can do fancier things!

Thanks for the help so far!

[SaranacLake]

I have something like this…

			A			B		C
			-----			-----		-----
			Select		Select	Select

Price		$20			$30		$40
Size		100pg		150pg	225pg
Color		N			Y		Y

			Select		Select	Select

If the user clicks on the “Select” button for Product “B”, then I need to capture that so my PHP script knows to go directly to the Checkout page and to use $30 in calculating the Order Total.

Based on the layout, it sounds like you just want a button.

So,

<form method='post'>
<!-- your table -->

</form>

And then you test which button cause the submission.

Going to look into this shortly, but while you’re still online…

• So I would create my HTML table and style it however.

• Each Product would have a “Select/Buy Now/Choose Me” button, that I guess are really “Submit” buttons, right?

• Then I would wrap it in a single HTML form as you have shown above.

• I could name each button with a unique name like “Product1”, “Product2”, and “Product3”.

• Depending on which button you choose, that will get written to the $_POST array if memory serves me correctly, right?

What I’m rusty on is this…

How can I save which plan they choose in my PHP session?

Conceptually, what I need to do is denote which plan they choose (and I think the corresponding price)?

Or do I just need to capture the plan, and then in my PHP script I can assign the price?

If I need to send the price, can you help me remember how to make it so that if they click “Select” for Plan-A then I write $30 to my PHP session, if they click “Select” for Plan-B then I write $40 to the PHP session, and if they click “Select” for Plan-C then I write $50 to the PHP session.

Hope that makes sense?

BTW, this is supposed to be a siple PHP/HTML page, with nothing fancy as I don’t expect prices to change or anything like that any time soon. Down the road I am sure there are lots of things I can do to mak ethis more robust, but for now I simply need to present the user with 3 diffeent subscription plans, let them click on what they want, and pass that value to PHP so I can then show it during checkout.

[astonecipher]

You want the prices in a database ideally, but in the backend processor is fine.

The name just needs to correspond to the item for lookup, you don’t want to store a price.

So,

Ideone.com

[SaranacLake]

@astonecipher,

I didn’t follow you response, and am not sure you understood me.

What I was asking was this…

Should I just create a form with 3 “Submit” buttons that each have a unique name and then have my PHP script look at which button was chosen and then adjust the price accordingly?

Or should I be sending over a hidden value when I submit my form?

I guess the second approach is redundant because if you know Plan-B was chosen, then you’d know the price.

Follow my question?

[astonecipher]

Yes, use three submit buttons. Then you test for which was used.

[astonecipher]

http://test.andrewstonecipher.info/test.php

[SaranacLake]

Yeah, that is the gist of what I want to do, except when you click on one of the buttons, it will take you to another page, and then that page will pull the PHP session data to help it complete the next step.

Thanks!