Ajax - Modal - Passing Variable

Question

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

Answer 1

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!

Answer 2

You are missing a closing curly brace on your on click function.

$.post('korisnik.php', { 'kime': kime });

Above post should also work.

Retrieve it in PHP as follow:

$kime = $_POST['kime'];

Answer 3

I think you mistake in syntax. You should call it like this:

$.ajax({
type: "POST",
url:  "korisnik.php",
data: 
  {
     kime: kime
  }
});