Ajax - Modal - Passing Variable

Ivan Šimić

I know this has been asked a lot but after looking up for this for like 6 hours I can say I've tried everything that with my current knowledge (which isn't much) I can understand so I decided to come here and ask for help from the pros :).

This button is also inside korisnik.php

<button href="#myModal1" type="submit" role="button" data-toggle="modal" data-id="<?php print $row['kime']?>" class="open-myModal1"><span class="glyphicon glyphicon-edit"/></button>

This up top is a button that when clicked opens a modal and should pass a value to it, but it doesn't. After looking through a lot of posts on the net I found out easiest way is to send the variable back through AJAX so I used this:

This is located in bottom part of korisnik.php

$(document).on("click", ".open-myModal1", function () 
{
    var kime = $(this).data('id');
    $(".modal-body #kime").val( kime );
    $.post('korisnik.php', { 'kime': kime });
});

Using $kime = $_POST['kime']; print $kime; in korisnici.php doesn't show the value at all but using <input type="text" name="kime" id="kime" value=""/> does. Problem with the one that works is that I still don't have the value needed inside a variable and can't use it to make a query based on the sent value.

So my question is:

How to make this work with ajax so I can get the value with $_POST['kime']?

or

How can I save the value inside the input field inside a variable?

I hope I've been clear enough with my request. Either one of those works since I get what I want and that is a value saved inside a variable I can use for other things.

Thanks for any help.

EDIT: This is modal Code inside korisnik.php

            <div class="modal fade" id="myModal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <center><h4 class="modal-title">EDIT KORISNIKA</h4></center>
                    </div><!-- end header -->
                    <hr/>
                    <div class="modal-body">
                        <!--<input type="text" name="kime" id="kime" value=""/>-->
                        <input type='text' name='kime' id='kime' value=''/>
                        <form class="form-horizontal" action='korisnik.php' method="post">
                        <?php
                        $kime = $_POST['kime'];
                        $query = $db->prepare("SELECT * FROM korisnik WHERE kime = :kime");             
                        $query-> execute(array(':kime' => $kime ));
                        $result = $query->fetch();
                        ?>
                            <table class="table table-striped"> 
                                <tr><th style="vertical-align:middle"><center>Korisničko Ime</center></th><td><input readonly class="form-control"  name="username" value="<?php print $result['kime'] ?>"id="username" type="text"></td></tr>
                                <tr><th style="vertical-align:middle"><center>Ime</center></th><td><input class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)"  name="name" id="name" value="<?php print $result['ime'] ?>"  type="text"></td></tr>
                                <tr><th style="vertical-align:middle"><center>Prezime</center></th><td><input class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="surname" id="surname" value="<?php print $result['prezime'] ?>" type="text"></td></tr>
                                <tr><th style="vertical-align:middle"><center>E-Mail</center></th><td><input class="form-control" name="email" id="email" onkeydown="emailk(this)" onkeyup="emailk(this)" onblur="emailk(this)" onclick="emailk(this)" value="<?php print $result['email'] ?>" type="email"></td></tr>
                                <tr><th style="vertical-align:middle"><center>Kredit</center></th><td><input class="form-control" name="kredit" id="kredit" onkeydown="alpha(this)" onkeyup="alpha(this)" onblur="alpha(this)" onclick="alpha(this)" value="<?php print $result['kredit'] ?>" type="number"></td></tr>
                            </table>
                    </div><!-- end body-->
                    <hr/>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-success pull-left" name="editk" value="Spremi Promjene" />
                        </form>         
                        <button class="btn btn-default pull-right" data-dismiss="modal" type="button">Odustani</button>
                    </div><!-- end footer -->
                </div><!-- end modal-content -->
            </div><!-- end modal-dialog -->
        </div><!-- end modal -->
Ivan Šimić

So in the end after hours of what seemed endless searching and reading I found the solution to this. Instead of sending a variable to modal and doing query inside modal I did query before modal and sent all the values I needed like this.

<script type="text/javascript">

    $(document).on("click", ".open-myModal1", function () 
    {

      var kime = $(this).data('id');
      var ime = $(this).data('ime');
      var prezime = $(this).data('prezime');
      var email = $(this).data('email');
      var kredit = $(this).data('kredit');

      $(".modal-body #username").val( kime );
      $(".modal-body #name").val( ime );
      $(".modal-body #surname").val( prezime );
      $(".modal-body #email").val( email );
      $(".modal-body #kredit").val( kredit );
    });
    </script>

and the button I used to open modal was like this.

<button href="#myModal1" role="button" data-toggle="modal" data-id="<?php print $row['kime']?>" data-ime="<?php print $row['ime']?>" data-prezime="<?php print $row['prezime']?>" data-email="<?php print $row['email']?>" data-kredit="<?php print $row['kredit']?>" class="open-myModal1"></button>

Modal code:

    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <center><h4 class="modal-title">EDIT KORISNIKA</h4></center>
                </div><!-- end header -->
                <hr/>
                <div class="modal-body">
                    <form class="form-horizontal" action='korisnik.php' method="post">
                        <table class="table table-striped"> 
                            <tr><th style="vertical-align:middle"><center>Korisničko Ime</center></th><td><input readonly class="form-control"  name="username" value=""id="username" type="text"></td></tr>
                            <tr><th style="vertical-align:middle"><center>Ime</center></th><td><input class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)"  name="name" id="name" value=""  type="text"></td></tr>
                            <tr><th style="vertical-align:middle"><center>Prezime</center></th><td><input class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="surname" id="surname" value="" type="text"></td></tr>
                            <tr><th style="vertical-align:middle"><center>E-Mail</center></th><td><input class="form-control" name="email" id="email" onkeydown="emailk(this)" onkeyup="emailk(this)" onblur="emailk(this)" onclick="emailk(this)" value="" type="email"></td></tr>
                            <tr><th style="vertical-align:middle"><center>Kredit</center></th><td><input class="form-control" name="kredit" id="kredit" onkeydown="alpha(this)" onkeyup="alpha(this)" onblur="alpha(this)" onclick="alpha(this)" value="" type="number"></td></tr>
                        </table>
                </div><!-- end body-->
                <hr/>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-success pull-left" name="editk" value="Spremi Promjene" />
                    </form>         
                    <button class="btn btn-default pull-right" data-dismiss="modal" type="button">Odustani</button>
                </div><!-- end footer -->
            </div><!-- end modal-content -->
        </div><!-- end modal-dialog -->
    </div><!-- end modal -->

Thanks to all who tried to help! Till next time!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Passing a php variable to a modal using AJAX

From Dev

Passing a variable into a Bootstrap modal

From Dev

Ajax-Request: Passing Dynamic Content to modal

From Dev

Blank when passing data to bootsrap modal with ajax

From Dev

Passing Jquery variable to php within a modal

From Dev

Passing php variable to modal twitter bootstrap not working

From Dev

Passing PHP variable to Modal Window in same page

From Dev

Passing variable's value to modal box in PHP

From Dev

Passing a string variable through ajax

From Dev

Javascript Variable passing to PHP with Ajax

From Dev

ajax POST trouble passing variable

From Dev

Passing a php value to modal using plain javascript without jquery or ajax

From Dev

Passing session variable through AJAX to PHP file

From Dev

Passing Variable from javascript(Ajax) to PHP

From Dev

Dynamic accodion panel passing variable in ajax

From Dev

AJAX: Passing Variable Along Specific Button Click

From Dev

refreshing a <div> with ajax but passing along a counter variable

From Dev

Dynamic accodion panel passing variable in ajax

From Dev

Passing a variable from anchor click to ajax

From Dev

Ajax Jquery Passing variable to PHP file

From Dev

jQuery Ajax passing response variable to function

From Dev

passing a variable from one ajax call to another

From Dev

passing variable from jQuery ajax to nodejs

From Dev

Passing variable to PHP with AJAX doesn't work

From Dev

Passing POST Variable in Ajax Request for Reload not working

From Dev

Passing variable from Ajax to PHP in WordPress plugin

From Dev

Passing Variable Ajax to PHP same page

From Dev

Passing data via Modal Bootstrap and getting php variable?

From Dev

Passing a block variable in an js.erb ajax call

Related Related

  1. 1

    Passing a php variable to a modal using AJAX

  2. 2

    Passing a variable into a Bootstrap modal

  3. 3

    Ajax-Request: Passing Dynamic Content to modal

  4. 4

    Blank when passing data to bootsrap modal with ajax

  5. 5

    Passing Jquery variable to php within a modal

  6. 6

    Passing php variable to modal twitter bootstrap not working

  7. 7

    Passing PHP variable to Modal Window in same page

  8. 8

    Passing variable's value to modal box in PHP

  9. 9

    Passing a string variable through ajax

  10. 10

    Javascript Variable passing to PHP with Ajax

  11. 11

    ajax POST trouble passing variable

  12. 12

    Passing a php value to modal using plain javascript without jquery or ajax

  13. 13

    Passing session variable through AJAX to PHP file

  14. 14

    Passing Variable from javascript(Ajax) to PHP

  15. 15

    Dynamic accodion panel passing variable in ajax

  16. 16

    AJAX: Passing Variable Along Specific Button Click

  17. 17

    refreshing a <div> with ajax but passing along a counter variable

  18. 18

    Dynamic accodion panel passing variable in ajax

  19. 19

    Passing a variable from anchor click to ajax

  20. 20

    Ajax Jquery Passing variable to PHP file

  21. 21

    jQuery Ajax passing response variable to function

  22. 22

    passing a variable from one ajax call to another

  23. 23

    passing variable from jQuery ajax to nodejs

  24. 24

    Passing variable to PHP with AJAX doesn't work

  25. 25

    Passing POST Variable in Ajax Request for Reload not working

  26. 26

    Passing variable from Ajax to PHP in WordPress plugin

  27. 27

    Passing Variable Ajax to PHP same page

  28. 28

    Passing data via Modal Bootstrap and getting php variable?

  29. 29

    Passing a block variable in an js.erb ajax call

HotTag

Archive