FormIt and the HTML5 button Tag

708 Posts

Eko Reply #1, 12 years, 3 months ago

The FormIt submit button I'm using looks like this,

<button name="contactSubmit">Submit</button>

The problem is it doesn't submit.

However, if I add a "value" attribute it works fine,

<button name="contactSubmit" value="Submit">Submit</button>

In other non-FormIt projects I've used,

<button>Submit</button>

without issue, and as I understand it the "value" attribute is not required (or even valid?) with <button>.

So, does FormIt rely on that attribute to do its thing? Is it better to stick with the old <input type="submit" />?

Todd

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years, 3 months ago

A simple button works fine for me...

<button type="submit">Submit</button>

This won't actually send any mail, but otherwise it works fine, and does send the mail if a mail server is available.
http://kred.sottwell.modxcloud.com/contact.html

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

708 Posts

Eko Reply #3, 12 years, 3 months ago

Thanks Susan, I did try that, but oddly the form still won't submit unless the 'value' attribute is there.

Todd

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 12 years, 3 months ago

Here is my contact page...works for both Revo 2.2.14 and 2.3, FormIt 2.2.0

[[!FormIt?
   &hooks=`spam,email`
   &emailTpl=`formMailTpl`
   &emailSubject=`Website Contact`
   &emailTo=`[email protected]`
   &emailFrom=`[[++emailsender]]`
   &emailFromName=`[[++site_name]]`
   &emailReplyTo=`[[+email]]`
   &emailReplyToName=`[[+name]]`
   &successMessage=`Your message has been sent.`
   &validate=`name:required,
      email:email:required,
      text:required:stripTags`
]]

<div id="contact_left" class="col_6">
[[!+fi.error_message:notempty=`<div class="col_6"><p class="notice error">[[!+fi.error_message]]</p></div><hr>`]]
[[!+fi.successMessage:notempty=`<div class="col_6"><p class="notice success">[[!+fi.successMessage]]</p></div><hr>`]]

<form action="[[~[[*id]]]]" method="post" class="form vertical">
        <label [[+fi.error.name:isnot=``:then=`class="error"`]] for="name">Name: [[!+fi.error.name]]</label>
        <input [[+fi.error.name:isnot=``:then=`class="error"`]] type="text" name="name" id="name" value="[[!+fi.name]]">
 
        <label [[+fi.error.email:isnot=``:then=`class="error"`]] for="email">Email:[[!+fi.error.email]]</label>
        <input [[+fi.error.email:isnot=``:then=`class="error"`]] type="text" name="email" id="email" value="[[!+fi.email]]">
 
        <label [[+fi.error.text:isnot=``:then=`class="error"`]] for="text">Message: [[!+fi.error.text]]</label>
        <textarea [[+fi.error.text:isnot=``:then=`class="error"`]] name="text" id="text" cols="55" rows="7">[[!+fi.text]]</textarea>
 
   	<button type="submit">Submit</button>
</form>
</div>

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

708 Posts

Eko Reply #5, 12 years, 3 months ago

Strange. The two forms don't appear appreciably different structurally. I'll take a closer look, though. In any case my form does work, albeit with one harmless quirk.

Thank you.

Todd

24,544 Posts

BobRay Reply #6, 12 years, 3 months ago

Here's my entire contact page: wink

[[$contactHeader]]

[[!SPForm? 
   &formProcAllowedReferers=`mydomain.com`
   &spfResponseID=`27`
   &recipientArray=`Webmaster:my@emailAddress`
]]

(I get JavaScript validation and no spam at all)

The ContactHeader chunk is just a paragraph of text.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting