Handling several operations on one page

[SaranacLake]

Hello.  I have a web page that has several operations on it, and I'm not sure the best way to design it.

This is a subscription page were a user can choose different renewal plans.

Before a certain date, the user can "renew" for a certain lower price (operation #1), or he/she can "upgrade" for a certain lower price (operation #2).

After a certain date, the user can choose from one of three plans (operation #3, #4, or #5).

The way I have things design for the "after" part is just creating a form for each one, so that when a user chooses one of them, then I can take the appropriate actions.

My question is this...

1.) Is it okay to have five forms on the one web page to more clearly delineate each request/operation?

2.) Or should I create one form, and then assign a hidden form value to each button so I know how to handle the selection?

 

 

 

 

 

Edited July 25, 2020 by SaranacLake

[maxxd]

You don't have five forms - you have two separate forms with two or three options, respectively. Before the deadline, the user can renew or upgrade (1 form, 2 options). After the deadline, the user can select from three options (1 form, 3 options). That's pretty normal, really - there's no need for a hidden field as you should know prior to outputting the form whether the it's before or after the deadline for that particular user. The only thing you have to concern yourself with is the user's selection from the options available to the form presented to that user.

[SaranacLake]

15 minutes ago, maxxd said:

You don't have five forms - you have two separate forms with two or three options, respectively. Before the deadline, the user can renew or upgrade (1 form, 2 options). After the deadline, the user can select from three options (1 form, 3 options). That's pretty normal, really - there's no need for a hidden field as you should know prior to outputting the form whether the it's before or after the deadline for that particular user. The only thing you have to concern yourself with is the user's selection from the options available to the form presented to that user.

For the second section, 2 of the buttons read "Checkout" so at the very lest I need hidden fields.

For the first section since the labels are different, I guess I could have two buttons in one form.

What are the pros/cons of having multiple forms versus one form and multiple buttons with multiple hidden values?

 

[maxxd]

1 minute ago, SaranacLake said:

For the second section, 2 of the buttons read "Checkout" so at the very lest I need hidden fields.

Sorry, yes - of course you need a to know which option the user has chosen. So if you're doing it with a button per option then perhaps hidden fields on separate forms on the same page could be the best way to go. If you've got a drop-down, one form without a hidden field is fine. Totally up to you - the user shouldn't be able to tell, and there's no hit to page load or usability either way.

The one thing I would recommend is you don't name several different buttons different things in the same form - as far as I know there are still some browsers in use that don't pass the name attribute of a button.

[SaranacLake]

4 minutes ago, maxxd said:

Sorry, yes - of course you need a to know which option the user has chosen. So if you're doing it with a button per option then perhaps hidden fields on separate forms on the same page could be the best way to go.

Well, if I use hidden values for each button, then in theory I could have 5 buttons in one form, right?

When I mocked up a similar page earlier this summer, for simplicity, I just created 3 forms since I had "Checkout", "Checkout" and "Choose Free Gift" buttons with the last one going a completely different route, and the first two representing different products and prices.

That is why I was orginally think of just adding two more forms for the "before" section which will have "Renew" and "Upgrade" buttons.

 

4 minutes ago, maxxd said:

The one thing I would recommend is you don't name several different buttons different things in the same form - as far as I know there are still some browsers in use that don't pass the name attribute of a button.

So in that case I'd need to use hidden values, right?

Which leads me back to my earlier question...

Scenario #1:  I have one form, and 5 buttons each with a hidden field so my script knows what action to take.

Scenario #2: I have 5 forms, each with a single submit type button, and then it's a no brainer for my script to now what path to take.

 

Are those choices "six of one, a half-a-dozen of another" or is one way better?

 

 

[maxxd]

I guess I'm getting hung up on why the first two options you describe show up on the same page as the last three. You say the first two are available to users before a certain date, the last three are available to the same user after the certain date. So why do you ever have all five choices on the same page? All that being said, I'm not privy to the business logic and that will dictate how you handle the situation. I'm assuming in my comments that you're handling all the possibilities in the same form processing script, but that's not necessarily true - this means you can set it up in a way very different than the one I'm thinking of and describing.

The big takeaway is there's really not a difference. Your user will more than likely not be able to tell if there's one form on a page or a million. It really comes down to how you process the submitted data and how willing you are to have similar or related code in different places.

[SaranacLake]

23 minutes ago, maxxd said:

