How to pass multiple variables in modal popup in php

Question

I know this is an answered question HERE and I have tried the same solution, however I am not sure how to pass the values to modal popup which is on same page. I have form where user inputs amount and clicks Pay button and user gets a popup getting a confirmation with the values and currency he/she is using. I wnat to open popup after clicking a button , hence my code:

<form name="form" class="form-horizontal" action="signupinvestment.php" method="post" onsubmit="return validateForm()">
<button type="submit" class="btn btn-primary"><i class="fa fa-university"></i>&nbsp;Net Banking&nbsp;&nbsp;
                         <a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<? $amount_invest=$_GET['amount_invested']; echo $amount_invest;?>" data-prod-id="<? $currency=$_GET['currency'];echo $currency;?>" href="#mymodal" data-target="#myModal" >
<?php echo "<br> $order_id </br>";?>
</a></button>

</form>
 <div class="modal fade" id="myModal" tabindex="-1" 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">×</span>
            </button>

            <table class="table table-hover table-bordered" >
                <tr style=" background-color:#00AAAD; color:#FFF; ">
                    <div class="modal-body">

                        <div id='order-id'></div>
                        <div id='prod-id'></div>
                        <div id='sell-id'></div>
                    </div>
                </tr>
            </table>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
            </button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

And my JQuery Code:

$(document).ready(function () {             
$('.open-my-modal').click(function(){
    $('#order-id').html($(this).data('id'));
    $('#prod-id').html($(this).data('prod-id'));


     // show Modal
     $('#myModal').modal('show');
});
});

I am not sure this $_GET is te right way to access those variables and secondly it doesn't open the popup skips to the next form.
I have rest of the codes, but its lengthy hence didnt pt its same as in the link above.
I know this looks very shabby but had to try before asking. Please help

_“but had to try before asking”_ - and what _have_ you actually tried? The accepted answer to the question you are referring to talks about using `jQuer.data` - why am I seeing nothing of that in your “try” here? Provide a proper [mcve], please, and be specific about what your actual issue with it is. — 04FS, Mar 25 '19 at 12:07
And now for the second part - _“and be specific about what your actual issue with it is”_ — 04FS, Mar 25 '19 at 12:12
You could change the `type="submit"` to `type="button"` part, and see how it goes — Hasta Dhana, Mar 25 '19 at 12:15
@HastaDhana before adding `type="button"` it was taking me to next page, after adding nothings happening — mark, Mar 25 '19 at 12:17
You are attaching an event listener to the element with class `open-my-modal` but this is an anchor tag/link element (``) which is *inside* the button. Is it supposed to be outside? Did you want to instead have that event attached to the button? — VLAZ, Mar 25 '19 at 12:20
$_GET is used to access the query string parameters you called the script with. If you want to create trigger buttons for _multiple, different_ modals on the same page here, then outputting the same values for all makes little sense. So, first question, where is that data actually coming from? Probably a database or something … then you should loop over that result set to populate the data attributes on those `a` elements first of all. — 04FS, Mar 25 '19 at 12:21
`a` inside `button` is invalid HTML btw. - they are both “interactive” elements, you can not nest them. You want a button that triggers something, so use a ´button`, and not links to begin with (and not a mishmash of the two either.) — 04FS, Mar 25 '19 at 12:22
This little lengthy way. Try to submit you form using Ajax. It will make your form easy. see this https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh — Raju, Mar 25 '19 at 12:24

score 0 · Answer 1 · answered Mar 25 '19 at 12:16

0

Your modal is not a separate page, so if you need to get some data from your server (run the php scripts), then you have to add an ajax call to your server and receive that data, that will be passed to your modal via the JavaScript. The JavaScript passes the data to the modal, not the PHP. Because the Modal is not a separate page, and the modal is being opened by the JavaScript.

The only thing, that the JavaScript may lack some data, so you have to add an ajax call, to get that data from you server (php).

answered Mar 25 '19 at 12:16

Sergej

2,030
1
18
28

how to add that ajax? – mark Mar 25 '19 at 12:19
You can use jQuery `$.ajax()` method. You can read the documentation on the jQuery homepage. There are shortcut methods like `$.post()` or `$.get()` as well – Sergej Mar 25 '19 at 12:28

score 0 · Answer 2 · answered Mar 25 '19 at 12:40

if you send that number to your server and after server response, you need the value then the server must put this value into a hidden input and then you show modal and read that data from the hidden input.

but if you need show modal before sending to server button type of form must be button not submit because submit button send data to the server and does not trigger javascript function. in this case, you need to submit the form or sending data to API from your modal. anyway, you can access to textbox value using jquery.

How to pass multiple variables in modal popup in php

2 Answers2