@kittykiss

Как настроить eform и dropzone.js в модальном окне?

Всем привет, у меня такая проблемка, нужна была для сайта форма в модальном окне, с возможностью прикрепить несколько файлов. Использую для этого eform и dropzone.js для загрузки файлов, т.к. eform так и не захотел у меня загружать файлы.
Форма нормально отправляется, письмо доходит.
Проблема в том что после добавления в форму файлов через dropzone срабатывает отправка формы, причём каждый файл приходит в отдельном письме + после нажатия submit отпраляется и форма, например если отправить 10 файлов, то придёт 11 писем(10 писем с файлами и 1 без файла от формы).
Вобщем ребята помогите, всю голову себе сломала.

Форма
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Заголовок окна</h4>
            </div>
                <div id="myModal_form">
                    [!eForm? 
					&formid=`modalform`
					&to=`myemail@test.ru` 
					&tpl=`tplmodalform` 
					&report=`modalreport-tpl` 
					&thankyou=`tplThankmodalform` 
					&subject=`Anfrage über Webseite [(site_name)]`
					&from=`((email))`
					&fromname=`((name))`
					!]
                </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal">
Test
</button>

Чанк tplmodalform
<div class="col-xs-12">[+validationmessage+]</div>
<form action="[~[*id*]~]" method="post" class="form-horizontal dropzone" name="modalform" id="modalform" enctype="multipart/form-data">
	<div class="modal-body">
		<div class="form-group"> 
			<div class="col-xs-12">
				<input required id="name" name="name" type="text" placeholder="имя, фамилия/организация" class="form-control input-md" eform="Наименование организации/имя, фамилия:string:0"> 
			</div>
		</div>
		<div class="row form-group">
			<div class="col-xs-6 ">
				<input required id="phone" name="phone" type="text" class="form-control" placeholder="контактный телефон" eform="Телефон::0">
			</div>
			<div class="col-xs-6">
				<input required id="email" name="email" type="text" class="form-control" placeholder="адрес электронной почты" eform="Адрес электронной почты:email:0">
			</div>
		</div>
		<div class="row form-group">
			<div class="col-xs-6">
				<input id="lang-in" name="lang-in" type="text" class="form-control" placeholder="язык исходного текста" eform="Язык исходного текста:string:0">
			</div>
			<div class="col-xs-6">
				<input id="lang-out" name="lang-out" type="text" class="form-control" placeholder="язык текста перевода" eform="Язык текста перевода:string:0">
			</div>
		</div>
		<div class="form-group">
			<div class="col-xs-12">                     
				<textarea class="form-control" id="message" name="message" rows="5" placeholder="ваше сообщение" eform="Ваше сообщение::0"></textarea>
			</div>
		</div>
		<div class="form-group">
			<div class="col-xs-6">
					<input multiple id="file" name="file" class="input-file" type="file" eform="Прикреплённый файл:file:0">
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
		<button id="submit" type="submit" class="btn btn-primary">Отправить</button>
	</div>
</form>

script
<script>
    $(function(){
        $(document).on("submit","#modalform",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,
                resetForm: 'true',
                success: function(result){
                    var data = $(result).find("#myModal_form").html();
                    $("#myModal_form").html(data);
                }
            });
        });
    });
</script>
  • Вопрос задан
  • 911 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы