How to Submit Form into Bootstrap Modal (send POST method into Modal) Laravel

Question

I have been trying for 2 days but still no luck!

I want to

• Submit Form from index.php to result.php
• Show result.php inside Modal while index.php is open! (without closing index.php)

here is example code!

index.php

<form id="myform" method="post" action="result.php" target="_blank">
<input type="text" name="userId" id="userId"/>
<input id="button" type="submit"/>
</form>

result.php

    <div id="resultModal" class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                 <i class="fa fa-times-circle"></i>ESC</button>
                 <h4 class="modal-title">Show Result </h4>
            </div>
            <div class="modal-body">



            </div>

        </div>
    </div>
   </div>

In Modal body

<?php  $selectedId = $_POST['userId']; 
    echo  $selectedId; 
?>

And JQuery

<script type="text/javascript">

    $('#myForm').on('submit', function(ev) {
        var userId = $('#userId').find("input").val();
        $.ajax({
            type: 'POST',
            url : $(this).attr('action'),
            data: userId,
            success: function () {
              // alert('form was submitted');
            }
          });
});
</script>

Solution

Well it has taken me some time but I think I found an answer to your question, or at least this solution can give you a good clue on how to continue with what you are doing.

First index.php: Here you need to have your form with an input field and one button, which we will call modal, and submit form (using Ajax for post)

<form id="form" method="post">
    <div id="userDiv"><label>UserId</label>
         <input type="text" name="userId" id="userId" placeholder="UserId"/> <br></div>
    <button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>

Then you need a modal where you will put content from remote page. In modal-body you add one more div tag with id="bingo" to locate him easy :) like this:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">MyModal</h4>
      </div>
      <div class="modal-body">
        <div id="bingo"></div>

      </div>
    </div>
   </div>
</div>

This page also needs to have a script tag which will do the job. Important it must be placed after the script tag where you load the jquery file.

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var vUserId = $("#userId").val();
         if(vUserId=='')
         {
             alert("Please enter UserId");
         }
         else{
            $.post("result.php", //Required URL of the page on server
               { // Data Sending With Request To Server
                  user:vUserId,
               },
         function(response,status){ // Required Callback Function
             $("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
             $("#form")[0].reset();
          });
        }
     });
   });
</script>

And last but not the least result.php:

<?php
   if($_POST["user"])
   {
        $user = $_POST["user"];
       // Here, you can also perform some database query operations with above values.
       echo "Your user id is: ". $user;
  }
?>

P.S. I hope I didn't mess somewhere with ids, variables or similar because I tried to adjust the solution to your example. I hope this is what you need, or at least this will be a clue to accomplish your task. Still think that this could be done on one page but it was interesting for me to try to find a way to make this work... GL!

Comments

[ErcanE]

Thank you for your time Aleksandar! Just because I am working on Laravel project that reason I couldn't show all my code here.I couldn't make your code working but maybe I am missing something! So I will check deeply.

[Aleksandar Miladinovic]

You're welcome. Well it's work fine for me, i will check if i miss something one more time but i think i didn't... I hope you will make it work. I have problem with <script> tag at first i put <script src=jquer> after this script with ajax code accidentally so it's caused me a problem and take some time, i believe it's something small like that. So, if you already didn't place it like that, first <script src=jquer.js> than <script>Ajax code</script> than <script src=bootstrap.js>....

[ErcanE]

There is no problem to load script and modal pop up window.But I cant get remote content.Only empty modal window loading which is located in index.php

[Aleksandar Miladinovic]

I just test it and it's work just fine, is there a way to sand you my php source files? I'm new here so i don't know if it's possible.

[ErcanE]

I didn't upload here because of Laravel project.So not many people use Laravel. I ll find the way to show you source code, I will be available lately.Thank you again Aleksandar!

[Aleksandar Miladinovic]

And again you're welcome. Sorry for my English I want to send my index.php and result.php to you so you can check what's happened there to compere code... :) sorry for misunderstanding

[ErcanE]

So sorry my bad! I was in rush so couldn't read carefully! Here is one of the best online code tester jsfiddle.net Regards

[Aleksandar Miladinovic]

I can't there write php code so here is dropbox link link to this two file, download them and try to see if it's work...

[ErcanE]

Let us continue this discussion in chat.