1

Buen día comunidad recurro a esta fuente de conocimiento, ya que soy nuevo en ajax,js. El problema que tengo , tengo dos select anidados uno de funciones y otro de cursos, hace todo la funcion bien, es decir escojo "informatica" muestra cursos de informatica y en un input las horas que dura. Lo que necesito es el valor del input vale "10" sumarlo con mi segundo curso y dar un total de 40 horas ,habilitar botón si cumple con las horas requeridas. No se como sacar ese valor para hacer la suma. adjunto mi codigo index.php

<select class="form-control" placeholder="selecciona" name="estado1" id="estado1" required>
                            <option></option>
                            <?php
                            $query = "SELECT id_funcion,funcion FROM funcion_especifica  ORDER BY funcion";
                            if ($resultado = $mysqli->query($query)) {
                                while ($row3 = $resultado->fetch_assoc()) {
                            ?>
                                    <option value="<?php echo $row3['id_funcion']; ?> ">
                                        <?php echo $row3['funcion']; ?>
                                    </option>
                            <?php
                                }
                            }
                            ?>
                        </select>
                    </td>
                    <td align=" center" class="col-md-2">
                        <select class="form-control" placeholder="selecciona" name="municipio1" id="municipio1" required>
                            <option></option>

                        </select>
                    </td>
                    <td>
                        <center>
                            <label name="localidad1" id="localidad1">

                            </label>

                        </center>

ajax

                     //valores ajax
                     $(document).ready(function() {
                     $('#estado').on('change', function() {
                     var funcion = $(this).val();
                     // console.log(funcion);
                     if (funcion) {

                    $.ajax({
                        type: 'POST',
                        url: 'select_prueba_get.php',
                        data: 'id_funcion=' + funcion,

                        success: function(html) {
                            //console.log(html + 'data');
                            $('#municipio').html(html);



                        }
                    });
                }

            });
            $('#municipio').on('change', function() {
                var stateID = $(this).val();
                //console.log(stateID);
                if (stateID) {
                    $.ajax({
                        type: 'POST',
                        url: 'select_prueba_get.php',
                        data: 'id_curso=' + stateID,

                        success: function(html) {
                            // console.log(html);
                            $('#localidad').html(html);


                        }
                    });
                }

            });  

select_prueba_get.php

    //select_prueba_get.php

<?php
require 'conexiondnc.php';
if (isset($_POST["id_funcion"])) {

$continente = $_POST['id_funcion'];
$sql = $mysqli->query("SELECT id_curso,curso FROM cursos2023 WHERE 
id_funcion=$continente order by curso");
while ($row = $sql->fetch_assoc()) {
    echo "<option value='" . $row['id_curso'] . "'>" . $row['curso'] . "</option>";
}
}
if (isset($_POST["id_curso"])) {
$continente = $_POST['id_curso'];
$sql = ("SELECT horas FROM cursos2023 WHERE id_curso=$continente order by curso");

$result = $mysqli->query($sql);
$row = $result->fetch_assoc();
$cadena = $row['horas'];
//echo $cadena = $row['horas'];
echo '<input id="suma" name="num1" value=' . $cadena . ' disabled/>';
}

introducir la descripción de la imagen aquí

2: Necesito sacar el valor de las horas para sumar y mostrarlo en un input

3
  • Hola, cuesta mucho interpretar el codigo asi que prefieron que me respondas: dode se debe realizar la suma en el fronend (javascript) o en el backend (php); que has intentado para lograr esa suma ... Commented el 25 ene. a las 20:59
  • La respuesta que me compartes es correcta, si yo hago un console.log(html); de municipio me trae el 20, suponiendo que guarda ese valor en $('#localidad').html(html); , y lo imprime en el id="localidades". Yo al querer obtener ese valor para la suma, no trae ningun valor. No se como pasar el valor al id="localidad" que me trae como respuesta del archivo select_prueba_get.php o de que otra forma lo puedo resolver. Los select dependiente uno del otro.
    – JMc Díaz
    Commented el 25 ene. a las 23:03
  • tu sabes que hace .html()??? Commented el 25 ene. a las 23:54

1 respuesta 1

0

No me voy a romper la cabeza ajajaja, y viendo que tiene algo de javascript lo vamos a resolver con javascript:

        // Función para calcular la suma o resta y actualizar el input
        function actualizarResultado() {
            // Obtener los valores de los selects
            const valorSelect1 = parseInt(document.getElementById('select1').value);
            const valorSelect2 = parseInt(document.getElementById('select2').value);
            const valorSelect3 = parseInt(document.getElementById('select3').value);
            const valorSelect4 = parseInt(document.getElementById('select4').value);

            // Calcular la suma de los valores
            const total = valorSelect1 + valorSelect2 + valorSelect3 + valorSelect4;

            // Actualizar el valor del input con el resultado
            document.getElementById('result').value = total;
        }

        // Agregar eventos de cambio a cada select
        document.querySelectorAll('.number-select').forEach(select => {
            select.addEventListener('change', actualizarResultado);
        });
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de Suma/Resta</title>
</head>
<body>

    <label for="select1">Select 1:</label>
    <select id="select1" class="number-select">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>

    <label for="select2">Select 2:</label>
    <select id="select2" class="number-select">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>

    <label for="select3">Select 3:</label>
    <select id="select3" class="number-select">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>

    <label for="select4">Select 4:</label>
    <select id="select4" class="number-select">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>

    <label for="result">Resultado:</label>
    <input type="text" id="result" readonly>


</body>
</html>

Explicacion... esto es sencillo y quiero que cada script que hagas lo veas de la siguiente forma:

  • Eventos: quieres capturar cuando se cambia el valor del select, tienes que hacerlo entonces con javascript.
  • Quiere sumar valores: tienes que crear un mecanimos para identificar los inputs/selects para obtener sus valores.
  • por ultimo actualizar un campo asignandole un valor especifico.

Lo que falta: toma mi codigo y adaptalo a tu necesidad, es lo que haras cuando sean Tareas: busca, investigar, adaptar, mejorar y debuguear.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.