Forum

Thread tagged as: Problem, Addons, Forms

Form submission problem in Safari & Firefox

I have a form that has been working fine until recently and then on Friday I received an email from the client to say the form had stopped working. I’ve just updated Perch and the Forms App to the latest version and I’m still having trouble.

I’ve done some testing and it works in Chrome & Opera, but in Safari & Firefox it just returns the filled in form and doesn’t submit it?

Does anyone have any ideas?

Thanks

Nick

Here is the template:

<perch:form id="hall-booking-form" method="post" app="perch_forms">
    <perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup" size="m" />
    <div>
        <perch:label for="name">Name <span class="required">(required)</span></perch:label>
        <perch:input type="text" id="name" required="true" label="Name" />
        <perch:error for="name" type="required">Please add your name</perch:error>
    </div>
    <div>
        <perch:label for="address">Address <span class="required">(required)</span></perch:label>
        <perch:input type="textarea" id="address" required="true" label="Address" />
        <perch:error for="name" type="required">Please add your address</perch:error>
    </div>
    <div>
        <perch:label for="postcode">Post code <span class="required">(required)</span></perch:label>
        <perch:input type="text" id="postcode" required="true" label="Post code" class="postcode" />
        <perch:error for="postcode" type="required">Please add your post code</perch:error>
    </div>
    <div>
        <perch:label for="telephone">Telephone <span class="required">(required)</span></perch:label>
        <perch:input type="tel" id="telephone" required="true" label="Telephone" />
        <perch:error for="telephone" type="required">Please add your telephone number</perch:error>
    </div>
    <div>
        <perch:label for="email">Email <span class="required">(required)</span></perch:label>
        <perch:input type="text" id="email" required="true" label="Email" />
        <perch:error for="email" type="required">Please add your email address</perch:error>
    </div>
    <div>
        <perch:label for="org">Company/organisation</perch:label>
        <perch:input type="text" id="org" label="Company/organisation" />
    </div>
    <div>
        <perch:label for="date">Date of booking <span class="required">(required)</span></perch:label>
        <perch:input type="date" id="date" required="true" label="Date" format="d/m/Y" />
        <perch:error for="date" type="required">Please add the date</perch:error>
    </div>
    <div>
        <perch:label for="start">Start time <span class="required">(required)</span></perch:label>
        <perch:input type="time" id="start" required="true" label="Start time" />
        <perch:error for="start" type="required">Please add the start time</perch:error>
    </div>
    <div>
        <perch:label for="end">End time <span class="required">(required)</span></perch:label>
        <perch:input type="time" id="end" required="true" label="End time" />
        <perch:error for="end" type="required">Please add the end time</perch:error>
    </div>
    <fieldset class="radio">
        <legend>Is this a repeat booking?</legend>
        <perch:input type="radio" options="Yes|yes,No|no" name="repeat" id="repeat" />
    </fieldset>
    <fieldset id="repeat-bookings">
        <legend>Repeat bookings</legend>
        <div id="repeat-1">
            <div>
                <perch:label for="repeat-date-1">Date</perch:label>
                <perch:input type="date" id="repeat-date-1" label="Date (1st repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-1">Start time</perch:label>
                <perch:input type="time" id="repeat-start-1" label="Start time (1st repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-1">End time</perch:label>
                <perch:input type="time" id="repeat-end-1" label="End time (1st repeat)" />
            </div>
        </div>
        <div id="repeat-2">
            <div>
                <perch:label for="repeat-date-2">Date</perch:label>
                <perch:input type="date" id="repeat-date-2" label="Date (2nd repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-2">Start time</perch:label>
                <perch:input type="time" id="repeat-start-2" label="Start time (2nd repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-2">End time</perch:label>
                <perch:input type="time" id="repeat-end-2" label="End time (2nd repeat)" />
            </div>
        </div>
        <div id="repeat-3">
            <div>
                <perch:label for="repeat-date-3">Date</perch:label>
                <perch:input type="date" id="repeat-date-3" label="Date (3rd repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-3">Start time</perch:label>
                <perch:input type="time" id="repeat-start-3" label="Start time (3rd repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-3">End time</perch:label>
                <perch:input type="time" id="repeat-end-3" label="End time (3rd repeat)" />
            </div>
        </div>
        <div id="repeat-4">
            <div>
                <perch:label for="repeat-date-4">Date</perch:label>
                <perch:input type="date" id="repeat-date-4" label="Date (4th repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-4">Start time</perch:label>
                <perch:input type="time" id="repeat-start-4" label="Start time (4th repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-4">End time</perch:label>
                <perch:input type="time" id="repeat-end-4" label="End time (4th repeat)" />
            </div>
        </div>
        <div id="repeat-5">
            <div>
                <perch:label for="repeat-date-5">Date</perch:label>
                <perch:input type="date" id="repeat-date-5" label="Date (5th repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-5">Start time</perch:label>
                <perch:input type="time" id="repeat-start-5" label="Start time (5th repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-5">End time</perch:label>
                <perch:input type="time" id="repeat-end-5" label="End time (5th repeat)" />
            </div>
        </div>
        <div id="repeat-6">
            <div>
                <perch:label for="repeat-date-6">Date</perch:label>
                <perch:input type="date" id="repeat-date-6" label="Date (6th repeat)" format="d/m/Y" />
            </div>
            <div>
                <perch:label for="repeat-start-6">Start time</perch:label>
                <perch:input type="time" id="repeat-start-6" label="Start time (6th repeat)" />
            </div>
            <div>
                <perch:label for="repeat-end-6">End time</perch:label>
                <perch:input type="time" id="repeat-end-6" label="End time (6th repeat)" />
            </div>
        </div>
    </fieldset>
    <div>
        <perch:label for="purpose">Purpose of hire <span class="required">(required)</span></perch:label>
        <perch:input type="textarea" id="purpose" required="true" label="Purpose of hire" />
        <perch:error for="purpose" type="required">Please add the purpose</perch:error>
    </div>
    <perch:content id="declaration" type="textarea" label="Declaration" textile="true" editor="markitup" size="m" />
    <div class="checkbox">
        <perch:input type="checkbox" id="declaration-agree" label="I agree to the declaration" required="true" />
        <perch:label for="declaration-agree">I agree to the above declaration <span class="required">(required)</span></perch:label>
        <perch:error for="purpose" type="required">You need to agree to the declaration</perch:error>
    </div>
    <div class="button">
        <perch:input type="submit" id="submit" value="Send booking form" />
    </div>
    <perch:content id="notes" type="textarea" label="Notes" textile="true" editor="markitup" size="m" />
    <perch:success>
        <perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
    </perch:success>
