1

Espero y me puedan ayudar.

Deseo realizar una encuesta la cual contendrá una pregunta y 4 opciones esas opciones serán Excelente, bueno, regular y malo las cuales estarán representadas con un emoticon o emojis. El problema radica en que no se como hacer que a la hora de dar clic en alguna de estas caritas inserte en la base de datos la respuesta ya sea cualquiera de las 4 que se de click

<!DOCTYPE HTML>
<html>
<head>
  <title>ENCUESLAB</title>
  <!-- Meta Tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="Notable Feedback Form template Responsive,
   Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates,
   Flat Web Templates, Login sign up Responsive web template,
   SmartPhone Compatible web template, free web designs for Nokia, Samsung, 
   LG, SonyEricsson, Motorola web design">
  <script type="application/x-javascript">
  addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
  }, false);

  function hideURLbar() {
    window.scrollTo(0, 1);
  }
  </script>
  <!--// Meta Tags -->
  <link
    href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template -->


  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="css/style.css" rel='stylesheet' type='text/css' />
  <link href="css/style.login.css" rel='stylesheet' type='text/css' />
  <!-- online fonts-->
  <link href="https://fonts.googleapis.com/css?family=Amiri:400,400i,700,700i" rel="stylesheet">
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <!--//fonts-->
</head>

<body>
  <!-- Navigation -->
  <nav
    class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase"
    id="mainNav">
    <div class="w3l-head">
      <h1>ENCUESLAB</h1>
    </div>
  </nav>

  <form
     action="opciones_pregunta.php"
     method="POST" name="respuesta" id="respuesta">
    <div class="container">

      <div>
        <h1 class="text-uppercase mb-0">
          Como califica la atención recibida a su llegada?
        </h1>
      </div>

      <div>
        <div>
          <input type=image
            src="images/excelente.png" width="120" height="120"
            HSPACE="30" VSPACE="5" name="excelente" value="excelente" id="excelente">

          <input type=image 
            src="images/bueno.png" width="120" height="120" 
            HSPACE="30" VSPACE="5" id="bueno" name="bueno" value="bueno">

          <input type=image
            src="images/regular.png" width="120" height="120" 
            HSPACE="30" VSPACE="5" id="regular" name="regular" value="regular">

          <input type=image
            src="images/malo.png" width="120" height="120" 
            HSPACE="30" VSPACE="5" id="malo" name="malo" value="malo">

        </div>
      </div>
    </div>
  </form>
</body>
</html>
1
  • Se me ocurre que intentes haciendo un type="submit" pero le coloques a dicho botón la imagen de fondo con .css Sin submit nada irá al servidor. "Creo"
    – OBI
    Commented el 9 oct. 2018 a las 4:32

1 respuesta 1

0

Un input type="image" funciona como un botón o input type="submit", aunque no lleva value y lo que recibís del otro lado (en el php) son las coordenadas x e y de donde hizo click el usuario.

Por ejemplo un click en la imagen "regular" enviará los siguientes valores (resultado de var_dump($_POST);)

array(2) {
  ["regular_x"]=>
  string(2) "38"
  ["regular_y"]=>
  string(2) "13"
}

Para tener el valor en una sola variable ($_POST['eleccion']) y de manera textual (excelente, bueno, regular, malo) te recomiendo usar un grupo de radio buttons con el mismo nombre y diferentes valores, los radio se ocultan pero la imagen va dentro del label asociado a cada radio button, asi al hacer click en el label estas seteando el valor del radio button. Algo así:

let elForm = document.getElementById('formEleccion');
let losRadio = elForm.querySelectorAll('input[type=radio]');
// si cambia el valor del radio button submitea el form
losRadio.forEach(r => {
  r.onchange = () => elForm.dispatchEvent(new Event('submit'));
});


// interceptamos el submit del form para mostrar el valor solo para este ejemplo
elForm.addEventListener('submit', (e) => {
  // prevenimos la accion default
  e.preventDefault();
  const formData = new FormData(e.target);
  // mostramos valores por consola
  for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
  }
  // cancelamos el submit
  return false;
});
#formEleccion input[type=radio] {
  display: none;
}

#formEleccion label {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  font-family: verdana;
  text-transform: capitalize;
  font-size: 10px;
  line-height: 1.5em;
  margin: 0 5px;
}

#formEleccion label img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

#formEleccion label:hover img {
  opacity: 0.75;
}
<form id="formEleccion">
  <input type="radio" name="eleccion" id="malo" value="malo" />
  <label for="malo"><img src="https://picsum.photos/120/?image=10"/>malo</label>

  <input type="radio" name="eleccion" id="regular" value="regular" />
  <label for="regular"><img src="https://picsum.photos/120/?image=20"/>regular</label>

  <input type="radio" name="eleccion" id="bueno" value="bueno" />
  <label for="bueno"><img src="https://picsum.photos/120/?image=30"/>bueno</label>

  <input type="radio" name="eleccion" id="excelente" value="excelente" />
  <label for="excelente"><img src="https://picsum.photos/120/?image=40"/>excelente</label>

</form>

3
  • Muchas gracias, de verdad que me ayudo demasiado. Y para guardarlo en la base de datos?
    – Jac
    Commented el 9 oct. 2018 a las 14:07
  • Algún ejemplo extra que puedan proporcionarme para el guardado en base de datos, espero y puedan ayudarme.
    – Jac
    Commented el 9 oct. 2018 a las 16:33
  • hay varios ejemplos funcionales en las respuestas a preguntas sobre base de datos + php por ejemplo es.stackoverflow.com/search?q=php+insertar+datos+mysql Commented el 10 oct. 2018 a las 3:26

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.