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

@Epodax I can echo the download link from the second form but how to trigger it on the first form?? Thanks — jason88, Jun 05 '15 at 07:51
@Epodax No….i want to display the modal on the first page….not on the process page..i want to displayed instead of redirecting — jason88, Jun 05 '15 at 07:57
See Namit's answer :) It explains what I was trying to get at better than I did. — Epodax, Jun 05 '15 at 07:58

score 8 · Accepted Answer · edited May 23 '17 at 12:01

8

$("#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.

edited May 23 '17 at 12:01

Community

1
1

answered Jun 05 '15 at 07:58

Namit Singal

1,506
12
26

…thanks for your answer . I added the above code on my form…also checked the link you sent me ..but i still can't make it working.On the php that i process the form i redirecting using header…..must i add also something on the php file ? I read also the url you mentioned but it didn't help me... – jason88 Jun 05 '15 at 08:09
Hi, on the php file, you should not use the redirect anymore, just return the url of the file that needs to be downloaded, so that if the user clicks on the new url, the file is downloaded for him – Namit Singal Jun 05 '15 at 08:28
The point is, on the first submit, you process the form information, and return the download url of the file to the frontend to show it on the modal, and then download the file using that link on the modal itself – Namit Singal Jun 05 '15 at 08:37
i tried it…i removed the redirection but it stills opens downloadlink.php when i submit the form and no dialog opening – jason88 Jun 05 '15 at 12:36
Also, if you need form data, just change the method from get to post, and serialize form – Namit Singal Jun 05 '15 at 13:45

score 0 · Answer 2 · answered Jun 05 '15 at 13:15

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>

Show modal dialog after form submitted

2 Answers2

Linked