Asked  7 Months ago    Answers:  5   Viewed   37 times

I'm trying to get an input value passed via jquery and setting into a php variable, but I don't know how to do that.

This button have the value that I want to send:

<button type='button' data-a='".$fila['idPlaza']."' href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'><img src='../images/edit.png' width='20px' height='20px'></button>

Then I have this js code to send the value:

    $(document).on("click", ".modalEditarUsuario", function (e) {
        e.preventDefault();

        var self = $(this);

        $("#a").val(self.data('a'));

        $(self.attr('href')).modal('show');
    });

Finally I have this bootstrap modal

<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Editar usuario</h2>
            </div>
            <form name="formularioModificaUsuario" method='post' action="usuarios.php">
            <div class="modal-body">
                <input type="text" class="form-control" name="idPlaza" id="a">
                <?php 
                    $valueA = ???
                ?>
            </div>
            <div class="modal-footer">
                <button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset"><img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
                <button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit"><img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
            </div>
            </form>
        </div>
    </div>
</div>
</div>

My question is, how could I get the value of id='a' input into php variable $valueA to use after?

 Answers

41
<button type='button' data-a="<?echo $fila['idPlaza'];?>" href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'>
    <img src='../images/edit.png' width='20px' height='20px'>
</button>

Put below code in footer before end of </body> tag.

<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
        <div class="modal-content">


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

Use Script like this.

<script>
    $('.modalEditarUsuario').click(function(){
        var ID=$(this).attr('data-a');
        $.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
            $(".modal-content").html(result);
        }});
    });
</script>

Create NewPage.php, and paste the below code. (Remember, this page name NewPage.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.)

<?
$ID=$_GET['ID'];
?>
<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
    <div class="modal-body">
        <input type="text" class="form-control" name="idPlaza" id="a">
        <?php 
            $valueA = $ID;
        ?>
    </div>
    <div class="modal-footer">
        <button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">
        <img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
        <button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">
        <img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
    </div>
</form>
Wednesday, March 31, 2021
 
Gigamegs
answered 7 Months ago
91

I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.

You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.

var iframes = ["URL1","URL2","URL3"];

$('.modal').on('shown.bs.modal', function() {
    var id = $(this).data('id');
    $(this).find('iframe').attr('src',iframes[id]);
});

You will notice I am referencing a data-id, which you can add to each of your modals very easily.

<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">

I started with 0, since arrays start with 0 index.

***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.

EDIT: Actually, using another data attribute, you can avoid the issue of URLs loading every time. Updated demo.

<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">

Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.

$('.modal').on('shown.bs.modal', function() {
    var loaded = $(this).data('loaded');

    if(loaded == false) {
        var id = $(this).data('id');
        $(this).find('iframe').attr('src',iframes[id]);

        $(this).data('loaded', 'true');
    }
});

EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:

var iframes =<?php echo json_encode($php_array);?>;
Wednesday, March 31, 2021
 
nhunston
answered 7 Months ago
50

I think you can make this work using jQuery's .on event handler.

Here's a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal.

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
Tuesday, June 1, 2021
 
nomie
answered 5 Months ago
18

What you need is an Ajax call inside $('#detail').on('show.bs.modal', function (e) { } to fetch data against $row['id_site']

<script>
    $(document).ready(function() {
        $('#detail').on('show.bs.modal', function (e) {
            var uniqueId = $(e.relatedTarget).data('id');
            //Ajax Method
            $.ajax({
                type : 'post',
                url : 'file.php', //Here you will fetch records 
                data :  'uniqueId='+ uniqueId, //Pass uniqueId
                success : function(response){
                    $('.modal-title').html('Detail site ' + uniqueId);
                    $('.modal-body').html(response);
                }
            });
        });
    });
</script> 

file.php

<?php 
include 'koneksi.php';
if($_POST['uniqueId']) {
    $uniqueId = $_POST['uniqueId']; //escape the string
    $sql = "SELECT * FROM data_site WHERE id_site = '".$uniqueId."'";
    $result = $conn->query($sql);
    if($result->num_rows > 0){
    while ($row = $result->fetch_assoc()) {
        echo "<table>
                <tr>
                <td>ID Site </td>
                <td>: $row[id_site]</td>
                </tr>
                <tr>
                <td>Nama Site </td>
                <td>: $row[name_site]</td>
                </tr>                                   
                <tr>
                <td>Witel</td>
                <td>: $row[witel]</td>
                </tr>
                <tr>
                <td>OLT Hostname  </td>
                <td>: $row[olt]</td>
                </tr>
                <tr>
                <td>IP OLT </td>
                <td>: $row[ip_olt]</td>
                </tr>
                <tr>
                <td>Port OLT</td>
                <td>: $row[port_olt]</td>
                </tr>
                <tr>
                <td>IP ONT</td>
                <td>: $row[ip_ont]</td>
                </tr>
            </table>
        ";
    }
}
}
?>
Sunday, August 15, 2021
 
sassy_geekette
answered 2 Months ago
80

I edit my answer and improve code

On your index page instead postLink, create a button or link that will call the modal, ie

<?php 
echo $this->Html->link(
    $this->Html->tag('i', '', array('class' => 'glyphicon glyphicon-trash')), 
    '#', 
    array(
       'class'=>'btn btn-danger btn-confirm',
       'data-toggle'=> 'modal',
       'data-target' => '#ConfirmDelete',
       'data-action'=> Router::url(
          array('action'=>'delete',$category['Category']['id'])
       ),
       'escape' => false), 
false);
?>

In your modal add postLink without confirmation message, instead of the message put false:

<?php
    echo $this->Form->postLink(
         'Confirm',
            array('action' => 'delete'),
            array('class' => 'btn btn-danger btn-sm active'),
            false,
         )
        );
        ?>

add this js code after bootstrap.js

$(document).ready(function() {
  $(".btn-confirm").on("click", function () {
     var action = $(this).attr('data-action');
     $("form").attr('action',action);
});
});

or as suggested by user1655410 add this js code

$('#ConfirmDelete').on('show.bs.modal', function(e) {
    $(this).find('form').attr('action', $(e.relatedTarget).data('action'));
});
Thursday, August 19, 2021
 
Andrea Ligios
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :