Marketing Cloud Preference center using AMP Script to upsert data

Question

As we all know if we want to create a Custom Preference Center we need to use Cloud Pages HTML type page insert the HTML and AMPScript to UPSERT/update data. I have the AMP Script in place for my 3 questions, though I dont have a submit button, please share what code I need for a on click, on submit page, what am I missing here.

%%[
var @emailaddr,@mkt,@sub
set @emailaddr = AttributeValue("emailaddr")
set @mkt = AttributeValue("MarketingOptIn")
set @sub = AttributeValue("_SubscriberKey")
]%%
<div><label for="EmailAddress">EmailAddress *</label></div>
<div><input type="email" value="%%=v(@emailaddr)=%%" name="EmailAddress" data-field-type="EmailAddress" data-validation="email" required="required" data-validation-message="Please enter an email address."></div>
<div><label for="SubscriberKey">SubscriberKey *</label></div>
<div><input type="text" value="%%=v(@sub)=%%" name="SubscriberKey" data-field-type="Text" required="required" data-validation-message="Please fill out this field."></div>
<div><label for="MarketingOptIn">MarketingOptIn</label></div>
<div><input type="text" value="%%=v(@mkt)=%%" name="MarketingOptIn" data-field-type="Text"></div>

Answer 1

I will recommend following approach, using RequestParameter()

%%[ IF RequestParameter("action") == "save" THEN
SET @email = RequestParameter("EmailAddress")
SET @optin = RequestParameter("MarketingOptIn")
SET @sub = RequestParameter("SubscriberKey")
UpsertDE('Profile',1,'SubscriberKey',@sub,'email',@email,'optin',@optin)
]%%

You have now been updated

%%[ 
ELSE
var @emailaddr,@mkt,@sub
set @emailaddr = AttributeValue("emailaddr")
set @mkt = AttributeValue("MarketingOptIn")
set @sub = AttributeValue("_SubscriberKey")
]%%

<div><label for="EmailAddress">EmailAddress *</label></div>
<div><input type="email" value="%%=v(@emailaddr)=%%" name="EmailAddress" data-field-type="EmailAddress" data-validation="email" required="required" data-validation-message="Please enter an email address."></div>
<div><label for="SubscriberKey">SubscriberKey *</label></div>
<div><input type="text" value="%%=v(@sub)=%%" name="SubscriberKey" data-field-type="Text" required="required" data-validation-message="Please fill out this field."></div>
<div><label for="MarketingOptIn">MarketingOptIn</label></div>
<div><input type="text" value="%%=v(@mkt)=%%" name="MarketingOptIn" data-field-type="Text"></div>

%%[ ENDIF ]%%

You set the action to include the ?action=save parameter, so the right AmpScript snippet gets executed