Jump to content

struggle how to get button value to php


BrainPill
 Share

Recommended Posts

Hello I found an online example of radio buttons its in html css.

(example can be foud at codepen too https://codepen.io/web-tiki/pen/JXwLGQ/   ) 

I would like to get the chosen value into php

the script is without javascript jquery.

Do I need this to solve it? (If not needed then rather straight from html to php )

And if needed javascript or jquery, how is it done?

 

<html>

<head>
 <style type="text/css">
 *{margin:0;padding:0;box-sizing:border-box;}
body{background:teal;color:#fff;padding-bottom:10%;}
h1{text-align:center;margin:20% 0 5%;font-family:verdana;font-weight:100;}
#radios{
  position:relative;
  width:50%;
  margin:0 auto;
}
input[type="radio"]{
  position:absolute;
  right:1000%;
}
label{
  float:left;
  width:15%; padding-bottom:15%;
  margin:0 2.5%;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
}
#slider{
  position:absolute;
  left:0%; top:0;
  width:10%; padding-bottom:10%;
  margin:2.5% 0 0 5%;
  background:#fff;
  transition:transform 1s;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-duration:.3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}
#input1:checked  ~ #slider{ animation-name: input1; left:0; }
#input2:checked  ~ #slider{ animation-name: input2; left:20%; }
#input3:checked  ~ #slider{ animation-name: input3; left:40%; }
#input4:checked  ~ #slider{ animation-name: input4; left:60%; }
#input5:checked  ~ #slider{ animation-name: input5; left:80%; }

@keyframes input1{ 30%, 70% { transform:scale(0.5); } }
@keyframes input2{ 30%, 70% { transform:scale(0.5); } }
@keyframes input3{ 30%, 70% { transform:scale(0.5); } }
@keyframes input4{ 30%, 70% { transform:scale(0.5); } }
@keyframes input5{ 30%, 70% { transform:scale(0.5); } }
 </style>
</head>

<body><center>
<br><br><br><br>
<form action="" method="post" onChange="this.form.submit();" >
<h1>Select one:</h1>
<div id="radios">
  <label for="input1"></label>
  <input  id="input1" name="radio" type="radio" />
  <label for="input2"></label>
  <input  id="input2" name="radio" type="radio" />
  <label for="input3"></label>
  <input  id="input3" name="radio" type="radio" />
  <label for="input4"></label>
  <input  id="input4" name="radio" type="radio" />
  <label for="input5"></label>
  <input  id="input5" name="radio" type="radio" />
  <span id="slider"></span>
</div>

 
 
</form>
<?php 
if(isset($_POST['radio'])) {
	

	var_dump($_POST['radio']);
}



?>
</center>
</body>
</html>

 

Anyone got any idea?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...