Submit result.php into bootstrap Modal with AJAX-CodePudding

Disclaimer: I checked stackoverflow posts over the past 3 days, i cannot find the exact answer to my question, please read before linking with an answered one

Problem
I have a submit form, the user submits a USD number and it will convert to BTC.
The problem is, the user will be redirected to a new page, which is converter.php

Solution
Instead of redirecting to a new page (to converter.php)
We'd like to show the converter.php response with AJAX, into a modal after submit.

index.php

                 <form action="converter.php" method="post">
                    <h1>USD to BTC - Converter</h1>
                    <p>
                      <label for="amount">USD amount</label>
                      <input type="text" name="amount" id="amount">
                    </p>
                    <p>
                      <label for="currency">Currency</label>
                      <select name="currency" id="currency">
                      <option value="USD">USD</option></select>
                    </p>
                    <p>
                      <input type="submit" name="submit" value="Submit">
                   </p>
                </form>

converter.php

After submit, we redirect to converter.php it converts USD->BTC and echo the correct values

Example

Below is a very similar example of what i'd like to implement into my code above ⬆️
(Both work, i want to combine them and display php response in modal)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form id="form" method="post">
    <div id="userDiv"><label>Type a number</label>
        
         <input type="text" name="userId" id="userId"/> <br></div>
    <button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>


<!--modal-->
<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">
Here should echo response from the converter.php file
        <div id="bingo"></div>

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


<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var vUserId = $("#userId").val();
         if(vUserId=='')
         {
             alert("Please enter a num");
         }
         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>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

You can also pair this example with result.php to check the echo response

CodePudding user response：

Change your input type from submit to button for prevent submitting the form

CodePudding user response：

When You Submit The Request Using Ajax In your success response first you need to open the modal then easily can change inputs on modal. Let me show you the example from your code

<script>
$(document).ready(function(){
    $("#btn").click(function(){
        var vUserId = $("#userId").val();
     if(vUserId=='')
     {
         alert("Please enter a num");
     }
     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
         $("#Your Model ID").modal('show') //this will open modal automaticaly
         //Now use response to display on modal
         $("#input_box_1_id").val(response.inputbox1_val);
         //You can also render html from response like this
         $("#intened_id").html(response.html_content);
      });
    }
 });
  });
</script>

In this way, we can automatically open modal and display value in modal. If further confusion you can ask.