Aloysia de Argenteuil Aloysia de Argenteuil - 4 months ago 12
Javascript Question

How to send variables from hidden fields to a remote PHP file and display the result of the script in a Bootstrap modal without refresh using jQuery?

I have following form inside a table that is generate dinamically:

File index.php

session_start();

...

<table>
<tr>
<td>Name</td>
<td>Band</td>
<td>Indx</td>
<td>Send</td>
</tr>
<tr>
<td>Bruce</td>
<td>Iron Maiden</td>
<td>95</td>
<td>
<form action="remote.php" class="rock" method="POST">
<input class="name" name="name" type="hidden" value="Bruce">
<input class="band" name="band" type="hidden" value="Iron Maiden">
<input class="indx" name="indx" type="hidden" value="95">
<button class ="send" type="submit">SEND<button>
</form>
</td>
</tr>
<tr>
<td>James</td>
<td>Metallica</td>
<td>90</td>
<td>
<form action="remote.php" class="rock" method="POST">
<input class="name" name="name" type="hidden" value="James">
<input class="band" name="band" type="hidden" value="Metallica">
<input class="inx" name="indx" type="hidden" value="90">
<button class ="send" type="submit">SEND<button>
</form>
</td>
</tr>


When I click on send it sends the info to the script on remote.php:

File remote.php

<?php

session_start();

$name = $_POST['name'];
$band = $_POST['band'];
$indx = $_POST['indx'];

$up = $indx * 2;

$output = '
<div id="rock-modal" class="modal fade in" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">
<i class="fa fa-files-o"></i>
Rock Modal
</h4>
</div>
<div class="modal-body">
The band '.$band.' has an up index of '.$up.'!';
</div><!-- /modal-body -->
</div><!-- /modal-content -->
</div><!-- /modal-dialog modal-lg -->
</div><!-- /modal fade in-->';

$_SESSION['output'] = $output;

header('Location: index.php');


Then index.php is new loaded, but now it opens a modal box with the output from remote.php:

<table>
...
</table>

if(isset($output){
echo $output;
}

<script type="text/javascript">
// Compare Modal
$('#rock-modal').modal('show');
</script>


But now I would like to do the same, but without page reload, i.e. with jQuery.

I did some research and asked a question with another approach here in StackOverflow (How to display dynamical content from a remote file in bootstrap modal using php?) to get more information about it. With this valueable info I did the following:

<tr>
<td>Bruce</td>
<td>Iron Maiden</td>
<td>95</td>
<td>
<form action="remote.php" class="rock" method="POST">
<input class="name" name="name" type="hidden" value="James">
<input class="band" name="band" type="hidden" value="Metallica">
<input class="inx" name="indx" type="hidden" value="90">
</form>

<a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
</td>
</tr>

$(function() {
$('.rock-send').on('click', function() {
var data = $(this).closest('tr').find('>td:lt(3)'),
modal = $(this).data('modal');
$.post( $(this).data('href'), {
name: data.name.text(),
band: data.band.text(),
indx: data.indx.text(),
}, function( data ) {
$(modal).modal('show');
});
});
});


But somehow it's not working. I'm not sure if the remote.php can read the variables that are sent and give them back. How can I manage it?
It's probably a problem in the javascript. I would appreciate any help!
Thank you in advance.

== EDIT ==

Here the code of index.php based on the comments.

<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td>Bruce</td>
<td>Iron Maiden</td>
<td>95</td>
<td>
<form action="remote.php" class="rock" method="POST">
<input class="name" name="name" type="hidden" value="James">
<input class="band" name="band" type="hidden" value="Metallica">
<input class="inx" name="indx" type="hidden" value="90">
</form>
<a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
</td>
</tr>
<tr>
<td>James</td>
<td>Metallica</td>
<td>90</td>
<td>
<form action="remote.php" class="rock" method="POST">
<input class="name" name="name" type="hidden" value="James">
<input class="band" name="band" type="hidden" value="Metallica">
<input class="inx" name="indx" type="hidden" value="90">
</form>
<a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
</td>
</tr>
</table>

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script>
$(function() {
$('.rock-send').on('click', function() {

var name = $("input[name='name']").val();
var band = $("input[name='band']").val();
var indx = $("input[name='indx']").val();
$.post('remote.php', {
name: name,
band: band,
indx: indx,
}, function( data ) {
$("#rock-modal").html(data);
$("#rock-modal").modal('show');
});
});
});
</script>
</body>
</html>


and here the complete remote.php

<?php
$name = $_POST['name'];
$band = $_POST['band'];
$indx = $_POST['indx'];
$up = $indx * 2;

$output = '
<div id="rock-modal" class="modal fade in" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">
<i class="fa fa-files-o"></i>
Rock Modal
</h4>
</div>
<div class="modal-body">
The band '.$band.' has an up index of '.$up.'!!!
</div><!-- /modal-body -->
</div><!-- /modal-content -->
</div><!-- /modal-dialog modal-lg -->
</div><!-- /modal fade in-->';
echo $output;


But unfortunatelly nothing occurs. :-\

Answer

Here are some pointers to help you solve this:

  • The modal markup (HTML) belongs in the main page index.php
  • If you'd like remote.php to return more than one value, return JSON
  • It's always better to listen for a form's submit event instead of a click event.
  • Be sure to include jQuery, and Bootstrap (js & css)
  • BONUS: The processing being performed by the remote.php (if that's all it's doing) can actually be performed using JavaScript on the client-side, meaning you do not need to submit the form, and you don't need remote.php.

Your JavaScript should then be:

$(document).ready(function(){
    $('.rock').on('submit', function( e ){
        e.preventDefault();
        var band = $(this).find('input[name=band]').val(),
            indx = +$(this).find('input[name=indx]').val(),
            up = indx * 2;
        $('#rock-modal').find('.modal-body')
        .text( 'The band ' + band + ' has an up index of ' + up + '!!!' ).end()
        .modal('show');
     });
});

DEMO

Comments