Perform insert through an input with the type image

Question

Perform insert through an input with the type image

Navigation

#1 by (0 votes)

1

I hope and you can help me.

I want to carry out a survey which will contain a question and 4 options, those options will be excellent, good, regular and bad which will be represented with an emoticon or emojis. The problem lies in that I do not know how to do that when clicking on any of these faces insert in the database the answer either of the 4 that you 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>

html5 php css

asked by Jac 08.10.2018 в 19:22

source

1 answer

script in bash to store the result of a Mongodb query several clients in java sockets

score 0 · Accepted Answer

A input type="image" works as a button or input type="submit" , although it does not have a value and what you receive from the other side (in the php) are the coordinates x and y where the user clicked.

For example, a click on the "regular" image will send the following values (result of var_dump($_POST); )

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

To have the value in a single variable ( $_POST['eleccion'] ) and textually ( excelente , bueno , regular , malo ) I recommend using a group of radio buttons with the same name and different values, the radios are hidden but the image goes inside the label associated with each radio button, so when you click on the label you are setting the value of the radio button. Something like this:

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>