I guess I'm getting hung up on why the first two options you describe show up on the same page as the last three. You say the first two are available to users before a certain date, the last three are available to the same user after the certain date. So why do you ever have all five choices on the same page?

To show the user the "before" and "after" scenarios, and encourage them to renew/upgrade early.

If you didn't see that the prices were going up, why would you renew - let alone renew early?

 

Quote

All that being said, I'm not privy to the business logic and that will dictate how you handle the situation. I'm assuming in my comments that you're handling all the possibilities in the same form processing script, but that's not necessarily true - this means you can set it up in a way very different than the one I'm thinking of and describing.

Yes, I display forms and process forms all in the same script.

 

Quote

The big takeaway is there's really not a difference. Your user will more than likely not be able to tell if there's one form on a page or a million. It really comes down to how you process the submitted data and how willing you are to have similar or related code in different places.

Okay, so there are no real downsides from a PHP standpoint...  (Personally I like things compartmentalized when it makes sense.)

 

If I go with fewer forms, could you please refresh my memory how you use a hidden field to denote which button (e.g. "Checkout" #1 or "Checkout" #2) was chosen?

What is the HTML or PHP I'd need?

And are there any special security considerations that I need to factor in using that approach?

Thanks!

 

Edited July 26, 2020 by SaranacLake

[SaranacLake]

@maxxd,

Wanted to make a correction...

I sketched out this web page on paper a couple of months ago, and have been busy today coding the UI part.  (As such, I'm a little rusty on the logic behind it.)

Upon reflection, I guess the "before" and "after" sections should logically be binary...

If you land on the page before your due date, I'll still show both sections, but the "after" section's buttons (and thus forms) will be greyed out since they don't yet apply.

If you land on the page after your due date, I'll still show both sections, but the "before" section's buttons (and thus forms) will be greyed out since you missed your chance!

Earlier I should have said that I need to show both sections to get people to see the benefits of renewing/upgrading early.

My bad!

[maxxd]

OK - that clears up my confusion. Maybe it's my cynical nature, but I couldn't see someone not choosing the "upgrade at a discount" option after their account had expired.

Given that, if you're processing all of it using the same script I would recommend using separate forms on the same page, each with a single hidden field to denote which form the user is filling in (which option they've chosen). Just remember to make sure on the back end that the user is eligible for the choice they've submitted.

[maxxd]

Caveat - unless you're using ajax in a SPA. In which case, use one form and give the buttons differentiating data-plan attributes and use that to decide what to do with it. But it's late and my brain is being a bit overactive, so I'm probably muddying the waters by saying that.

[SaranacLake]

7 minutes ago, maxxd said:

OK - that clears up my confusion. Maybe it's my cynical nature, but I couldn't see someone not choosing the "upgrade at a discount" option after their account had expired.

Yep.

 

Quote

Given that, if you're processing all of it using the same script I would recommend using separate forms on the same page, each with a single hidden field to denote which form the user is filling in (which option they've chosen). Just remember to make sure on the back end that the user is eligible for the choice they've submitted.

So I would just use something like...

	<input id="upgradeNow???" name="upgradeNow" type="hidden" value="whatGoesHere???">
	

 

I don't know Javascript or AJAX, so I'll have to let my PHP script behind the web page do all of the processing.

 

