Home / user-84790

APRECode's questions

Martin Hope
APRECode
Asked: 2020-08-26 13:43:35 +0800 CST
  • 1

Good afternoon fellows, I am new to using Spring Boot and I need your support please.

From my controller class(@Conroller) it sent data to my Jsp and the data is displayed correctly, but when I click on the anchor- tag it does not show me the value of the tag with class nameproduc when using Jquery, and it shows me the value of the div I am looking to replace; thanks first of all.

        <div class="row">
            <div class="col-md-12 my-4 mt-md-3 mb-md-5">
                <div class="h4">Más Productos similares:</div>
            </div>
            <div class="col-12 col-md-12 bg-shad pt-4 pb-1">
                <div class="owl-carousel owl-theme text-center" id="gallery_01">
            <!-- me muestra 12 grupos similares: -->
                    <c:forEach items="${producto}" var="producto">  
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none" data-image="${urlPublic}/imagenes/frutas/${producto.proimagen}" data-zoom-image="${urlPublic}/imagenes/frutas/${producto.proimagen}">
                            <div class="border rounded" >
                                <img src="${urlPublic}/imagenes/frutas/${producto.proimagen}" alt="" class="">
                                <div class="nameproduc">${producto.nomProducto}</div>
                                <span class="precioproduct">${producto.precio}</span>
                                <div class="d-none">${producto.dataFilPro}</div>
                            </div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </div>

 <script>
$(".selecproduct").click(function(){
        var nombPro = $(".nameproduc").html();
        alert(nombPro);
    });
javascript
Martin Hope
APRECode
Asked: 2020-06-12 15:11:12 +0800 CST
  • 0

I get the button to be enabled by selecting an input checkbox, but now that I have to select the two checkboxes I have to enable the button and when only one checkbox is not selected the button has to be disabled again, I would greatly appreciate your support, colleagues.

const $inputchec = document.querySelector('.form-check-input')
$inputchec.addEventListener('click', function() {
  const seleccion = document.getElementsByName("checkbox");
  for (var i = 0; i < seleccion.length; i++) {
    if (seleccion[i].checked == true) {
      document.getElementById("btnconttaval").disabled = false;
      break;
    } else {
      document.getElementById("btnconttaval").disabled = true;
    }
  }
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-12 form-check my-2">
      <input class="form-check-input" type="checkbox" name="checkbox" id="checkDatos">
      <label class="form-check-label" for="checkDatos">
            checkbox-1
        </label>
    </div>
    <div class="col-md-12 form-check my-3">
      <input class="form-check-input" type="checkbox" name="checkbox" id="checkContrato">
      <label class="form-check-label" for="checkContrato">
            checkbox-2
        </label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 mt-5">
      <button type="button" class="btn btn-warning text-white col-md-3" id="btnconttaval" disabled>Aceptar contrato</button>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

javascript
Martin Hope
APRECode
Asked: 2020-10-18 13:33:32 +0800 CST
  • 0

Please, your support to be able to display the product of the result of two divs in one div automatically, without pressing a button; when we increment or decrement the values ​​in these 2 divs, the result should be automatically displayed in the new div. My code:

<html>
<head>
<style>
        .d-flex{display:flex;justify-content:center;flex-direction:row;}
        .d-flex button{width:40px;height:40px; border-radius:8px 8px 8px 8px;margin-top:16px;}
        .d-flex p{font-size:12px;margin-top:0;margin-bottom:0;}
        .demo, .demo2, .montone, .montotw{border:1px solid #000000;border-radius:8px 8px 8px 8px;width:100px;height:40px;display:flex;justify-content: center;align-items: center;}
</style>

    <script>
        var a = 500;
        function incremento(){

            a = a + 100;

            if (a<1200) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al maximo "+a);
            }
        }

        function decremento(){
            a = a - 100;

            if (a>400) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al minimo "+a);
            }
        }

        var b = 1;
        function incremento2(){

            b = b + 1;

            if (b<=17) {
            document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Maximo de cuotas: 17");
            }
        }
        function decremento2(){

            b = b - 1;

            if (b>0) {
                document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Minima cuota: 1")
            }
        }
    </script>
</head>
    <body>

    <div class="d-flex">
<!-- cantidades --> 
        <div class="d-flex">
            <button type="button" onclick="incremento()">+</button>
             <div style="flex-direction:column;">
                  <p>¿Cuánto Necesitas?</p> 
                  <div class="demo" id="demo">500</div> 
             </div>
            <button type="button" onclick="decremento()">-</button>             
        </div>  

        <div class="d-flex">
            <button type="button" onclick="incremento2()">+</button>
            <div style="flex-direction:column;">
               <p style="font-size:12px;margin-top:0;margin-bottom:0;">¿Cuántas Cuotas?</p>
               <div class="demo2" id="demo2">1</div>
            </div>
            <button type="button" onclick="decremento2()">-</button>
        </div>
<!-- cuotas -->
        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Minima</p>
            <div class="montone" id="montone">1</div>
        </div>


        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Maxima</p>
            <div class="montotw" id="montotw">1</div>
        </div>
    </div>
    </body>
</html>
javascript
Martin Hope
APRECode
Asked: 2020-06-07 08:54:30 +0800 CST
  • 1

I have a problem to maintain the effect hover, I am looking for the image to maintain the hover effect when I click, and if I select the other image, the effect of the first image is removed, and the second image maintains its hover effect. Let it work as a radio type input, in this case an image will remain selected.

<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        .images1
{
 width: 80px;
 height: 80px;
 background-image: url('icono/educacionp.png');
 background-repeat: no-repeat;
 cursor: pointer;
}
.images1:hover
{
 background-image: url('icono/educacion.png');
 cursor: pointer;
}
.clasehover
{
background-image: url('icono/educacion.png');
}
.images2
{
 width: 80px;
 height: 80px;
 background-image: url('icono/Emprendimientop.png');
 background-repeat: no-repeat;
}
.images2:hover
{
  background-image: url('icono/Emprendimiento.png'); 
}
.clasehover2
{
  background-image: url('icono/Emprendimiento.png'); 
}
.container{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
}
.container p{
  margin-top:60px;
  font-size: 12px;
  cursor: pointer;
}
.imgicon{
  display: flex;
  justify-content: center;
  cursor: pointer;
   margin: 30px;
}
.textlarge{
  display: flex;
}
.imgicon input{
  margin-top: 55px;
  margin-left: -30px;
}

    </style>
</head>

<body>

<div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
</div>

<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
</script>
</body>
javascript
Martin Hope
APRECode
Asked: 2020-05-22 17:09:25 +0800 CST
  • 0

I am new to programming, and I need your support please:

By default if they load the data, but I need the client to have to select this input before saving, it must show "Select", and so the client is forced to select the input(), choose and be able to save.

HTML:

    <div class="form-group"> 
<label for=" codDist'">Distrito</label> 
<select class="form-control " id=" codDist'" placeholder="Enter username"></select> 
</div>

JS:

    function cargaDistrito(depart, provin) {
        var $select = $('#codDist');
        $.ajax({data : {
                coddepartamento : depart,
                codprovincia : provin
                    },
                    url : "DistritPais",
                    type : "GET",
                    dataType : 'JSON',
                    success : function(data) {
                        $select.html('');
                        $.each(data,
                        function(key, val) {
        $select.append('<option value="' + val.codDist + '">'+val.descrip+'</option>');})
                    },
                    error : function() {
                        $select.html('<option id="-1">Cargando...</option>');
                    }
                });
    }
jquery