1

My html form has a Select option. a Mysql query runs after i Change data from option and Submit the data . What i want is, After selecting the data from select it will reload and pass the value to php code.

Here is the html

<form action='a.php?'>
        <SELECT name="client_id" ID="mySelect">
                <OPTION value="artes>'">artes</OPTION>
                <OPTION value="ingles">inglés</OPTION>
        </SELECT>
<input type="submit" name="chooseclient" value="Select">
</form>

Here is the php that runs after submit

        if(isset($_POST['chooseclient'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
MYSQL query here
    }

I have tried this.form.submit() , but that doesnt send data. I understand that i need to Ajax . Is there any way to onChange reload the form and pass data to php ?

Mosarof Hossain
  • 37
  • 1
  • 2
  • 8
  • iI did not notice exactly. Is it possible to explain more – Alihossein shahabi May 13 '18 at 17:41
  • 1
    Do you want your form to be sent in background when you change the value of your select or do you just want it to submit by itself once you've chosen a value? – Lou May 13 '18 at 17:45
  • 1
    You should use [Prepared Statements](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead of manually escaping the values and concatenating your queries. Also, `mysqli_real_escape_string()` is for escaping strings, not integers. – M. Eriksson May 13 '18 at 18:16
  • @Alihosseinshahabi When i select a option , i want the code to enter isset($_POST['chooseclient'] and then do the rest. – Mosarof Hossain May 14 '18 at 15:20
  • @lou I want the code to enter isset($_POST['chooseclient'] after i select a value . The value from select need to be passed in the php code as well – Mosarof Hossain May 14 '18 at 15:20
  • @MosarofHossain I change the code. please test again. – Alihossein shahabi May 14 '18 at 18:29

2 Answers2

1

To achieve what you are expecting you will have to do a little javascript. From what I understand you don't need to send ajax request as you asked for your form to reload when it gets submitted. But I'll give you both approaches.

No AJAX

First we will add a id to your form. Here in my example it will be "my-form". And an onchange event to your select that will call myFunction();. We must also tell to your form to post the data for your current PHP script to work or it will send it as a get

<form id="my-form" action='a.php?' method="post">
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
    <input type="submit" name="chooseclient" value="Select">
</form>

Now in a javascript file or between a script tag add your function :

<script>
function myFunction(){
    document.getElementById("my-form").submit();
}
</script>

Now your form should submit itself when you change the value of your select. BUT you will have another problem.

if(isset($_POST['chooseclient'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

When you submit a form via javascript, your submit button will not be sent with the rest of the data. so if(isset($_POST['chooseclient'])) will never be true. To tackle this you have a few options, I'll give you two :

You could change your PHP to check on client_id instead (If you do this you can remove your submit button completely) :

if(isset($_POST['client_id'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

Or change your submit button to a hidden field :

<form id="my-form" action='a.php'>
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
    <input type="hidden" name="chooseclient" value="Select">
</form>

Ajax

Just like in the first method we will add a id to your form and an onchange event to your select you should also remove your submit button or change it for an hidden field, in this example I will remove it :

<form id="my-form" action='a.php'>
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
</form>

And the script wich will be quite different to the first one :

<script>
function myFunction(){
    var form = document.getElementById("my-form");
    var action = form.getAttribute("action");
    var data = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", action);
    xhr.send(data);
}
</script>

Again you will have to fix your PHP not to condition on chooseclient (Unless you made it an hidden field) :

if(isset($_POST['client_id'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

If you choose the ajax method you may want to do something with the response, there are plenty of threads on stackoverflow about this, here is one : How to get the response of XMLHttpRequest?

Lou
  • 866
  • 5
  • 14
  • thank you for the detailed explanation . I will check and let you know if it worked or not. – Mosarof Hossain May 14 '18 at 15:23
  • the issue is that , code doesnt enter if(isset($_POST['client_id'])){ – Mosarof Hossain May 14 '18 at 16:47
  • @MosarofHossain Did you add the method post to the code of your form? `
    `
    – Lou May 14 '18 at 17:11
  • @MosarofHossain That's the Ajax method mentioned in the second part. It probably does echo 12 but in your xhr response. I modified your code in the link to use the non ajax method as you seem to want to output html in your response. It works fine on my end, can you verify if it does on yours? – Lou May 14 '18 at 17:19
  • it works . I just checked that just by using $_POST['client_id'] and this.form.submit() value is passed to php -_- . Sadlife of coding – Mosarof Hossain May 14 '18 at 17:33
0

If you want to send the selected value automatically by Ajax to a.php when the field value is changed, you can use the following code :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>

<form action='a.php?'>
    <SELECT name="client_id" ID="mySelect">
        <option value="A1>'">A1</option>
        <option value="A2">A2</option>
        <option value="A3">A3</option>
    </SELECT>

</form>

<script type="text/javascript">

    $(document).ready(function() {

        $("#mySelect").change(function(){

            var value =$("#mySelect").val();

            alert(value);
            $.ajax({
                url: 'a.php', 
                type: "POST",
                data: ({chooseclient: value}),
                success: function(){
                    location.reload();
                }
            });

        });
        });
</script>
</body>

If you do not want the page to be reloaded after sending information and saving to the database, ‍ comment it location.reload();

a.php :

<?php

if(isset($_POST['chooseclient'])){
    $clientid = mysqli_real_escape_string($mysqli, $_POST['chooseclient']);
    #MYSQL query here
    # do something
}
Alihossein shahabi
  • 4,034
  • 2
  • 33
  • 53
  • If you're going to reload the page after the ajax call, why even use Ajax? It would be easier to just post the form. – M. Eriksson May 13 '18 at 18:12