Show modal dialog after form submitted

Question

I have a form that after submitting downloads file . I want automatically instead of download automatically the file ..to show a modal-dialog and display the download link.

<form name="softwareform" id="softwareform" action="../downloadlink.php" method="POST" align="left">
  <div class="input-group margin-bottom-sm">
      <span class="input-group-addon">
         <i class="fa fa-windows fa-fw"></i>
      </span>
      <input class="form-control" type="text" placeholder="Software Title" name="softtitle" id="softtitle">
  </div>

  <button type="submit" class="btn btn-primary"  >
      <i class="fa fa-cogs"></i>Download File
  </button>
</form>

In the download link.php i am redirecting after process using header to the download file. Here is the modal dialog i want to shown .

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content" id="dialog-download">
         <br/><br/>
         <h2>Your Download is ready.</h2>
         <hr/>
         Your Download link is here <br/>
      </div>
   </div>
</div>

How can i show this dialog after form submitting? Thanks In advance

Answer 1

$("#softwareform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type : 'POST',
        data: $("#softwareform").serialize(),
        url : 'url',
        success : function(data){
            $("#download_link").html(data);
            $("#download_modal").modal("show");
        }
    });
    return false;
});

<div id="download_modal" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="dialog-download">
            <br/><br/><h2>Your Download is ready.</h2>
            <hr/>
             Your Download link is here<a id="download_link" target="_blank"> </a>
            <br/>
        </div>
     </div>
</div>

To show a modal, function modal("show") is used.

Here when submitting the form, return the download link from php file, and it would be populated via jquery and modal will be shown, when user clicks on that link, the file would be downloaded

Also checkout the jsfiddle : - http://jsfiddle.net/h3WDq/559/

source :- How to open a Bootstrap modal window using jQuery?

You can change the method to POST and use serialize form to send the data from form.

Answer 2

You will need to send the form data through ajax and then open up the modal manually. On the form page

    <form name="softwareform" id="softwareform" method="POST" align="left">
    <div class="input-group margin-bottom-sm">
    <span class="input-group-addon">
     <i class="fa fa-windows fa-fw"></i>
    </span>
    <input class="form-control" type="text" placeholder="Software Title" name="softtitle" id="softtitle">
    </div>
    <a href="javascript:void(0);" onclick="submit_form()" class="btn btn-primary"  >
    <i class="fa fa-cogs"></i>Download File
    </button>
    </form> 

    <div id="download_modal" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content" id="dialog-download">
        <br/><br/><h2>Your Download is ready.</h2>
        <hr/>
         Your Download link is here<a id="download_link" target="_blank"> </a>
        <br/>
     </div>
    </div>
    </div>

    <script type="text/javascript">
         function submit_form(){
           var data = $('#softwareform').serialize();
           url = 'downloadlink.php',
             $.ajax({
             method: 'POST',
             url : 'url',
             dataType:'html', //json,html you will echo on the php file
             success : function(data){
        $("#download_link").html(data);
        $("#download_modal").modal("show");
    }
});
         }

    </script>