+ Start a Discussion
Jack Davis 3Jack Davis 3 

How to remove form section

Can someone help. 

I'm trying to remove a section from a visualforce page and keep getting this error. The section to be removed is below. 


Error: LandRoverCalltoAction line 238, column 15: The element type "apex:form" must be terminated by the matching end-tag "</apex:form>"


Error: The element type "apex:form" must be terminated by the matching end-tag "</apex:form>".

 
<div class="form-section">
                            <div class="form-row">
                                <div class="form-field">
                                    <label class="form-field__label" for="searchField">Postcode</label>
                                    <div class="postcode__input">
                                        <div class="form-field__input">
                                            <apex:inputField id="searchField" value="{!Account.Postcode_Hidden__c}" required="true"/>
                                        </div>

                                        <input id="searchButton" class="form-button form-button--primary" type="button"
                                               onclick="findByPostcode()" value="Find" />

                                    </div>

                                    <div id="selectDropdownDiv" class="selectDropdownDiv">
                                        <label class="form-field__label" for="addressListSelect">Please select your address</label>
                                        <select id="addressListSelect" class="addressListSelect"></select>
                                    </div>
                                    <div class="errorDateMsg" id="errorAddrMsg" style="display: none">Please type the postcode and select your address</div>

                                    <div id="form-address" class="form-address">
                                        <output id="output-address1"></output>

                                        <output id="output-town"></output>

                                        <output id="output-postcode"></output>
                                    </div>

                                    <div id="form-address-apex" class="form-address-apex">
                                        <apex:inputField id="form__address_1" required="true" value="{!Account.BillingStreet}"/>
                                        <apex:inputField id="form__city" value="{!Account.BillingCity}"/>
                                        <apex:inputField id="postcode__box" value="{!Account.BillingPostalCode}"/>
                                    </div>
                                    
                                </div>
                            </div>

                        </div>


 
SarvaniSarvani
Hi Jack,

Please make sure you do not have extra open tags in the code. As the error says "apex:form" must be terminated by the matching end-tag "</apex:form>", search for <apex:form> and make sure it has ending tag </apex:form> at correct place. When you are removing the section make sure you don't leave any incomplete tags.

Hope this helps!

Thanks
Jack Davis 3Jack Davis 3
Hi Sarvani

As far as I can see there are no extra tags. 

The code does have <apex:form> opening and closing tags which appear only once.

Regards
Krishna.AvvaKrishna.Avva
Hi Jack,

It might be mostly because you did not close one of the tags before closing Apex:form. Is it possible to share the complete page?

Regards,
Krishna Avva
Jack Davis 3Jack Davis 3
@krishna

Please see below:
 
<apex:page showHeader="false" controller="HyundaiController" standardStylesheets="false">
    <head>
        <meta charset="UTF-8"/>
        <title>Land Rover Call to Action</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"/>
        <apex:stylesheet value="{!URLFOR($Resource.HyundaiSite,'/css/main-Hyundai.css')}" />
        <apex:stylesheet value="{!URLFOR($Resource.HyundaiSite,'/css/normalize.css')}" />
        <apex:includeScript value="{!URLFOR($Resource.HyundaiSite,'/js/modernizr.js')}" />

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js">
        </script>
    </head>

    <div class="verexHyundai">
        <div class="header">
            <div class="header__inner"></div>
            <div class="header__inner__right"></div>
        </div>

        <div class="banner">
            <div class="banner__inner">
                <div class="banner__title">
                    <span class="banner__question"><b>Your Complimentary Excess Protect Voucher and Driveaway Insurance
