show a div based on a conditional ajax result in php form

Question

I have a PHP form`looks like this

<form>
    <div id="inid">
        National ID: <input type="text" id="individual_nid" oninput="getIndividualName(this.value)" />
    </div>
    <hr />
    name: <div id="individual_name_fetch"></div>
    <hr />
    <div id="other_inputs fields" style="display: none;">
        more inputs fields...
    </div>
</form>

In my PHP form I have an input textbox where the user inserts a number

<input id="individual_nid" oninput="getIndividualName(this.value)" />

this textbox fires on the fly the following ajax function

function getIndividualName(val)
{
    $.ajax({
        type: "POST",
        url:"get_individual_name.php",
        data: 'individual_nid='+val,
        success: function(data){

            $("#individual_name_fetch").html(data);

        }
    });
}

in this function, I pass the user's input to the get_individual_name.php page.

in the get_individual_name.php page, I have a PHP script that searches for the inserted number in the database and gets the corresponding individual name and fetches it to the id="individual_name_fetch" div.

the PHP script in the get_individual_name.php page looks like this:

$q = mysqli_query($link, "SELECT * FROM table WHERE national_id = '".$_POST['individual_nid']."' ");
if(mysqli_num_rows($q) == 1)
{
    while($r = mysqli_fetch_assoc($q))
    {
        echo $individual_name = $r['individual_name'];
    }
}
else
{
    echo $individual_name = 'Not in db';
}

up to here everything is fine

What I need to do now...

If the searched user founded in the db (mysqli_num_rows($q) == 1) then I want to display the other inputs div id="other_inputs fields" in the form. and if not, then the other_inputs fields div hides again

How can I accomplish this?

please be aware that the ajax function and the PHP script run on the fly

NOTE & UPDATE the script's output will be HTML code, for example

if the result found the output will be:

 <?=$individual_name;?>

OR

in case no result found:

 No user found.

What I am thinking about is to assign a variable e.g. $show_extra_fields = true or $show_extra_fields = false and pass it back to the ajax function and from there I check the value of the $show_extra_fields variable and based on the value I show/hide the other fields div.

is this possible?

[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, Jun 23 '17 at 15:19
@JayBlanchard Thank you, and yes I know that but this is the shortest code just to make clear what I have and what I want — SULTAN, Jun 23 '17 at 15:21

Jay Blanchard · Accepted Answer · 2017-06-23T18:42:07.330

2

To do what you're asking you would add show and hide functions to the AJAX callback:

function getIndividualName(val)
{
    $.ajax({
        type: "POST",
        url:"get_individual_name.php",
        data: 'individual_nid='+val,
        dataType: 'json',
        success: function(data){

            $("#individual_name_fetch").html(data);
            if(data[0] != 'Not in db') {
               $('#other_inputs').show();
            } else {
               $('#other_inputs').hide();
            }
        }
    });
}

Keep in mind that ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements. ID's must not have spaces in them.

EDIT: Return JSON with PHP (CAUTION: Little Bobby says your script is at risk for SQL Injection Attacks. Learn about prepared statements for MySQLi. Even escaping the string is not safe!)

$q = mysqli_query($link, "SELECT * FROM table WHERE national_id = '".$_POST['individual_nid']."' ");
$json = array();
if(mysqli_num_rows($q) == 1)
{
    while($r = mysqli_fetch_assoc($q))
    {
        $json[] = $r['individual_name'];
    }
}
else
{
    $json[] = 'Not in db';
}

echo json_encode($json);

edited Jun 23 '17 at 18:42

answered Jun 23 '17 at 15:22

Jay Blanchard

34,243
16
77
119

in the script there is always an output, this output is an `HTML` code, so in this case the `other_inputs` div will always appear – SULTAN Jun 23 '17 at 17:37
Then you may want to change the output to JSON and `json_encode()` the results. When you receive, you can test if a particular JSON variable is empty. – Jay Blanchard Jun 23 '17 at 17:44
how can I do that? would you please put an example. also Kindly check the information I added in my post. – SULTAN Jun 23 '17 at 17:53
@SULTAN I have made changes to your PHP code and to my jQuery code. Have a look. `data` should contain JSON – Jay Blanchard Jun 23 '17 at 18:17
works.. I had to add a comma `,` at the end of `dataType: 'json'` – SULTAN Jun 23 '17 at 18:41
Ah, my bad - I'll make the change too. – Jay Blanchard Jun 23 '17 at 18:41

score 0 · Answer 2 · answered Jun 23 '17 at 15:22

You can do that using JavaScript. Check the AJAX response then take an action depending on this response.

Note: Don't use spaces in the id in your html

 success: function(data){

        $("#individual_name_fetch").html(data);
        if (data === 'Not in db') {
            document.getElementById('other_inputs_fields').style.display = 'none';
        } else {
            document.getElementById('other_inputs_fields').style.display = 'block';
        }

    }

webdevbyjoss · Answer 3 · 2017-06-23T20:53:19.220

The quick fix: Don't produce any output in case there is no data. Just check for empty string in response.

    success: function(data) {
        if (data === "") {
            $('#other_inputs_fields').hide();
            $("#individual_name_fetch").html('No data available');
        } else {
            $('#other_inputs_fields').show();
            $("#individual_name_fetch").html(data);
        }
    }

Long term solution: This code still looks OK for student's assignments work or hobby project. But in all other cases, you better look for some WEB framework, like Symfony https://symfony.com/. Frameworks will help you to build your application in a more structured way, offering the best practices our of the box, including the security issues pointed out in comments.

@SULTAN it's better to handle the messaging on the client side, updated examples above — webdevbyjoss, Jun 23 '17 at 20:54

show a div based on a conditional ajax result in php form

3 Answers3