How to pass multiple variables in modal popup in php - javascript

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> Net Banking
<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

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).

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.

Related

bootstrap modal does not load on second click

I am showing notifications on modal with ajax call, ajax and php code is fine, It shows notifications on modal only first time, on second click at anchor it does not load "modal-dialogue" div and "modal-content" but it loads "modal fade modal-form in" div. When I debug it I saw display none on both above div's I know I can handle them with javascript, but I think that's not the solution.
What I am missing there, please guide
<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
<i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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>
<h3 class="modal-title" id="flagModalLabel">
<?php echo esc_html__( 'Flag' ); ?>
</h3>
</div>
<div class="modal-body">
<form id="cs_flag_user">
<input type="hidden" name="name_one">
<input type="hidden" name="name_two">
<textarea></textarea>
</form>
</div>
</div>
</div>
</div>
It seems you may have a problem in server side, the code in your page, or any form submissions which changed may be the DOM, It will be easier to open the console and figure out exact problem.
A full demo for your code is running in Codepen here. I just replaced your php code with simple text, check it and leave your comment in case you need more help.
If you need to work with modal windows easily, I already wrote and open sourced modal windows wrapper plugin based on bootstrap4, you can find also demos and how to use here.
Try avoiding data-toggle="modal" data-target="#user-flag"
and use jquery to display and hide modals.
If notifications are loaded via ajax, then display modal inside success of that ajax.

Display modal after submit button clicked/while confirmation page loads

I'm creating a MVC web application where the user fills out a form and, after clicking the submit button, a view with a PDF is generated containing the user's information. The PDF generator I am using takes a long time to work, so I would like to have a "Please Wait" modal display when the user clicks submit and waits for the next view to be generated.
The purpose of the modal is to discourage the user from clicking the submit button multiple times, and let the user know that their form went through and the app is still working.
I have tried the following code, but the modal isn't displaying:
HTML
<div class="form-horizontal">
<!--the entire form...-->
<div>
<input type="submit" value="Submit" class="btn btn-default btn-lg" id="submitButton" />
</div>
<!-- Modal -->
<div class="modal fade" id="waitingModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<h2 class="modal-realtitle">Thank You for Your Patience!</h2>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".form-horizontal").submit(function () {
$('#waitingModal').show();
});
});
The form is still submitting, but the modal is not displaying. I've also tried this code for the modal:
HTML
<div>
<input type="submit" value="Submit" class="btn btn-default btn-lg" data-toggle="modal" data-target="#waitingModal" data-backdrop="static" data-keyboard="false" />
</div>
<div class="modal fade" id="waitingModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<h2 class="modal-realtitle">Thank You for Your Patience!</h2>
</div>
</div>
</div>
</div>
The code above gets the modal to display, but the submit button no longer does what it's supposed to do. In other words, the modal displays but the form does not submit.
This is the first time I am working with modals and trying to make this happen. Is it possible to make the first piece of HTML to work with some jQuery?

Modal Bootstrap showing in all windows thats same email

Hi i dont know how i should do this. I made showing users in panel admin and its working correct even showing roles on button. Next step what i want to do is click and showing modal bootstrap and here i got problem i dont know how i can pass $user->email to title when i do this:
<form action="{{route('change')}}" method="post" role="form" class="form-horizontal">
{{ csrf_field() }}
<div id="myModal" class="modal fade" name="{{$user->email}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Zmiana roli użytkownika o adresie E-mail:</br>
<b>{{$user->email}}</b>
</h4>
</div>
<div class="modal-body">
<p>Wybierz rolę dla użytkownika</p>
<select name="{{$user->email}}">
<option name="role_user">User</option>
<option name="role_moderator">Moderator</option>
<option name="role_admin">Admin</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
<input name="" type="submit" class="btn btn-primary" value="Zmień rolę"></input>
</div>
</div>
</div>
</div>
</form>
I have somethink like on screen and i want make change role in this modal.
In title modal is showing adress email but its showing only last in tables.
So maybe i must name this windows like {{$user->email}} becouse change roles i want base on email becouse its uniqe in database. I made change roles on checkbox but i trying do this better with nice view. I want do somethink like that admin show all user and button near them and he can click button and got info user->email and select. This select showing user role and admin can change and save it. And its showing in all user window last row from table user i mean i got last user admin with role admin so its showing in all window admin details.
Update 1:
I do like that:
<td><button class="btn btn-info wielkoscPrzycisku" name="{{$user->email}}" id="{{$user->email}}" data-toggle="modal" data-target="#myModal" href="#myModal" value="" data-user-email="{{$user->email}}">{{$roles->name}}</button></td>
Its button from i want get data.
Next jquery:
jQuery('#open-modal-button').click(function () {
user_email = jQuery(this).data('user-email');
jQuery('modal-title-email').html(user_email);
});
Next span button:
<span id="modal-title-email"></span>
I don't know exactly what the rest of your code says, so I'm kind of winging it, but what you could do is use jQuery and html data attributes on your table row and when looping through your user array you populate that and have something to grab easily with jquery.
<h4 class="modal-title">Zmiana roli użytkownika o adresie E-mail:</br>
<span id="modal-title-email"></span>
</h4>
<tr>
<td>Name</td>
<td>Email</td>
<td><button data-user-name="John">Admin</button></td>
</tr>
<script>
jQuery('#open-modal-button').click(function () {
username = jQuery(this).data('user-name');
jQuery('#modal-title-email').html(username);
});
</script>
When clicking the button that opens the modal you grab the data from the data attribute and then use jQuery html function to add it to your modal title.

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

Dynamic Modal without refreshing page via Ajax

I'm attempting to fill a modal with dynamic data based on a form input, without a page reload.
Step by step:
1) User will input a name and submit form on admin.php
2) Data is submitted via Ajax (ideally) and processed via editUser.php
3) Data is pulled from a mysqli database and put in a modal content
4) Modal is loaded (While still viewing the admin.php page) with no page reload, but with the dynamic content in the modal.
My code so far:
Form + Ajax:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
<form id="myForm" action="query/editUser.php" method="post">
Name: <input type="text" name="name" />
<input type="submit" value="Submit Comment" />
</form>
editUser.php:
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
--List data based on the form input from before
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My current problem is that I do not know how to show the modal after the form is submitted.
You will notice I currently have no calls to my database, or filling any content on the modal, because that will come later. My goal right now is to make the modal show after the form is submitted (And doing this in a way where it is still possible to fill the modal before it is shown).
I'm stuck, have been trying to figure this out for awhile, and would much appreciate help.
Edit:
Here is a breakdown of what I have, and what I want.
Right now, I've got 2 pages: admin.php and editUser.php
The admin page holds the form on it, that when submitted uses "action" to post to the editUser page, which has the code for my modal.
When the form is posted, I want the modal to be dynamically filled with information (based on the input from the admin page) using a while statement pulling information from a database.
I then want the modal to show as an overlay on the admin page - this should all happen with absolutely no page refreshing.
I KNOW how to fill the modal with information dynamically, I KNOW how to call a modal, but I DO NOT know how to show the modal on my admin page, after submitting a form and then filling the modal that is saved on the userEdit page DYNAMICALLY.
If dialog is the ID of the <div class="modal"> that's going to receive the content,
$('#dialog').modal('show');
e.g.:
$.get(url).then(function(data) {
// fill "#dialog .modal-body" with content based on 'data'
...
$('#dialog').modal('show');
});

Categories