Set a value to HTML select while using Ajax and SweetAlert2

Question

I am building a form using SweetAlert2 + Ajax, but I have a problem with the <select> tag, so I will skip segments of the code that have nothing to do with the problem

The Ajax sends the email to the PHP code, then with the email I make a MySQL query to get the full information from the user (name, age and country), I storage the info in an array and returns it to the ajax with echo json_encode($arrayResult), then I print the data with SweetAlert2 but I have the problem that I dont know how to print it with the <select> tag, here is my code so you can understand me better...

The Ajax + SweetAlert2

$.ajax({
    type: "POST",
    url: "getuserdata.php",
    data: {
        email : emailX
    },
    success: function (response){
       response = JSON.parse(response);
       Swal.fire({
           html:`<div>Insert your new information</div>
           <div>
                <span>Name</span>
                <input id="name" type="text" value="${response.name}">
           </div>
           <div>
                <span>email</span>
                <input id="email" type="email" value="${response.email}">
           </div>
           <div>
                <span>Age</span>
                <input id="age" type="text" value="${response.age}">
           </div>
           <select id="country">
                <option value="USA">USA</option>
                <option value="England">England</option>
                <option value="Canada">Canada</option>
           </select>
           `,
         })
       }
    })

An just in case here is the PHP:

<?php

    $mysqli = new mysqli("localhost","root","","store");
    $mysqli->set_charset("utf8");

    $email = $_POST['email'];

    $sql = "SELECT * FROM clients WHERE email = '".$email."'";
    $result = mysqli_query($mysqli, $sql);
    $data = $result->fetch_assoc();
    $count = mysqli_num_rows($result);

    $arrayResult = [];

    if($count > 0){
        $arrayResult['name'] = $data['name'];
        $arrayResult['age'] = $data['age'];
        $arrayResult['country'] = $data['country'];
    }else{
        $arrayResult['name'] = '';
        $arrayResult['age'] = '';
        $arrayResult['country'] = '';
    }

    echo json_encode($arrayResult);

?>

Of course if this was a basic HTML code I would have solve it but it is inside a Javascript + Inside Ajax + inside a SweetAlert2 and I have try all the ways I know but dont work.

The country can be ONLY one of those 3 (USA, England and Canada), there is a ${response.country} that resturns one of those 3 countries.

So what I want is that depending of the country returned It will be the one selected in the <option> of the <select>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Aug 18 '22 at 20:31

score 1 · Accepted Answer · edited Aug 23 '22 at 13:25

1

I guess you can just assign the return value to your select option!?

something like $("country").val(country);

also, maybe you can check this question, too. link

edited Aug 23 '22 at 13:25

Tyler2P

2,324
26
22
31

answered Aug 18 '22 at 16:24

Pau800426

26
2

Set a value to HTML select while using Ajax and SweetAlert2

1 Answers1