Passing data via Modal Bootstrap and getting php variable?

Question

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

Answer 1

Php loads before anything on your page, so you cannot set a php variable using jQuery or javascript, but the opposite can be done.

If you have the value of the text field initially when loading then you can set it via php on load, otherwise you will need to submit your form to use the value of the input in php.

The following code is valid, php setting javascript

<?php 
  $valueA = "I am value A";
?>

<script language="javascript">

  var jsValueA = "<?php echo $valueA; ?>";
  alert(jsValueA); // alerts I am value A

</script>

The following code is invalid, javascript setting php

 <input type="text" class="form-control" name="idPlaza" id="a">
 <?php 
     $valueA = $("#a").val();
 ?>

This is wrong because when PHP executed the input field would not have been created yet, besides jQuery cannot be executed within PHP scope. javascript and jQuery are used at browser level to manage user interaction and DOM objects and events while PHP is used at server level and not browser.

So if you want to set a php variable, you can only set it when the server script loads, i.e php gets executed, which comes before anything else in the page. Or you can grab a value from a posted form $_POST or URI query string $_GET

Answer 2

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