Just out of curiosity, if you are suggesting using hidden form values, then why the need for 5 forms?  (I don't mind, but just curious.)

 

Edited July 26, 2020 by SaranacLake

[StevenOliver]

Having more than one form on a page is a nightmare for me. If I could do all my websites over again, I would have ONE form, name it "form1" and be done with it. It might seem fine and dandy to have 2, 3 or 5 forms.... but wait 'till you go on vacation and come back, and then you cannot remember/figure out what form does what, what the forms are named, etc., where one form ends and another begins, etc.

Right now, your website has x number of lines of code. After a few years, you will have 1000's of lines of code. Having one form instead of several would seem like the best thing to do.

 

Edited July 26, 2020 by StevenOliver

[SaranacLake]

@StevenOliver,

Can you please help me figure out the proper way to use hidden input values?  (If I can feel comfortable with that, then using one form is less of an issue.)

Any comments on the snippet I posted earlier?

[maxxd]

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
	print("<p>{$_POST['which_choice_did_i_make']}</p>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Testing</title>
</head>
<body>

	<form method="post" name="firstForm">
		<button id="whatever" name="click1">Click Me!</button>
		<input type="hidden" name="which_choice_did_i_make" value="firstForm">
	</form>
	
	<form method="post" name="secondForm">
		<button id="whatever2" name="click2">Click Me, Too!</button>
		<input type="hidden" name="which_choice_did_i_make" value="secondForm">
	</form>

</body>
</html>

See what happens when you click the buttons.

[StevenOliver]

I have rather simple PHP pages. Here is the stuff that's on my pages:
 

echo '<form name="myform" method="post">';
echo 'Some text here, blah blah';
echo '<input type="submit" name="buttonOne">';
echo 'more stuff here';
echo '<input type="submit" name="buttonTwo">';
echo '</form>';

in my PHP processing on top of the page:
if(isset($_POST["buttonTwo"])) {
// do what buttonTwo is supposed to do
// for example, go to different page:
header('Location: http://www.example.com/'); exit;
}

if(isset($_POST["buttonOne"])) {
// do the stuff that buttonOne is supposed to do
}

As long as each button has a different name="somethingDifferent" then your PHP processing page (wherever you submit your form to) will do whatever you want.

Note that ALL "hidden inputs" in a form get submitted <input type="hidden" name="unique_name" value="likes_boats"> each time a button is clicked.... but your PHP processing page can decide what info it is going to use.

 

[SaranacLake]

@maxxd,

Thanks for the sample.

I modified your code, but when I click on the 3rd and 4th buttons, the results are off...

 

	<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    print("<p>{$_POST['which_choice_did_i_make']}</p>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>
<body>
	    <form method="post" name="firstForm">
        <button id="whatever" name="click1">Click Me!</button>
    <input type="hidden" name="which_choice_did_i_make" value="Form1_Input1"><br><br>
    </form>
  
    <form method="post" name="secondForm">
        <button id="whatever2" name="click2">Click Me, Too!</button>
    <input type="hidden" name="which_choice_did_i_make" value="Form2_Input1"><br><br>
    </form>
  
    <form method="post" name="thirdForm">
        <button id="whatever3" name="click3">Click Me, Three!</button>
    <input type="hidden" name="which_choice_did_i_make" value="Form3_Input1"><br><br>
    
        <button id="whatever4" name="click4">Click Me, Four!</button>
        <input type="hidden" name="which_choice_did_i_make" value="Form4_Input2">
    </form>
	</body>
</html>
	 
	 
	

 

So why aren't things working properly?

 

 

Edited July 26, 2020 by SaranacLake

[StevenOliver]

I'll assume your pages are a bit more complex. However, it sounds like your page would go something like this, in pseudocode:

<form name="my_only_form" method="post" action="php_processing_page.php">

:: Advanced Users, Click Here ::
<input type="submit" name="advanced" value="Click Me if Your Advanced">

:: Beginners Click Here ::
<input type="submit" name="beginner" value="Click Here Learn More">

:: Show Video ::
<input type="submit" name="movies" value="Click For Movies">

Then, on your php_processing_page.php, your code will decide what you want your visitors to see or do. For example:
<?php
if(isset($_POST["movies"])) {
echo 'Here is your movie:';
echo '<video width="320" height="260" controls>
  <source src="movie.mp4" type="video/mp4">
</video>';
}

You can do a mockup, then go through and fortify everything, sanitize, make sure referrer is your own page, etc.

 

[SaranacLake]

8 minutes ago, StevenOliver said:

As long as each button has a different name="somethingDifferent" then your PHP processing page (wherever you submit your form to) will do whatever you want.

But that is part of the problem, at least two of my buttons have the same value but should do different things, thus the reason for needing either separate forms OR hdden values that are of course unique.

 

8 minutes ago, StevenOliver said:

Note that ALL "hidden inputs" in a form get submitted <input type="hidden" name="unique_name" value="likes_boats"> each time a button is clicked.... but your PHP processing page can decide what info it is going to use.

Maybe that is part of the code I modified above?

 

[StevenOliver]

3 minutes ago, SaranacLake said:

3rd and 4th buttons, the results are off...

LOL a perfect example of why more than one form is a pain. Seeing just 10 lines of code with 3 forms already giving me a headache :-)

[StevenOliver]

1 minute ago, SaranacLake said:

two of my buttons have the same value

no no no..... all the values can be the same (they can all say value="Click Me").... it's the NAME which is what PHP looks for! And those are hidden from view from the browser. (Anyone can see it in browser source though, no biggy).

The web visitor just sees a button with "click me" on it. But your php code will see what you named each button. Visitors will see what you put for the "value"

<input type="submit" name="movies" value="click me">
<input type="submit" name="advanced_users" value="click me">
<input type="submit" name="button_two" value="click me">

[StevenOliver]

Take for example, a company might have a "contact" page. It has a <textarea></textarea> input window with a button under it. The button will usually say something generic like "Submit" or "Send"
<form name="myonlyform" method="post" action="thank_you_page.php">
<textarea>Type Message Here</textarea>
<input type="submit" name="message_from_customer" value="Send">

They might have a button an inch below it for urgent messages:
Have an urgent message? Click here:
<input type="submit" name="urgent" value="Send Urgent Message">

Then, your "thank_you_page.php" page will be a big "Thank you for contacting us page, that might look like this:
<?php
echo 'Thank you for contacting us."
if(isset($_POST["urgent"])) {
echo 'We are giving this our immediate attention, please stand by!';
}
if(isset($_POST["message_from_customer"])){
echo 'Thank you for your message. We will get back to you in several months.';
}
echo 'Have a nice day.';
?>

[SaranacLake]

I am soooo rusty on coding HTML and PHP...  😞

13 minutes ago, StevenOliver said:

no no no..... all the values can be the same (they can all say value="Click Me").... it's the NAME which is what PHP looks for! And those are hidden from view from the browser. (Anyone can see it in browser source though, no biggy).

Well, to be more precise, I believe that NAME is life a variable name in the $_POST array, and VALUE is the value you put into that variable.

So if you have 4 INPUTs and they each had a different NAME but with them all having the same VALUEs, then as long as you didn't need to compare values, I guess that works.

 

13 minutes ago, StevenOliver said:

The web visitor just sees a button with "click me" on it. But your php code will see what you named each button. Visitors will see what you put for the "value"

<input type="submit" name="movies" value="click me">
<input type="submit" name="advanced_users" value="click me">
<input type="submit" name="button_two" value="click me">

 

True, but if NAME=MEMBERSHIP_TYPE then your approach wouldn't work if the VALUES={Silver,Gold,Platinum}

 

But what @maxxd  did was slightly different, and I'm not sure why his modified code didn't work.  (It seems that "Click Me, Tree!" never gets seen...

 

[SaranacLake]

@StevenOliver

I appreciate your suggestion, but to be honest, I'm not sure that is the best way to do things.

I believe NAME should be treated like a variable and VALUE as the value assigned to NAME.

You are in essence putting values into NAME instead of variable names into NAME.

 

In addition, I am looking at my particular case, and starting to think this is a lot more involved than I originally thought...  😞

 

[SaranacLake]

I'm looking at the code I added onto @maxxd 's code, and I think the problem is that I have 2 hidden INPUTs, but apparently they don't get "paired" with their respective BUTTON, and so the code is always grabbing the *last* hidden INPUT which is not what I was trying to do!

 

*********************************************************

Stepping back for a moment...

Today I was just trying to get my head back into using Form submit buttons more like command buttons, so I could figure out how many forms I might need, and then use that information to finish designing this web page.

But I think what I am trying to do behind the scenes on this web page is actually fairly complex.  And I am starting to think that I have come fair enough along on mocking up my new web pages, and I should just dive into writing all of the PHP logic behind them?!

There is no sense wasting time on a page like this - whether it be the HTML/CSS or the PHP when I am losing site of the larger busines problem that I am trying to solve, if you follow.

I just know that I feel even more rusty with my HTML/CSS, so I thought I'd mockup all of the pages in this last module, and then code the backend stuff, but I think I've come far enough along and at this point it would be easier to just follow my use-cases and code along various business flows if that makes sense?

 

 

[Barand]

If it helps, note that that a <button> element can have a value attribute independent of its label

<?php
    $option = $_GET['option'] ?? '';
    if ($option) echo "You chose $option<hr>";
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>
    <form>
        Select an option
        <button name="option" value="1">Choose me</button>
        <button name="option" value="2">Choose me</button>
        <button name="option" value="3">No, Choose me</button>
        <button name="option" value="4">No, Choose me</button>
        <button name="option" value="5">No, Choose me</button>
    </form>
</body>
</html>