</perch:form>
Nick Bramwell

Nick Bramwell 5 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

If you add debug to the page and submit the form, what does it output?

I'm presuming you're getting a validation stop with no associated error message.
Nick Bramwell

Nick Bramwell 5 points

7 years ago

Thanks for the fast reply Drew, here is what Debug gives:

TIME    Δ  MESSAGE
0.2504  0   SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0
0.4956  0.2452  
Array
(
    [date] => format
)
0.4963  0.0007  SELECT * FROM perch2_pages WHERE pagePath='/places/parish-hall-booking.php' LIMIT 1
0.4969  0.0006  SELECT * FROM perch2_pages WHERE pagePath='/places/parish-hall-booking.php' LIMIT 1
0.4972  0.0003  Using template: /templates/pages/attributes/minimal.html
0.4985  0.0013  SELECT regionKey, regionHTML FROM perch2_content_regions WHERE regionPage='/places/parish-hall-booking.php' OR regionPage='*' ORDER BY regionPage DESC
0.5199  0.0214  SELECT DISTINCT e.* FROM perch2_events e WHERE eventDateTime>='2014-11-10' ORDER BY eventDateTime ASC
0.5212  0.0013  Using template: /templates/events/listing/bookings.html
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

It's the format validation on the date field.
Nick Bramwell

Nick Bramwell 5 points

7 years ago

Thanks Drew, I’ve changed the type from date to text and now it works fine.

Should type="date" work okay in Firefox/Safari with Perch Forms or is it best just to stick with text?
Clive Walker

Clive Walker 22 points

7 years ago

I've had a problem with type = date as well. It's not supported in IE or Firefox as far as I can tell. I thought it was supported in Safari though.
Nick Bramwell

Nick Bramwell 5 points

7 years ago

My impression was that browsers that don’t support type="date" should just treat it as a text field. I’m not sure whether it causes problems with the Forms app though if the browser doesn’t support it.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

The validation error is from Perch, which does support type="date" - the issue being you're not entering a valid format of date in the text field.
Nick Bramwell

Nick Bramwell 5 points

7 years ago

Thanks Drew, so if the browser supports date it should be in a valid format, but otherwise it would need checking with PHP/javaScript before passing it to Perch?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Yes, that's right.

I think HTML5 date fields are a bit immature at the moment. I wouldn't use them personally.
Nick Bramwell

Nick Bramwell 5 points

7 years ago

Thanks Drew, yes I’ll just stick with plain text fields.