<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_v3_site_key }}"></script>{{ form_start(modalForms[article.id],{'attr': {'novalidate': 'novalidate','id': 'catalog-form-type', 'name': 'catalog_shipping_form','class': addresses and not lastCatalog ? 'd-none mt-3 mt-lg-3 mt-md-3' : 'mt-3 mt-lg-3 mt-md-3'}}) }} <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].firstname) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].firstname) }} </div> {{ form_widget(modalForms[article.id].firstname) }} {{ form_errors(modalForms[article.id].firstname) }} </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].lastname) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].lastname) }} </div> {{ form_widget(modalForms[article.id].lastname) }} {{ form_errors(modalForms[article.id].lastname) }} </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].email) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].email) }} </div> {{ form_widget(modalForms[article.id].email) }} {{ form_errors(modalForms[article.id].email) }} </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].company) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].company) }} </div> {{ form_widget(modalForms[article.id].company) }} {{ form_errors(modalForms[article.id].company) }} </div> <div class="row"> <div class="col-lg-6"> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].phone) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].phone) }} </div> {{ form_widget(modalForms[article.id].phone) }} {{ form_errors(modalForms[article.id].phone) }} </div> </div> <div class="col-lg-6"> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].fax) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].fax) }} </div> {{ form_widget(modalForms[article.id].fax) }} {{ form_errors(modalForms[article.id].fax) }} </div> </div> </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].streetLine01) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].streetLine01) }} </div> {{ form_widget(modalForms[article.id].streetLine01) }} <div class="mt-3 mt-lg-3 mt-md-3"> {{ form_widget(modalForms[article.id].streetLine02) }} </div> {{ form_errors(modalForms[article.id].streetLine01) }} {{ form_errors(modalForms[article.id].streetLine02) }} </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].city) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].city) }} </div> {{ form_widget(modalForms[article.id].city) }} {{ form_errors(modalForms[article.id].city) }} </div> <div class="row"> <div class="col-lg-6"> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].state) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].state) }} </div> {{ form_widget(modalForms[article.id].state) }} {{ form_errors(modalForms[article.id].state) }} </div> </div> <div class="col-lg-6"> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].zipCode) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].zipCode) }} </div> {{ form_widget(modalForms[article.id].zipCode) }} {{ form_errors(modalForms[article.id].zipCode) }} </div> </div> </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].country) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].country) }} </div> {{ form_widget(modalForms[article.id].country, {id: 'country-' ~ article.id}) }} {{ form_errors(modalForms[article.id].country) }} </div> <div class="{{ not addresses ? 'd-none' : 'd-flex flex-column' }} {{ form_errors(modalForms[article.id].addToAddressBook) ? 'input-error' }}"> <div class="position-relative checkbox-container mb-1 mb-lg-1 mb-md-1"> {{ form_widget(modalForms[article.id].addToAddressBook) }} <span class="checkmark"></span> <div class="ml-1 ml-lg-1 ml-md-1"> {{ form_label(modalForms[article.id].addToAddressBook) }} </div> </div> {{ form_errors(modalForms[article.id].addToAddressBook) }} </div> <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(modalForms[article.id].quantity) ? 'input-error' }}"> <div class="ml-3 ml-lg-3 ml-md-3"> {{ form_label(modalForms[article.id].quantity) }} </div> <div class="border border-pearl d-flex custom-input-number" style="width: 105px;"> <button type="button" disabled="disabled" class="custom-input-number-button custom-input-number-button--down"><span class="custom-input-number-arrow"></span></button> {{ form_widget(modalForms[article.id].quantity) }} <button type="button" class="custom-input-number-button custom-input-number-button--up"><span class="custom-input-number-arrow custom-input-number-arrow--up"></span></button> </div> {{ form_errors(modalForms[article.id].quantity) }} </div> <div class="d-flex mb-3 mb-lg-3 mb-md-3 justify-content-end"> <a class="btn btn-ghost mr-3 mr-lg-3 mr-md-3" onclick="javascript:location.reload();"> Cancel </a> {{ form_widget(modalForms[article.id].save) }} </div> {{ form_widget(modalForms[article.id].catalog, {value: article.id}) }}{{ form_end(modalForms[article.id]) }}<script> $("#catalog-form-type button[type=submit]").on('click', function(e) { e.preventDefault(); grecaptcha.ready(function() { let action = document.getElementById('action').value; grecaptcha.execute('{{ recaptcha_v3_site_key }}', { action: action }) .then(function(token) { // add token value to form document.getElementById('g-recaptcha-response').value = token; $('#catalog-form-type').submit(); }); }); });</script>