CODEWITHSUNDEEP
javascriptphpajaxfunction
Mehdi Hassen Khider
Mehdi Hassen Khider

Reputation: 1

How to execute a sql query with a JS variable as parameter

I have a form in my website. Inside the form, i have a select menu whose take data from a sql table (charging with a loop). I display the different parts of the form with some js scripts (which is working perfectly). In the last step, i have an overview of submitted datas. But i dont know how to get the "select" data and show it in the same page.

<form role="form" id="myform" method="post" action="logs_post.php">
                        <div class="tab-content">
                            <div class="tab-pane active" role="tabpanel" id="step1">
                                <div class="step1">
                                    <h3> Choose the Client</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <script type="text/javascript">
                                                $(document).ready(function() {
                                                    $(".js-example-basic-single").select2(
                                                    );
                                                });
                                            </script>
                                            <label for="exampleInputEmail1">TA Name</label>
                                            <?php 
                                            echo '<select class="js-example-basic-single  form-control"  name="TAName"  id="TAName" style="color:black;" >';

                                            while($cat = $NAMEClients->fetch()){
                                                echo '
                                                <option style="color:black;" value="'.$cat[ID].'">'.'<p id="nameta" >'.$cat[nom_agence].'</p>'.'  -  '.'<p id="office" >'.$cat[OID].'</p>'.'</option>';
                                                }
                                                echo '</select>';
                                                ?>
                                                <?php json_encode($NAMEClients) ?>
                                        </div>
                                    </div>
                                </div>
                                <ul class="list-inline pull-right">
                                    <li><button type="button" id="thebutton" class="btn btn-primary next-step">Save and continue</button></li>
                                </ul>

                                <script>
                                $('#thebutton').click(function(e) {
                                   e.preventDefault();
                                    console.log($('.js-example-basic-single').val());
                                });
                                </script>


                                <?php 
                                    /*$requete =  "SELECT nom_agence, OID FROM agencies WHERE ID="($('.js-example-basic-single').val()) " ";
                                    $reponse->query($requete);*/
                                ?>
                            </div>...........

I have put in comment the request i want to execute. My problem is with WHERE ID="($('.js-example-basic-single').val()) "

Can you give me some ideas on how to perform that.

NB: i've seen some AJAX suggestions but i dont know how to use it.

Upvotes: 0

Views: 1526

Answers (2)

Olu Adabonyan
Olu Adabonyan

Reputation: 93

You can update the page undergorund without refresh. It is a good practice to have separate files for HTML, CSS, JavaScript, PHP. Do not lump all on a single file. This is the way forward. I notice you are using the class selector and have a button. So try this method:

<script>
$(document).ready(function() {
$('#thebutton').click(function() {
    var data = {                
        basicSingle : $('.js-example-basic-single').val()   // or use .text() if val() doesn't work
    };
    $.post('phpFilename', data, function(data) {
        console.log(data);  //php returns data      
    });             
  };
};
</script>


<?php
basicSingle = test_input($_POST["basicSingle"]);
$sql = /* your code here */
echo data;
mysqli_close($conn);
?>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Use jquery ajax() here, its syntax is very simple:

var elemId = $('.js-example-basic-single').val();

$.ajax({
  url: 'process.php',
  method: 'post',
  data: {
    // key: value pair like
    id: elemId,
    success: function(response){
       // Do something here
    }
  }
});

process.php:

$id = $_POST['id'];

here $id contains the value of $('.js-example-basic-single').val();

Upvotes: 1

Related Questions