Combine a Table + Form

HTML & CSS
#8

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.

#9

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.

1 Like
#10

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…

#11

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

#12

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!!

#13

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.

#14

@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!

#15

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.

#16

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,

#17

@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?

#18

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

1 Like
#19

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

1 Like
#20

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!

#21

@SaranacLake here is the code used if you need to see what I did:

<?php
session_start();

if(isset($_SESSION['plan'])) {
    echo '<p>Current Stored Session Data</p><p>';
    print_r($_SESSION['plan']);
    echo '</p>';
}

$products = [
	'Plan A' => [
		'name' => 'Basic Plan',
		'cost' => 10,
		],
	'Plan B' => [
		'name' => 'Standard Plan',
		'cost' => 20,
		],
	'Plan C' => [
		'name' => 'Basic Plan',
		'cost' => 50,
		],
	];
 
if($_SERVER['REQUEST_METHOD'] == 'POST')
{

        $_SESSION['plan'] = $_POST['plan'];
    
         echo "You chose,\n Our {$products[$_POST['plan']]['name']} and that costs \${$products[$_POST['plan']]['cost']}";
    if(isset($_SESSION['plan'])) {
        echo '<p>After the last request Session Data</p><p>';
        print_r($_SESSION['plan']);
        echo '</p>';
    }
}
?>

<!doctype html>
<html>
    <head></head>
    <body>
        <form method='post'>
            <table>                
                <tr>
                    <td></td>
                    <td><input type='submit' name='plan' value='Plan A'></td>
                    <td><input type='submit' name='plan' value='Plan B'></td>
                    <td><input type='submit' name='plan' value='Plan C'></td>
                </tr>
                <tr>
                    <td>Free stuff</td>
                    <td>X</td>
                    <td>Y</td>
                    <td>Y</td>
                </tr>
                <tr>
                    <td>Account Access</td>
                    <td>Y</td>
                    <td>Y</td>
                    <td>Y</td>
                </tr>
                <tr>
                    <td>Cost</td>
                    <td>$10</td>
                    <td>$20</td>
                    <td>$50</td>
                </tr>                
            </table>
        </form>        
    </body>
</html>
1 Like
#22

I am looking at the HTML now.

Thanks for the PHP code as well.

I know all of this seems very basic to someone like you, but when you haven’t done this in several years it seems hunormous!

I look forward to when I get my site up and then I can go back and study up on PHP, HTML, CSS from scrtahc. (And maybe even finally learn Javascript?!)

Thanks again!! :+1:

#23

@astonecipher,

How do I get your example to work if all of my buttons are called “Select”?

For example…

<td><input type='submit' name='silver' value='Select'></td>
<td><input type='submit' name='gold' value='Select'></td>
<td><input type='submit' name='platinum' value='Select'></td>
#24

Use an image for the button.

#25

Is that my only option?

Can I use a hidden value?

#26

How would you set the hidden value? If you do a separate submit button altogether, you could use radio buttons and make them look like a normal button.

#27

You can submit a hidden value with a traditional form. But since I have 3 submit buttons, I don’t see how to map a hidden value to the button selected.

I actually started a new thread related to this…

https://www.phphelp.com/t/relay-price-to-checkout-page/28356

Sponsor our Newsletter | Privacy Policy | Terms of Service