Select a single "checkbox" and then do a calculation

0

I am introducing myself to the world of Web Programming, and in one of the projects that I am making through the course, I have gotten myself with the following question, of which I have investigated but I can not find what I really look for.

It consists of an HTML page where I ask to enter: Name, Surname, Hours Worked and through a Checkbox ask if you work in the "Day" or "Nocturnal" shift. In the PHP where I do the calculations, I have that every hour worked will be paid at 12 and if it is at night at 15.

/* Hoja de Estilos */

#titulo{
	
	font-family: sans-serif;
	font-size: 20px;
	background-color: #999999;
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
}

.valor{

	font-family: sans-serif;
	font-size: 15px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Ingresar Usuario</title>
</head>

<link rel="stylesheet" type="text/css" href="../css/estilos.css">

<body>

	<form action="ingresar.php" method="get" accept-charset="utf-8">
		<table align="center">
			<h1 align="center" id="titulo">Ingrese sus Datos</h1>
			<tr align="center">
				<td class="valor">Nombre</td>
				<td><input type="text" name="nombre" size="20" placeholder="Agustin" required></td>
			</tr>
			<tr align="center">
				<td class="valor">Apellido</td>
				<td><input type="text" name="apellido" size="20" placeholder="Guanipa" required></td>
			</tr>
			<tr align="center">
				<td class="valor">Horas de Trabajo</td>
				<td><input type="text" name="hora" size="20" placeholder="0..100" required ></td>
			</tr>
			<tr align="center">
				<td class="valor">Turno</td>
				<td><input type="checkbox" name="o1">Diurno</td>
			</tr>
			<tr align="center">
				<td></td>
				<td><input type="checkbox" name="o2">Nocturno</td>
			</tr>
			<tr align="center">
				<td><input type="submit" value="Calcular"></td>
			</tr>
		</table>
	</form>

</body>
</html>

The problem comes that I want only one checkbox to be selected, depending on what you investigate using the type="radio" and placing the same name. In the program I put them with different name "o1" and "o2". For PHP to be able to calculate according to the option.

<!DOCTYPE html>

    Login User

<?php

error_reporting(E_ALL ^ E_NOTICE);

    $nombre = $_GET['nombre'];
    $apellido = $_GET['apellido'];
    $hora = $_GET['hora'];
    $o1 = $_GET['o1'];
    $o2 = $_GET['o2'];

    if ($o1) {
        $salario = $hora * 12;
    }elseif ($o2) {
        $salario = $hora * 15;
    }

?>

<p align="center" id="titulo">Recibo</p>

<p align="center" class="valor">

    <?php 

        echo "<br><b>Nombre: </b>".$nombre; echo "</br>";
        echo "<br><b>Apellido: </b>".$apellido; echo "</br>";
        echo "<br><b>Horas de Trabajo: </b>".$hora; echo "</br>";
        echo "<br><b>Salario a Pagar: </b>".$salario; echo " Bs.</br>";

    ?>

</p>

Surely there is a way to do this differently, and be able to select a checkbox and correctly calculate according to the option that you order.

Greetings!

    
asked by Carlos Agustin Guanipa Alvarez 20.02.2018 в 17:16
source

2 answers

1

You have to use the same name, but different value

<input type="radio" name="turno" value="dia">
<input type="radio" name="turno" value="noche">

And in PHP you have to check the value of the variable $ _GET ['turn']

    
answered by 20.02.2018 в 17:45
0

If you add this to your form:

<form id = "myForm" action="ingresar.php" method="get"...

And you add Jquery 3.1 + this script:

$("form input:checkbox").change(function(){

    var $box = $(this); 

    $box.parents('#myForm').find(':checkbox').each(function(){
        $(this).prop('checked', false);
    });

    $box.prop("checked", true);        
});

Everything works as you want.

    
answered by 20.02.2018 в 18:20