I need to use a mysqli query that is created in js

  Kiến thức lập trình

I have to do my final degree project and I have a big problem in here, I’ve been dealing with it for about 2 weeks straight and came across with nothing.
The thing is, I need to create a survey webpage, and one of the elements I need to have is a page in which I can create the surveys to add them in the mysqli database (I’m using XAMPP), so I decided to create a structure based on a textbox, wehre the question will be, a select dropdown with the different types of questions (text, check, radius or select), and if we choose any of the ones which have different options when being answered (check, radius or select), a textbox will appear with a button. In this second textbox you will write the option you would like to add to the question and then press the button, so it reaches another js function which will create the mysqli query ready for implement.
Now here is the problem, I don’t know how to send those queries to php, as I can’t directly send them to the database. I’ve searched and found about node.js and AJAX, but I can’t use them as I can’t refresh the page… any help is welcome. Here is the php page and the js (the variables and functions are in spanish, sorry):

procesa_crear.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>VarLud Analytics</title>
    <link rel="icon" type="image/jpg" href="Imagenes/Logo_solo.png">
    <link rel="stylesheet" href="CSSestilos.css">
</head>
<body class="">
<script type="text/Javascript" src="javascript.js"></script>
<?php
session_start();
if (isset($_SESSION["admin"])) {
    if ($_SERVER["REQUEST_METHOD"] == "GET") {
        $preg = $_SESSION["preg"];
        $bd = mysqli_connect("localhost", "root", "", "varlud");
        $id = $_SESSION["ID_encuesta"];
?>
        <form action="" method="POST">
            <?php
            $sacar = mysqli_query($bd, "SELECT MIN(ID_pregunta) as 'minimo', MAX(ID_pregunta) as 'maximo' FROM preguntas where ID_encuesta = $id");
            $min = 0;
            $max = 0;
            foreach ($sacar as $data) {
                $min = $data["minimo"];
                $max = $data["maximo"];
            }
            foreach (range($min, $max) as $número) {
                echo $número;
            }
            $h = 0;
            for ($i = $min; $i <= $max; $i++) {
            ?>
                Pregunta: <input type="text" name="<?php echo 'txt' . $h; ?>"><br>
                Tipo de opciones:
                <select id="<?php echo $h; ?>" name="<?php echo 'op' . $h; ?>" onchange="generar_opcion(this.value, <?php echo $i ?>, <?php echo $h ?>)">
                    <option id="texto" value="texto">Caja de texto</option>
                    <option id="radio" value="radio">Botones radio</option>
                    <option id="check" value="check">Botones check</option>
                    <option id="select" value="select">Desplegable</option>
                </select><br>
                <div id="$h"></div>
            <?php
                $h++;
            }
            ?>
            <input type="hidden" name="cant" value="<?php echo $h; ?>">
            <input type="submit" value="Siguiente">
        </form>
            <div id=insert></div>
<?php
    } else {
       /* $bd = mysqli_connect("localhost", "root", "", "varlud");
        $id = $_SESSION["ID_encuesta"];
        $preg = $_SESSION["preg"];
        $sql = "INSERT INTO preguntas VALUES ";
        for ($i = 1; $i <= $preg; $i++) {
            $txt = $_POST["txt" . $i];
            $op = $_POST["op" . $i];

            $values = "(DEFAULT, '$id', '$op', '$txt')";
            if ($i != $preg) {
                $values = $values . ", ";
            }
            $sql = $sql . $values;

            //echo("<script>console.log('ELSE PHP: " . $txt . " , " . $op . " , " . $i ."');</script>");
        }
        $sql = $sql . ";";
        //echo("<script>console.log('BD: " . $sql ."');</script>");
        mysqli_query($bd, $sql);
        //echo "<div id=insert>";*/
    }
} else {
    header("Location: perfil.php");
}
?>
</body>
</html>

javascript.js

function generar_opcion(value, iden, i) {
    console.log("linea2");
    console.log(value + ":" + iden + ":" + i);
    const idHtml = "html" + i;

    if (document.getElementById(idHtml) != null) {
        document.getElementById(idHtml).remove();
    }

    let html = "<div id= " + idHtml + " >";
    console.log("saramambiche");

    switch (value) {
        case 'texto':
            html += "<p>Hola mundo texto</p>";
            break;

        case 'radio':
            html += "<p>Hola mundo radio</p>";
            html += "<input type=text id=opcion >";
            op = "op_radio";
            console.log(op);
            console.log(iden);
            html += "<input type="button" onclick="subir(op, "+ iden +")" value="Subir">";
            break;

        case 'check':
            html += "<p>Hola mundo check</p>";
            break;

        case 'select':
            html += "<p>Hola mundo select</p>";
            break;
    }
    html += "</div>"
    document.getElementById(i).insertAdjacentHTML("afterend", html);
}

function subir(op, ida) {
    console.log("entrará a subir");
    let input = document.getElementById("opcion").value;
    console.log(op);
    console.log(ida);
    if (input.length === 0) {
        alert("No se ha proporcionado ningún valor");
    } else {
        //document.getElementById(insert).insertAdjacentHTML("");
        bd = "mysqli_connect('localhost', 'root', '', 'varlud');";
        sql = "'INSERT INTO " + op + " VALUES ";
        console.log("SQL3: " + sql);
        prequery = "mysqli_query(" + bd + ", 'SELECT MAX(ID_pregunta) FROM preguntas');";
        prequery++;
        sql += "(DEFAULT,"+ ida +", '" + input +"')'";
        console.log("SQL5: " + sql);
        query = "<?php mysqli_query(" + bd + ", " + sql + "); ?>";
        console.log(query);
        document.getElementById('insert').insertAdjacentHTML("afterend", query);
    }
    console.log("final ");
}

I’ve tried different ways as explained before.

New contributor

Francisco Vargas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT