Very Basic: POST form data through basic Submit button

alsak0de
Visitor
3 0 0

Hello there! Newbie here with a very basic question on forms, Polaris and HTML.

Whenever I add a basic polaris-based HTML form, The Submit button will post an empty message to the backend.

I am trying to get , in the post, the content of the filled fields but

 

Example, based on Shopify demo:

(https://polaris.shopify.com/components/forms/form#navigation)

 

 
<div class="Polaris-Page">

<div class="Polaris-Page__Content">
<div class="Polaris-Layout">
<div class="Polaris-Layout__AnnotatedSection">
<div class="Polaris-Layout__AnnotationWrapper">
<div class="Polaris-Layout__Annotation">
<div class="Polaris-TextContainer">
<h2 class="Polaris-Heading">Hookin App Main Page</h2>
<p> </p>
</div>
</div>
<div class="Polaris-Layout__AnnotationContent">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-SettingAction">
<div>
<form method="post" novalidate="">
<div class="Polaris-FormLayout">
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label
id="PolarisTextField4Label"
for="PolarisTextField4"
class="Polaris-Label__Text">App URL</label>
</div>
</div>
<div class="Polaris-Connected">
<div
class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField"><input
id="PolarisTextField4"
autocomplete="off"
class="Polaris-TextField__Input"
type="url"
aria-labelledby="PolarisTextField4Label"
aria-invalid="false" value="">
<div class="Polaris-TextField__Backdrop">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-FormLayout__Item"><button
class="Polaris-Button" type="submit"><span
class="Polaris-Button__Content"><span
class="Polaris-Button__Text">Submit</span></span></button>
</div>
</div><span class="Polaris-VisuallyHidden"><button type="submit"
aria-hidden="true" tabindex="-1">Submit</button></span>
</form>
<div id="PolarisPortalsContainer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</body>

</html>


</div>
</div>
<div class="Polaris-Layout__AnnotationContent">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-SettingAction">
<div>
<form method="post" novalidate="">
<div class="Polaris-FormLayout">
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" class="Polaris-Label__Text">App URL</label></div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField"><input id="PolarisTextField4" autocomplete="off" class="Polaris-TextField__Input" type="url" aria-labelledby="PolarisTextField4Label" aria-invalid="false" value="">
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-FormLayout__Item"><button class="Polaris-Button" type="submit"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Submit</span></span></button></div>
</div><span class="Polaris-VisuallyHidden"><button type="submit" aria-hidden="true" tabindex="-1">Submit</button></span>
</form>
<div id="PolarisPortalsContainer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

 

Reply 1 (1)

alsak0de
Visitor
3 0 0

btw, additional context. I've managed to, by changing the button location across the different sub-elements within the form section, receive one (and only one) of the field values on the post response.

My original page/form has more fields than this example and yet, I could not make this example work

 

thanks in advance,