Обновление капчи без перезагрузки страницы, а также submit формы

1)Создаем чанки для формы как по стандарту
Назовем к примеру: forma_two и укажем id формы forma_two

[+validationmessage+]
<form class="form" method="post" action="[~[*id*]~]"id="forma_two">
                	
                
                		<input type="text" class="form-input namegood" id="input-name-2-3" name="name" placeholder="Ваше имя" required="" >
                        <input type="text" class="form-input phonegood" id="input-phone-2-3" name="phone" placeholder="Телефон" required="" >
                        <input type="text" class="form-input" id="input-mail-2" name="email" placeholder="E-mail">
                        <textarea name="coment" class="form-input" placeholder="Сообщение" required></textarea>
<p>Введите этот код:<br />
<img src="[+verimageurl+]" name="captcha" alt="Если возникли проблемы с чтением кода - нажмите сюда"/>

<input type="text" class="vericodeform" name="vericode" />
</p>

                		<button type="submit" class="form-submit form-submit-red">Отправить заявку</button>
                	</form>

2) Создаем репорт для формы
назовем как то так report-tpl
<p>Это сообщение было отправлено посетителем по имени [+name+] с помощью формы обратной связи. </p>
<table>
<tr valign="top"><td><b>Имя:</b></td><td>[+name+]</td></tr>
<tr valign="top"><td><b>Телефон:</b></td><td>[+phone+]</td></tr>	
<tr valign="top"><td><b>Email:</b>:</td><td>[+email+]</td></tr>
<tr valign="top"><td><b>Сообщение:</b></td><td>[+coment+]</td></tr>
</table>
<p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>

3)Вывод на странице нужно указать уникальный id на блоке к примеру: modx_mir
<div class="wrapper raw" id="modx_mir">
   
					[!eForm? 
					&formid=`forma_two` 
				
					&tpl=`forma_two`
					&to=`[*email-form*]` 
					&report=`report-tpl`
				
					
	 &vericode=`1`
					&subject=`Сообщение с моего сайта`
					!]
                    <div class="form-title form-title-red">Отправьте вопрос/заявку</div>
                </div>

4)Маленький jquery скрипт в футоре:
<script>
		function modx_evo_setEventsForms(bbb,idform){
			
				
			jQuery('#'+idform).submit(function(e){
	e.preventDefault();
				 var m_method=$(this).attr('method');
var m_action=$(this).attr('action');
   var m_data=$(this).serialize();
		$.ajax({
			     type: m_method,
                url: m_action,
                data: m_data,
			success: function(data){
				
			$('#'+bbb).html($('#'+bbb, data).html());	
		
			modx_evo_setEventsForms(bbb,idform);
		}});

			  });	
}
			
				modx_evo_setEventsForms('modx_mir','forma_two');
			
		
			
			

		</script>

5)Если нужно добавить еще формы то делаем такую ж процедуру только в js добавляем такую строку
modx_evo_setEventsForms('modx_mir2','forma_two2');

где modx_mir2 новый id блока и задаем новый id формы forma_two2
6) И в заключение можно использовать не только с Eform, а с другими снипетами или подключение php файлов в форме.

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.