</b></span>
                </div>
            </div>
        </div>

        <br/><br/>
        <apex:form id="theForm">
                         <div class="layout" id="pageHND">
                <div class="layout__cta">
                    <div class="cta">
                        <div class="cta__content">       
                                                                </div>
                    </div>
                </div>

                <div class="layout__form">
                    <div class="form-container">

                        <div class="form-section">
                            <div class="form-row form-row--double">
                                <div class="form-field">
                                    <label class="form-field__label" for="form__title">Title</label>

                                    <div class="form-field__input">
                                        <div class="form-dropdown">
                                            <apex:selectList value="{!account.Salutation}" size="1">
                                                <apex:selectOption itemValue="--None--" itemLabel="Please select"/>
                                                <apex:selectOption itemValue="Mr." itemLabel="Mr."/>
                                                <apex:selectOption itemValue="Mrs." itemLabel="Mrs."/>
                                                <apex:selectOption itemValue="Miss." itemLabel="Miss."/>
                                                <apex:selectOption itemValue="Ms." itemLabel="Ms."/>
                                                <apex:selectOption itemValue="Dr." itemLabel="Dr."/>
                                                <apex:selectOption itemValue="Prof." itemLabel="Prof."/>
                                            </apex:selectList>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="form-row form-row--double">
                                <div class="form-row__left form-field">
                                    <label class="form-field__label" for="form__forename">First name</label>

                                    <div class="form-field__input">
                                        <apex:inputField id="form__forename" required="true" value="{!Account.Hyundai_FirstName__c}"/>
                                    </div>
                                </div>
                                <div class="form-row__right form-field">
                                    <label class="form-field__label" for="form__surname">Last name</label>

                                    <div class="form-field__input">
                                        <apex:inputField id="form__surname" required="true" value="{!Account.Hyundai_LastName__c}"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="form-row">
                                <div class="form-field">
                                    <label class="form-field__label" for="form__email">Email address</label>

                                    <div class="form-field__input">
                                        <apex:inputField id="form__email" required="true" value="{!Account.PersonEmail}"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="form-row form-row--double">
                                <div class="form-row__left form-field">
                                    <label class="form-field__label" for="form__forename">Home phone</label>
                                    <div class="form-field__input">
                                        <apex:inputField id="form__phone" value="{!Account.Phone_Home__c}"/>
                                    </div>
                                </div>
                                <div class="form-row__right form-field">
                                    <label class="form-field__label" for="form__surname">Mobile phone</label>

                                    <div class="form-field__input">
                                        <apex:inputField id="form__mobile" required="true" value="{!Account.Phone}"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="form-row">
                                <div class="form-field">
                                    <label class="form-field__label" for="searchField">Postcode</label>
                                    <div class="postcode__input">
                                        <div class="form-field__input">
                                            <apex:inputField id="searchField" value="{!Account.Postcode_Hidden__c}" required="true"/>
                                        </div>

                                        <input id="searchButton" class="form-button form-button--primary" type="button"
                                               onclick="findByPostcode()" value="Find" /><br/>
                                    </div>

                                    <div id="selectDropdownDiv" class="selectDropdownDiv">
                                        <label class="form-field__label" for="addressListSelect">Please select your address</label>
                                        <select id="addressListSelect" class="addressListSelect"></select>
                                    </div>
                                    <div class="errorDateMsg" id="errorAddrMsg" style="display: none">Please type the postcode and select your address</div>

                                    <div id="form-address" class="form-address">
                                        <output id="output-address1"></output><br/>
                                        <output id="output-town"></output><br/>
                                        <output id="output-postcode"></output>
                                    </div>

                                    <div id="form-address-apex" class="form-address-apex">
                                        <apex:inputField id="form__address_1" required="true" value="{!Account.BillingStreet}"/>
                                        <apex:inputField id="form__city" value="{!Account.BillingCity}"/>
                                        <apex:inputField id="postcode__box" value="{!Account.BillingPostalCode}"/>
                                    </div>
                                    
                                </div>
                            </div>

                        </div>

                        <div class="form-section">

                            <div class="form-row">
                                <div class="form-field">
                                                                        <div class="form-field__input__keytag">
                                                                            </div>
                                </div>
                            </div>

                            <div class="form-highlight">

                                <div class="form-row form-row--inset">
                                    <div class="form-field">
                                        <div class="form-field__input">
                                            <div class="form-checkbox-white">
                                                <apex:inputCheckbox id="form-annual" value="{!Account.Keep_Posted__c}"/>
                                                                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row form-row--inset" style="border-bottom: 0">
                                    <div class="form-field">
                                                                                <div class="form-field__input">
                                            <div class="form-checkbox-white">
                                                                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row form-row--inset">
                                    <div class="form-field">
                                                                                <div class="form-field__input">
                                            <div class="form-dropdown-white form-dropdown--inline">
                                                <apex:selectList id="renewal-date" value="{!Account.Renewal_Month__c}" size="1">
                                                    <apex:selectOptions value="{!dates}"/>
                                                </apex:selectList>
                                                <div class="errorDateMsg" id="errorDateMsg" style="display: none">Please select the renewal date</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-field">
                                <div class="form-field__label">I am happy to be contacted by:</div>
                                <div class="form-field__input-radio-group">

                                    <apex:inputCheckbox id="email-check" value="{!contactByEmail}"/>
                                    <apex:outputLabel value="Email" for="email-check"/>

                                    <apex:inputCheckbox id="post-check" value="{!contactByPost}"/>
                                    <apex:outputLabel value="Post" for="post-check"/>

                                    <apex:inputCheckbox id="telephone-check" value="{!contactByPhone}"/>
                                    <apex:outputLabel value="Phone" for="telephone-check"/>

                                    <apex:inputCheckbox id="text-check" value="{!contactBySms}"/>
                                    <apex:outputLabel value="SMS" for="text-check"/>
                                    
                                </div>
                            </div>

                            <div class="form-action">
                                <apex:commandButton value="Submit" action="{!save}" styleClass="form-button form-button--primary"/>
                            </div><br/><br/>

                        </div>

                    </div>

                </div>

                           <div class="layout__footer">
                    <div class="footer-links">
                        <div class="footer-link">
                            <a target="_blank" href="https://www.hyundaicarinsurance.co.uk/privacy" style="color: black; text-decoration: none">Fair Use Notice</a>
                        </div>
                        <div class="footer-link">
                            <a href="#win1"  style="color: black; text-decoration: none">Cookies</a>
                        </div>
                    </div>
                    <div class="footer-outer">
                        <p class="info_additional info_additional--small">Please allow a minimum of 14 days for delivery.</p>

                        <p class="info_additional info_additional--small">Accident recovery is provided for unroadworthy vehicles when you use Hyundai Accident Aftercare to handle your claim on your behalf with your insurer (where the accident was your fault) or with a third party insurer (the insurer of the fault driver where the accident was not your fault). If you cancel the recovery of your vehicle you will be liable for any cancellation charges incurred, or if your insurer rejects your claim you will be liable for any recovery costs incurred. A courtesy car is provided subject to availability when you call Hyundai Accident Aftercare First and your car is repaired by a Hyundai approved repairer. In some instances where your insurer may not let us report the claim to them on your behalf, we will ask you to report to them advising that you are using our Hyundai Kia Accident Aftercare service with a Hyundai Approved Repairer.</p>
                        <p class="info_additional info_additional--small">Hyundai Insurance is arranged and administered by Verex Insurance Services Ltd, which is registered in England and Wales No. 05686831 at Batchworth House, Church Street, Rickmansworth, Herts, WD3 1JE and authorised and regulated by the Financial Conduct Authority, No. 487185. Verex Insurance Services Ltd arranges policies from a panel of insurers, details are available on request. To understand how we may process your information read our <a href="https://www.hyundaicarinsurance.co.uk/fairusenotice" target="_blank">Fair Use Notice</a>.</p>
                        
                    </div>
                </div>

            </div>
        </apex:form>

        <a href="#x" class="overlay" id="win1"></a>

        <div class="popup">

            <div class="popup-content">
                <h2>COOKIE POLICY</h2>
                <p>We use cookies to improve your site experience, to assess content usage and to support the marketing of our services. We want to be completely transparent about the cookies we use and to make their control as easy as possible for you.</p>
                <br/>
                <h3>COOKIES EXPLAINED</h3>
                <p>A “cookie” is a text file containing small amounts of information which is stored on your device when you visit a site. Cookies do not harm your device, and they do not store personally identifiable information such as credit card details.</p>
                <br/>
                <h3>TYPES OF COOKIES</h3>
                <p>There are two types:</p>
                <ul class="bullet-list" style="margin-bottom: 0; margin-top: 0">
                    <li>Session based - placed on your device whilst you visit a website. These expire once your browser is closed.</li>
                    <li>Persistent cookie - will remain on your device until they expire or are removed.</li>
                </ul>
                <br/>
                <h3>THIRD PARTY COOKIES</h3>
                <p>We have carefully selected and monitored third parties to provide cookies on your device. These may be present in emails that we send to you. These help us understand what information you may find of interest in the future. If you would prefer not to receive these emails, please follow the unsubscribe instructions the next time we email you.</p>
                <br/>
                <h3>OUR COOKIES</h3>
                <table border="1" style="width:100% " class="">
                    <tbody>
                    <tr style="vertical-align:center; text-align:center;">
                        <th style="width:3%"></th>
                        <th style="width: 30%">Name</th>
                        <th style="width: 30%">Type</th>
                        <th style="width: 30%">What it is used for?</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Google Analytics cookies</td>
                        <td>Persistent  and session-based</td>
                        <td>To analyse the way you use our website, including how much time you spend with us, the number of pages you visit and if you buy a policy.</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Session Cookies </td>
                        <td>Persistent  and session-based</td>
                        <td>To analyse the way you use our website so that we can identify any problems and improve any issues in a timely manner</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Live person cookies</td>
                        <td>Persistent</td>
                        <td>Enables live chat on the website</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <a class="close" title="Close" href="#close"></a>
        </div>

    </div>
    
    <script type="text/javascript">
        var apiKey;
        var countries = 'GB';
        var limit = 100;
        var addressData;
        var addressListDropdown = $('#addressListSelect');
    
        $.get("/CallHyundaiFirst/resource/1518782199000/HyundaiApiKey", function(text) {
            apiKey = text;
        });

        $(function () {
            $('#addressListSelect').change(function () {
                findAddressById();
            })
        });

        function findByPostcode() {
            $.getJSON("https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.00/json3.ws?callback=?",
                    {
                        Key: apiKey,
                        Text: document.getElementById('j_id0:theForm:searchField').value,
                        Countries: countries,
                        Limit: limit
                    },
                    function (data) {
                        addressData = data.Items;

                        if( addressData[0].Error === '1001'){
                            addressListDropdown.find('option').remove();
                            addressListDropdown[0].options.add(new Option('Please enter a postcode','-1'));
                        }
                        else {
                            addressListDropdown.find('option').remove();
                            addressListDropdown[0].options.add(new Option('Select an Address:','-1'));

                            $.each(data.Items, function (index, value) {
                                if (value.Type === 'Postcode') {
                                    findByPostcodeWithID(value.Id, value);
                                }
                            })
                        }
                    });

            $('#selectDropdownDiv').show();

        }

        function findByPostcodeWithID(Id, selectedAddress) {
            $.getJSON("https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.00/json3.ws?callback=?",
                    {
                        Key: apiKey,
                        Text: document.getElementById('j_id0:theForm:searchField').value,
                        Container: Id,
                        Countries: countries,
                        Limit: limit
                    },
                    function (data) {
                        addressData = data.Items;

                        $.each(data.Items, function (index, value) {
                            var addressItem = value.Text + ', ' + value.Description;
                            addressListDropdown[0].options.add(new Option(addressItem, index));
                        })
                    });
        }

        function findAddressById() {

            var selectedIndex = $('#addressListSelect :selected').val();

            if (selectedIndex < 0){
                return;
            }

            var selectedAddress = addressData[selectedIndex];

            var addressArray = selectedAddress.Description.split(',');

            if (addressArray.length === 2) {
                var city = addressArray[0];
                var postcode = addressArray[addressArray.length-1];

                $('#output-address1').val(selectedAddress.Text);
                $('#output-town').val(city);
                $('#output-postcode').val(postcode);
            }

            if (addressArray.length === 3) {
                var city = addressArray[1];
                var county_city = addressArray[0] + ', ' + city;
                var postcode = addressArray[addressArray.length-1];

                $('#output-address1').val(selectedAddress.Text);
                $('#output-town').val(county_city);
                $('#output-postcode').val(postcode);
            }

            document.getElementById('j_id0:theForm:form__address_1').value = selectedAddress.Text;
            document.getElementById('j_id0:theForm:form__city').value = city;
            document.getElementById('j_id0:theForm:postcode__box').value = postcode;

            $('#form-address').show();
        }

    </script>

    <script>
        $(document).ready(function() {
            var errList = document.getElementsByClassName('errorMsg');

            for (var i = 0, len = errList.length; i < len; i++) {
                document.getElementsByClassName('errorMsg')[i].innerText = 'This is a required field';
            }
        });

        window.onload = showDateMsg();
        window.onload = showAddressMsg();

        function showDateMsg() {
        }if (document.getElementById('j_id0:theForm:form-updates').checked===true &&
                document.getElementById('j_id0:theForm:renewal-date')[0].value==='Please select'){
            $('#errorDateMsg').show();
        }

        function showAddressMsg() {
            if (document.getElementById('j_id0:theForm:searchField').value !== '' &&
                    document.getElementById('output-address1').value === ''){
                $('#errorAddrMsg').show();
            }
        }
    </script>
    <site:googleAnalyticsTracking />
</apex:page>