K
K
kittykiss2016-01-12 13:47:15
JavaScript
kittykiss, 2016-01-12 13:47:15

How to setup eform and dropzone.js in modal window?

Hello everyone, I have such a problem, I needed a form for the site in a modal window, with the ability to attach several files. I use eform for this and dropzone.js for uploading files, because. eform didn't want to upload files from me.
The form normally goes, the letter reaches.
The problem is that after adding files to the form via dropzone, the form is sent, and each file comes in a separate letter + after pressing submit, the form is sent, for example, if you send 10 files, then 11 letters will come (10 letters with files and 1 without a file from forms).
In general, guys help me, I broke my whole head.
The form

<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=`[email protected]` 
          &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>

Chunk 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>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question